Role
UI Design - Joey Krikorian (Myself), Ceili Ecker
UX Research - Logen Deeter
Project Type
Industry Design Project - Internship
B2B
E-commerce
Fashion
API for calculating carbon footprint and supplying climate action
project Timeframe
Climate Action with Every Transaction
sustie is a new startup that helps fashion brands showcase their sustainability. They developed a product that brands use to showcase the environmental benefits of purchasing from that brand.
sustie brought me on as part of a three-person internship team prior to the launch of the product and tasked us with designing a product that would showcase positive environmental impacts and increase conversion, including building off of their existing designs, and designing post-purchase follow-up communications to consumers.
Constraints
sustie provided an existing desgin that we were to build off of.
The product had to be designed to fit with any brand's aesthetic.
The project had to be completed in the 5-week timeframe of the internship.
Business Goals
Incentivize conversion
Showcase positive environmental impacts
Build trust with consumers (Avoid greenwashing)
Design Goals
Determine what is important to consumers shopping for sustainable clothing.
Determine what information sustainable fashion brands want to show.
Provide sustainability information in an intriguing and engaging way.
Design product that can be incorporated into any brand's aesthetic.
Design solution that incentivizes conversion and includes highlighting climate actions (without greenwashing).
The Problems
There were two main problems to consider before approaching the design thinking process for this project:
On average, fashion e-commerce sites see less than 3% conversion
noun
green·wash·ing ˈgrēn-wa-shiŋthe
act or practice of making a product, policy, activity, etc. appear to be more environmentally friendly or less environmentally damaging than it really is.
Consumers are untrusting, and leery of greenwashing
As more companies greenwash their products or efforts, consumers become more and more skeptical about sustainability efforts and information provided by brands.
the Pre-Existing Product
Prior to my team’s involvement, sustie had designed a product to combat the problems associated with sustainable fashion e-commerce and provide information that would incentivize conversion.
This version of their product provided us with a starting point for design, but was not without it’s flaws:
The existing card provided us with an understanding of the general layout and footprint for the product.
Additionally, sustie wanted the card to remain somewhat visually neutral so that it could be seamlessly incorporated into any brand’s website.
Problem Statements
By defining the problems and reviewing the existing product, we were able to formulate the problem statements that would drive the design thinking process:
Encourage consumers to complete the purchase process (increase conversion)?
Improve on the existing design, while appealing to any brand, in both information provided and aesthetics.
The Solution
Based on constraints, insights, and feedback from sustie, along with data and insights from brand interviews, we designed a solution that both fits the clients needs and allows for integration with any brand’s website.
Redesigned Product Card
Follow-up Communication
Now that we’ve seen the solution, let’s take a look at how we got there!
understanding the problem space
Why is sustainable fashion important?
Fast Fashion and non-sustainable practices have negative impacts on the environment and people.
Sustainable Fashion, or Slow Fashion, produces much more environmentally friendly, fair products.
Why is conversion low?
Although this conversion data is for the fashion industry in general, we set out to determine if there were factors or consumer behaviors that would impact sustainable fashion, specifically.
Some hypotheses we constructed included:
These hypotheses informed the competitive analysis and wireframes, until surveys and interviews could be performed.
Competitive Analysis
Competitive analysis was conducted to determine how other sustainable fashion brands or e-commerce sites present sustainability information to consumers.
sustie also wanted their product to include post-purchase follow up communication, providing information on a real, trackable action associated with their purchase.
To prepare to design this communication and copywriting, we also researched how these other brands communicate positive incentives or actions with users, both during the checkout process, and post-purchase.
ThreadUp had the most applicable example and copywriting:
user research
In order to better understand the consumer’s habits when it comes to shopping sustainably, we created an online survey that was distributed via email and social media.
Gaining an understanding of the user’s thought processes and actions allowed us to ensure that our product aligned with what consumers valued most when shopping online.
This research revealed that price is more significant of a factor in the decision-making process than knowledge of health and toxin information.
However, many consumers emphasize the importance of making sustainable choices, and are willing to pay higher prices if the information about a product is trustworthy. And, in fact, many consumers already purchase sustainable options.
This research made it clear that we would have to:
Prioritize providing trustworthy information.
Display information in an approachable, understandable, and trustworthy way.
This required us to consider what trustworthy looks like. Brainstorming on this, we considered three criteria that would make the product more trustworthy to consumers:
User Flow
Since our deliverables for sustie included a redesigned product card and post-purchase communication, I designed a user flow in order to better understand when and how the consumer began to interact with the sustie product.
By creating this
We were able to understand the user’s journey and interaction with sustie through the shopping/purchase process.
And allowed us to design interactions that related to specific steps of that journey.
Brand Research
Interviews conducted with several brands that use or want to use the sustie product revealed that:
Brainstorming and iterating designs
After user surveys it became clear what information we needed to provide, i.e. trustworthy information on sustainability efforts.
After brand interviews, it became clear how we needed to present that information, i.e. relatively neutral and scalable designs.
Many brands sustie worked with had great sustainability practices, accomplishments, and products.
However the information regarding sustainability either wasn’t highlighted or wasn’t readily available or obvious to consumers.
Evolution of the product card design
Using the original design as a starting point, the main design goal was to simplify the design, adjust the visual hierarchy, and display the information in a visually appealing way, while remaining neutral enough to be able to incorporate into any brand’s aesthetic.
Original
Designing the Follow-up Email
When designing the follow-up communication, we wanted to draft copywriting that included energetic and engaging language that reinforced the positive impact the consumer had by shopping sustainably.
When designing the follow-up communication, we wanted to draft copywriting that included energetic and engaging language that reinforced the positive impact the consumer had by shopping sustainably.
Since “trustworthyness” was an important insight from both the user survey and the brand interviews, we also drafted copywriting and actions that focused on encouraging consumers and building trust.
By including a tangible, trackable action, consumers can see that the brands they have chosen to patron are trustworthy, and are not engaging in greenwashing.
Sketch
Wireframe with
Draft Copy
High Fidelity
(Draft)
High Fidelity
(Final)
Final screens
Product Card
Post-Purchase Follow-up Email
designed to
Encourage and empower users to make sustainable choices!
Fit in with any brand’s aesthetics!
Increase conversion!
Checkout experience prototype
Screenreader support is currently disabled. To enable it, use the Accessibility settings from the Options menu.
sustie Case StudyEdited 3 months ago
Prototype Created In Figma:
Style guide
sustie had a style guide and brand identity that they shared with us at the beginning of the project.
Icons were chosen by me for use in the design of the product card
future updates
Unfortunately, due to time constraints and scheduling conflicts with brands and users for usability testing, the internship concluded before usability testing on our “final” designs was conducted. We were unable to be present for any insights and final design changes based on this feedback.
However, there are some design alternatives and testing I would’ve liked to conduct, if given the time.
Additionally, although outside the scope of work for this project, I suggested some design changes and updates for the sustie website landing page.
Experimenting With Color
As a designer who works with more “playful” UI, I would’ve liked to bring in a couple brands that were more accepting of a colorful alternative for the product card. It would’ve been interesting to see if this had an effect on consumer interaction or conversion.
sustie website
I believe these changes would be extremely beneficial for developing more trust with consumers, and instilling confidence in the sustie brand with both other brands and consumers
Existing sustie Homepage
My Re-Design
experience and takeaways
This was my first project as part of a UX/UI Team. Although it was a change from the other projects I’ve worked on, it was a great opportunity to rely on others, and be relied on, based on our individual strengths. I found that the entire process is very efficient and produces great ideas, faster, when you have a team to brainstorm and iterate on ideas with.
Personally, working as 1 of 2 UI designers on this project reinforced my passion for and desire to focus on UI. Of course, having an exceptional UX researcher was key to the designs, but understanding and iterating on the visual aspects of the product was what I enjoyed most in this project.
Thanks for reading!
If you'd like to know more about me or what I do, please reach out!
Also, check out my other project case studies!
My Projects
Let's Work Together!
Have a project you need help with? Don't hesitate to reach out!
Name
Email Address
Message<div _="@=1240,dis=none"><div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;" _="@=1241,dis=none,[@=1242]">Hi Joey, ...</div><div _="@=1243,dis=none"></div></div>
