TERRA APPAREL
A responsive e-commerce website
SUMMARY
I designed the complete branding for Terra and created an entirely new responsive e-commerce website.
Note: This is a conceptual project.
PROBLEM STATEMENT
Terra is a Toronto-based slow fashion brand offering high-quality artisan pieces for women, made using sustainable materials and ethical production methods.
Terra has experienced success in its brick and mortar store and wants to expand its customer base beyond Toronto by increasing its online presence. To compete with a multitude of sustainable fashion brands with an existing online presence, Terra wishes to undergo a complete rebranding and launch an online store for the first time.
ROLE
UX/UI designer, researcher
TOOLS
Figma
Adobe Illustrator
Optimal Sort
Zeplin
TIME
8 weeks (10 hours / week)
Design Process
1. Empathize
MARKET RESEARCH
How are consumers' attitudes towards clothes shopping changing?
The industry, which has long been criticized for its socially & environmentally damaging impacts on the world, has driven consumers to increasingly buy sustainable products that are made to last longer. Most importantly, consumers want to shop from brands that align with their values.
✔︎ The audit shed light on some best practices:
- A well-defined, unique brand voice and aesthetic.
- Aspirational, editorial style photographs with models of all ages, sizes & ethnicity.
- A clear indication of the environmental impact on each product.
✗ I also identified areas where competitors were lacking:
- Brands don't hit hard enough on the sustainability message & it goes unnoticed by consumers.
- Company mission & philosophy pages tend to be text-heavy and difficult to digest.
1-ON-1 INTERVIEWS
What are consumers' expectations & frustrations in their shopping experience?
I interviewed 3 people between the ages 27-35, all of whom shop from sustainable brands online. They were asked questions to understand consumer behaviour (both in-store & online), their preferences and frustrations.
Interviewees divided into those who identify themselves as a practical shopper & impulse buyer; however, they agreed on the following takeaways.
RESEARCH SUMMARY:
Sustainable shoppers hold their purchases at a high standard and shop from brands that reciprocate their respect through thoughtful details such as good customer service, thorough descriptions & diverse representation.
USER PERSONA
What does a Terra shopper look like?
Using the knowledge that I gathered from research, I created a persona representing a Terra customer.
EMPATHY MAP
How does our persona perceive the shopping experience?
I delved deeper into Emma's mindset with a brainstorm to better understand her perception & outlook.
SYNTHESIS SUMMARY:
✔︎ Emma, a Terra user, is a conscious shopper who makes careful decisions about her purchases as she does with everything else in life.
✔︎ Emma wants her clothes to reflect her personality as well as her beliefs and values.
2. Define
Organizing content to create an intuitive shopping experience
CARD SORTING
What are the item categories that make the most sense to users?
I conducted the exercise with 6 participants using OptimalSort. 30 cards were used, each with an item of clothing on it.
The majority of the participants grouped items into large categories of clothing, mainly: tops, bottoms, dresses & outerwear - while some grouped items by occasion or activity.
This informed my decision to categorize Terra's products into said large categories (Ex. bottoms) which then leads into sub-categories (Ex. trousers, shorts, skirt, etc.) to allow consumers to easily locate an item.
SITE MAP
What is the optimal way to structure the website's content?
Taking my learnings from the card sorting exercise, I created a site map to visualize the structure of content within the site.
TASK FLOW
Defining the users' linear path
Keeping my site map in mind, I created a task flow to visualize the user's steps to accomplish the main task on the site; to purchase an item of clothing.
USER FLOW
What are all the possible paths that users may take on the site?
Based on my task flow, I then visualized the user's complete journey - with decision points - to purchase an item of clothing on the website so I can anticipate user needs.
3. Design
Defining the whole new Terra brand
LOGO
Creating the first impression
I began by sketching logo ideas with Terra's definition in mind; earth, land, and the goddess of Earth (Roman mythology) - a fitting name for a sustainable brand. I then vectorized them in Adobe Illustrator.
The final logo was chosen based on its simplicity & scalability. The logo captures the sun setting into the horizon.
UI KIT
Nailing down the details
To appeal to our persona, Terra's brand was designed with a sense of sophistication, cleanliness and integrity, and drew inspiration from organic beauty.
LO-FI WIREFRAME
Determining the most effective layout
I first brainstormed the layout by sketching with pen and paper. I then digitized the design on Figma and created lo-fi wireframes for desktop, tablet & mobile sizes.
As a culmination of the research & information architecture exercises that were done to this point, the following things were kept in mind:
- Emphasis on the brand's sustainability practices to stand out amongst the competitors.
- Hierarchy of information/content as determined by card sorting & site map.
- Ease of navigation at any point in the consumer journey, as illustrated in the user flow.
HI-FI WIREFRAME
Bringing the design to life
The lo-fi wireframes were brought to life by applying the newly-established brand identity and UI components.
4. Testing and iteration
PROTOTYPE
Simulating the user experience
I created a prototype within Figma and added functionality to allow users to complete the following tasks during usability testing:
- Find an item & add to Shopping Cart (as shown in a demonstration below)
- Add an item to Wish List
- Identify areas on the site with a sustainability message
USABILITY TESTING
Getting first-hand feedback
Usability testing was conducted with 3 participants - all of whom are online shoppers - to determine if users can successfully navigate through the site with ease & identify any pain points in their experience.
- 100% completion rate
- 100% error-free rate
- Average time to complete task: under 1 minute
DESIGN REVISIONS
An endless pursuit to make a better product
I made the following changes based on the feedback given during the usability testing.
Final product
Say hello!
Let's have a conversation at ileneshioguchi@gmail.com or on LinkedIn.
© 2021 Ilene Shioguchi