please rotate your device for the best experience.

case study

Canvas & Co

Designing a refreshing e-commerce brand.

Role: Product Designer

Background

Canvas & Co is a global chain brick-and-mortar retail clothing store. Canvas & Co provides “clothing for everyone”, with many different styles including casual, formal, business, and sport style for men, women, and children. Canvas & Co wishes to bring their business online with a new e-commerce website that is fresh, modern, and fully responsive featuring a newly designed logo.

Audience & Users

Those who purchase clothing for themselves or others online.

Process Overview

  • Research
  • Competitive Analysis
  • User Interviews
  • User Surveys
  • Define
  • User Persona
  • Empathy Map
  • Storyboard
  • Sitemap
  • Task Flow
  • User Flow
  • Design
  • Responsive Wireframes
  • Brand & Identity
  • Style Guide
  • UI Design
  • Test
  • High Fidelity Prototype
  • Usability Testing
  • Affinity Map
  • Priority Revisions

Conducting Research

Competitive Analysis, User Interviews, User Surveys

TIMELINE: TWO WEEKS

In depth research was conducted by first looking at the overall landscape of the e-commerce industry. Trends and predictions relevant to the industry were also analyzed, as well as direct and indirect competitors.

Individual interviews with users that had recently purchased from an e-commerce store were conducted. User surveys were conducted to reach a broader group that matched the same criteria. Each user was prescreened to those that had made an online purchase in the past 7 days at one of these retailers: H&M, ASOS, Old Navy, GAP or similar retailers.

Competitive Analysis Findings

  • H&M
    • Strengths
    • Clean UI
    • Consistent Brand Photography
    • Offers Sustainable Styles
    • Weaknesses
    • Overwhelming categories
    • Inconsistent filters depending on selected category
    • Unclear navigation
  • Asos
    • Strengths
    • Easy to follow categories
    • Extensive filtering
    • Sales and discounts available
    • Weaknesses
    • Lacks homepage CTAs
    • Low resolution thumbnails
  • Gap
    • Strengths
    • Consistent category navigation
    • Clean grid layout
    • Extensive product detail
    • Weaknesses
    • Low resolution thumbnails
    • Lacks main category landing pages
    • Unclear homepage categories

User Interview Findings

Each interview was insightful and some offered information that would be helpful in the overall research process. 75% of participants identified as female and 25% identified as male between the ages of 30 – 59.

  • Pain Points
  • Slow shipping
  • Inaccurate inventory
  • Inaccurate delivery dates
  • Unexpected cart behaviors
  • No petite options
  • Inaccurate sizing guides
  • Delights
  • Personalization/Recommendations
  • Brand engagement/Social engagement
  • Fast shipping
  • Built in shipping cost
  • Transparent order updates
  • Sales/Deals
  • Right fit
  • Affordable pricing
  • Informative reviews
  • Convenience

User Survey Findings

A 15 question survey was conducted and we received responses from 9 participants. 77.8% of participants identified as female and 22.2% identified as male between the ages of 24 – 35.

  • Unsure of fit
  • Unsure of quality
  • Shipping costs
  • Hassle of returns
  • Discrepancies between in store and online return policies
  • Unclear or unavailable tracking options
  • No reviews
  • Delights
  • Ease of checkout
  • Detailed product descriptions
  • Sales/Deals
  • Extensive filtering
  • Informative reviews
  • Convenience
  • Fast/Free shipping

Define

User Persona, Empathy Map, Storyboard, Site Map, Task Flow, User Flow

TIMELINE: THREE WEEKS

After research was conducted, we moved into synthesizing our findings. A user persona, empathy map, and storyboard were created to help tell the user’s story.

The user persona was created based on the user interviews and surveys that were conducted. Our objective was to explore a persona that would best represent a typical shopper at an e-commerce store such as Canvas&Co. The information heard and key findings from our interviews and surveys was used to craft our persona.

The empathy map further explored our persona’s thoughts, feelings, actions, pains, and gains. We used direct quotes gathered from the interviews, and noted actions that our users described to us as typical behavior while shopping online.

The storyboard was created to bring our persona to life and help tell her story of how and why she would use the product.

After storyboarding, we utilized the card sorting method to establish a sitemap for our Information Architecture.

Our task flow was crafted to establish a baseline of the most basic action of purchasing a shirt.

The user flow was a more in depth process to establish how a user would accomplish the task of purchasing a shirt on the website. This process also helped further validate our sitemap.

User Persona

UX User Persona

Empathy Map

  • Hearing
  • “I particularly liked their recommendation”
  • E-mail campaigns with new product drops
  • Product reviews
  • Sale announcements
  • Thinking & Feeling
  • How much do I need to spend to get free shipping?
  • What’s their return policy?
  • “I hate that a lot of stores don’t have petite clothing”
  • I wonder if they have any promo codes?
  • This is really similar to that blouse I saw on IG
  • This is the perfect outfit for my upcoming event.
  • Seeing
  • Social media posts
  • Coworker’s outfits
  • Ads during commute
  • Doing
  • Browsing the “Shop” category on instagram
  • Clicking the “sale” tab
  • Check fashion blogs
  • Checking “new arrivals”
  • Browsing multiple online stores, price comparing
  • Sort price low to high
  • Checking return and shipping policies
  • Pains
  • No user reviews
  • High minimum spend for free shipping
  • “The sizing was completely off”
  • Low variety of inventory/out of stock
  • Gains
  • Shop online anytime
  • Shop the latest trends
  • Shop within budget, buy affordable clothes
  • Share purchases socially
  • Free shipping, easy returns

Storyboarding

UX Design Storyboarding

Site Map

UX Site Map

Task Flow

UX Task Flow

User Flow

UX User Flow

Design

Responsive Wireframes, Brand & Identity, Style Guide, UI Design

TIMELINE: TWO WEEKS

Next, we moved into interaction design. Based off of our sitemap and established flows, responsive wireframes were created in desktop, tablet, and mobile sizes. Prototypes were built on Invision to help map out the user checkout flow, as well as provide a starting point for our usability testing.

After wire-framing and prototyping we moved into branding and identity. This included logo design, typography choice, photography style, and color palette.

The key adjectives established for the Canvas&Co brand: Modern, Neutral, Fresh, Clean, Casual, Comfortable, Stylish, Versatile, and Youthful.

The logo design process underwent multiple iterations before finalizing a modern casual sans serif look and feel.

The color palette created reflected a Neutral taste, while still having many Versatile options for promotional materials, ad campaigns, and landing pages.

Photography selection was our most important branding and identity component to portray the overall style of the brand. Mood boards were created to help capture the Youthful, Casual, and Comfortable choice of imagery, as well as direct the overall UI design.

Wireframes

UI Design

UI Kit

UX Design UI Kit

Test

High Fidelity Prototype, Usability Testing, Affinity Map, Priority Revisions

TIMELINE: ONE WEEK

A high fidelity prototype was built on Invision using our UI design. We conducted usability testing in person as well as remote via Skype and screen share.

Some of the findings from our usability testing indicated that the check out experience was a bit confusing to users. Another common finding was that some of the features our testers wanted to use, such as the sizing chart and quantity drop down, were not yet available within the prototype. We created an affinity map to help us prioritize future iterations and revisions.

Affinity Map

Final Thoughts

Reflection, Next Steps, Lessons Learned

Working on the Canvas&Co project was an enlightening and valuable opportunity to learn more about user experience and how to approach a problem with design thinking.

One of the aspects I found challenging working on this project was synthesizing the competitive research, user interviews, and user surveys into a coherent architecture for the site. This took a few iterations to understand the best structure for the users checkout flow.

After UI design we moved into high fidelity user testing, where our users were able to identify some areas that needed further design iterations. These areas were given priority, and were iterated on before final red lining and handoff.

A valuable takeaway I’ve learned from this project that I would like to implement in future projects is to dedicate more time to user interviews as well as usability test, and to consider crafting more user personas per project.