Canvas & Co

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.

Users & Audience

Those who purchase clothing for themselves or others online.

Process Overview

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

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:

E-commerce retail sales accounted for 9.65% of total retail sales in 20181, with predictions for online sales to nearly triple by 20252

Competitor: H&M
  • Strengths
  • Clean UI
  • Consistent Brand Photography
  • Offers Sustainable Styles
  • Weaknesses
  • Overwhelming categories
  • Inconsistent filters depending on selected category
  • Unclear navigation
Competitor: ASOS
  • Strengths
  • Easy to follow categories
  • Extensive filtering
  • Sales and discounts available
  • Weaknesses
  • Lacks homepage CTAs
  • Low resolution thumbnails
Competitor: 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. Participants were 75% female and 25% 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. Participants were 77.8% female and 22.2% 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:
Gabby Avila

“I follow bloggers on social media and that’s where I get a lot of my style influences from. It can be tough shopping on budget so I’m always keeping an eye out for deals, sales, or promo codes”

Persona Bio: Gabby is a content producer at a trendy NYC cosmetics startup. She works closely with the social media editor to create content for the brand’s social channels as well as their website. She has aspirations to one day run her own social media team. Gabby loves living and working in NYC, and has grown accustomed to the fast paced ever-changing energy of the city.

Gabby is always on the hunt for new fashion trends to wear to work and social events, as well as comfortable casual clothing. She follows bloggers on instagram, and if it’s within her budget, she will purchase the items they recommend, but usually considers these items “splurge” items. Gabby cares about affordability and looks for things like free shipping, deals, and promo codes to stay up to date on trends and replenish her wardrobe often, without breaking the bank.

Outside of work Gabby enjoys DIY home decor projects, reading, and spending time with friends exploring the city and trying the new trendy food spot.

Age: 26 Occupation: Content Producer Location: NYC Archetype: The Creator
Goals & Needs:
  • Follow latest trends while staying on budget
  • Shop from anywhere
  • Lack of inventory

Frustrations & Fears:
  • Clothing not fitting right
  • Dealing with returns
  • Fast and/or free shipping

Associated Brands:
  • Urban Outfitters
  • H&M
  • Lulus
  • Instagram
Motivations:
  • Trends
  • Cost
  • Convenience
  • Social

Tech Knowledge:
  • IT & Internet
  • Software
  • Mobile Apps
  • Social Networks

Personality:
  • ExtrovertIntrovert
  • SensingIntuition
  • ThinkingFeeling
  • JudgingPerceiving
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
Storyboard:
Storyboard Scene: Drawing of a girl day dreaming about a tropical island while wearing winter clothes

Gabby has an upcoming tropical vacation planned, but since it’s winter in NYC, it’s been difficult to find spring and summer clothing for her vacation in stores.

Storyboard Scene: Drawing of an assortment of clothing

Gabby needs a variety of clothing for her vacation from swimwear to casual ware, but also needs to stay within budget. She would prefer to purchase all of her items from one retailer so she doesn’t have to pay for multiple shipments.

Storyboard Scene: Drawing of a girl in clothes that don't fit

Although Gabby knows online shops might have better inventory this time of year, past experiences ordering items online have not turned out well — finding the right fit is difficult for her. She’s frustrated with the thought that if she does order an item and it doesn’t fit, she may not have the time to deal with returns or exchanges.

Storyboard Scene: Drawing of Canvas & Co social media feed

While on her lunch break one day, Gabby is scrolling through social media and sees an ad for Canvas & Co. The ad features models of all shapes and sizes wearing a variety of clothing including swimwear. The variety of sizes she sees peaks her interest, and makes her think maybe Mirror’s clothes will fit her well.

Storyboard Scene: Drawing of Canvas & Co website homepage

When Gabby returns from work, she decides to visit the Canvas & Co website. She is delighted to see that mirror has a large variety of affordable clothing, filtering for different occasions, as well detailed product descriptions and fit guides.

Storyboard Scene: Drawing of fit guide feature

Gabby finds multiple items that she likes and begins reading the user reviews. She finds it extremely helpful that some user reviews actually include height, weight, size ordered, and a slider that shows how the user rated the fit.

Storyboard Scene: Drawing of 10% off coupon

While browsing, Gabby is shown a popup for 10% off the first order. Gabby’s order also qualifies for free shipping. The checkout process is easy, and she receives an order confirmation immediately after purchase.

Storyboard Scene: Drawing of a girl wearing clothing that fits

Gabby receives e-mail communication from Canvas & Co about package updates over the next few days. Gabby’s shipment arrives quickly, and she is delighted to find that all items fit the way she expected.

Site Map:
Site map
Task Flow:
User task flow
User Flow:
User task 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.

Responsive Wireframes:
Hover over the device to view the design
Home wireframe
Macbook Pro Macbook Pro
Home tablet wireframe
iPad iPad
Home mobile wireframe
iPhone iPhone
Brand & Identity:
Canvas & Co Style Tile
Style Guide/UI Kit:
Canvas & Co Style Tile
UI Design:
Hover over the device to view the design
Home page UI design
Macbook Pro Macbook Pro
Category page UI design
Macbook Pro Macbook Pro
Product page UI design
Macbook Pro Macbook Pro
/ / / / / / / / / /
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:
Canvas & Co 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.