Existing Website
E-Commerce Integration
Davis Squared E-Commerce Site
Davis Squared is a quirky, alternative, modern gift store located in Davis Square, Somerville, MA. They carry a wide variety of unique, maker-crafted merchandise and the store is arranged with purposeful juxtapositions, to encourage customers to circulate and discover new items. The business has a very loyal, local customer base, and needed a way to expand their clientele by adding an online shopping component to their existing website. I designed an e-commerce solution to mirror the in-store shopping experience, that would work for customers who are shopping for gifts, or for themselves.
Project Type
Hypothetical Design
Individual Work
Tools
Axure, Pencil & Paper, Google Forms, Optimal Workshop
Timeline
2 Weeks, 2019
What I Did
Business Research
Contextual Inquiry
User Research (Interviews, Survey)
Competitive Analysis & Heuristic Evaluation
Information Architecture (Card Sorting)
Site Mapping & User Flows
Ideation & Sketching
Wireframing
Prototyping
Usability Testing and Iteration
Defining the Problem & Measuring Success
The Problem
The specialty gift store Davis Squared does not have e-commerce capability and needs a design for an e-commerce platform that can be integrated into their existing website, so that shoppers are able to purchase their products online and they can grow their customer base.
Hypothesis / Solution
By seamlessly integrating an e-commerce platform designed to mimic the Davis Squared in-store shopping experience of fun, curiosity-based product discovery, I will infuse the same level of excitement and spark of joy into the online shopping experience, so that shoppers will purchase their products online.
Benchmarking Criteria
We will know this to be true when we see that Davis Squared begins to receive revenue from e-commerce sales via their website. This is a hypothetical design, but if it were a client project, I would use Google Analytics to track site traffic, clickstreams, and rates of successful purchases related to website visits. This would be cross-referenced with business revenue pre- and post e-commerce platform add-on to gauge how sales have increased, or whether in-store sales have moved online.
Plotting a Path: Research-Informed Design
My Process
I started by considering the overall context: Davis Squared as a business, current and potential customers, online and in-store shoppers, all parties’ goals/needs/requirements, challenges and constraints. Next I created a Research Plan to capture research goals, help me select the appropriate methods to achieve them, and keep track of the protocol and details for each type of research. From there, my process included the following:
Ideation
Concept
& Features
Research
Business
& User
Final Prototype
Ideation
Concept
& Features
Site Map &
User Flows
Ideation Hand Sketching
Wireframing Layout Refinement
Usability Testing & Iteration
Synthesis
& Analysis
Research & Discovery
Research Goals
Research Methods
-
Gain insights into why and how people shop at online and brick & mortar stores for unique merchandise and quirky gifts.
-
How do shoppers’ processes vary when shopping for themselves vs. for gifts?
-
What are shopper attitudes around add-ons to purchases? (i.e. wrapping, gift cards, shipping)
-
Identify online shopping pain points
-
Understand how shoppers categorize (language and order) the types of merchandise available for purchase at Davis Squared
-
Understand the business (ethos, brand, in-store experience, customers)
-
Contextual Inquiry: Observe shoppers in store to see how navigate and note store layout and arrangement of merchandise and types of items.
-
Research on Davis Squared history, ownership, brand, customers, and local presence.
-
Screener / Survey sent out via Slack and Facebook
-
Interviews: In-person with 4 screened participants
-
Card Sorting via Optimal Workshop:
-
Open Card Sorting: 5 participants
-
Closed Card Sorting: 7 participants
-
-
Competitive Analysis & Heuristic Evaluation: Joie de Vivre, Newbury Comics, Olives & Grace, and Uncommon Goods e-commerce websites
Target Audience / Ideal Study Participants
-
People who shop online for unique gifts
-
People who currently shop at Davis Squared
-
Shoppers who like to purchase quirky and/or unique gifts or items for themselves
-
Shoppers who like items crafted by local makers
-
Ideally people between the ages of 18 and 55
Contextual Inquiry
I visited the store to document the layout and types of merchandise, as well as observe the customers' in-store shopping experience.
Key Findings
-
Store is arranged with purposeful merchandise juxtapositions to foster exploration / discovery
-
There are clusters of certain types of items
-
Most customers spend time browsing, rather than coming in for a specific item
-
Store encourages customers to look for items by type, and by underlying themes:
-
Local - Somerville, Boston, MBTA
-
Political (left-leaning/progressive)
-
Feminism / Female Empowerment
-
Baby/Kid
-
Foodie
-
Cocktail Enthusiast
-
Vintage
-
Artsy/Creative
-
Modern Design
-
Local Makers / Craftsmen
-
Davis Squared Business Research
I researched the history, ownership, ethos, brand, customers, and reviewed their existing website.
Key Findings
-
Small, independently owned, husband and wife team
-
Brand - Modern, but with a nod to vintage/alternative style - tagline: “Fun. Modern. Gifts”
-
Focus on the merchandise - highly curated, hand-picked by co-owner
-
Existing website very simple:
-
Basic color palette - black, white, red, gray
-
Focus on color in images of products & mascot
-
-
Store has strong links to Davis Square community
-
Long-time, loyal, local shoppers
-
Neighborhood / local pride a large part of brand
-
Supports local makers
-
"Great stuff, great staff. I walked in, not knowing if I could find a gift for my hard-to-please niece... but they had so many cool things that the experience ended up being real nice. Fun actually.... You guys are the best!" - Quote from customer (via Davis Squared Facebook page)
Screener / Survey / Consent Form
Used to screen study participants, learn basic shopping habits, and to get competitor store names for competitive analysis. 24 people with varying backgrounds, ages, and locations completed the survey.
Key Findings
-
Customer reviews are highly important in making online shopping decisions
-
People enjoy discovering unique products
-
Supporting local artists/makers is valued
-
At boutique or specialty stores such as Davis Squared, most people shop for both themselves and others
54.2%
12.5%
29.2%
4.1%
When Shopping at online stores for unique gifts, who are you shopping for?
Yourself
Gifts for others
Both yourself and others
Not applicable
Interviews
I conducted In-person interviews of 4 screened participants.
Key Findings
Processes differ greatly when shopping for themselves vs. gift shopping. Shoppers have two sets of needs (Use Cases):
-
Gift Shopping: for specific item, or type/theme
-
Willing to spend more money, often set budget
-
Quality highly important
-
-
Self shopping: more likely to browse
-
Doesn’t go in with idea of specific thing - wants to explore
-
Usually not a set budget
-
Commonalities of Both Use Cases
Habits & Shopper Traits
-
Cost is a large factor in purchasing decision
-
Big supporters of small, local businesses & women-owned businesses
-
Find joy in discovering new, well-crafted items
-
Quality of objects & reviews important
-
More likely to purchase local, crafted maker items as gifts
-
Sometimes use website as online catalog - will go into store to purchase/pick-up
Pain Points
-
Too much choice with online shopping (overwhelm, time sink)
-
Lack of efficient search options / filters - Ability to search by categories relevant to item
-
Assessing quality of items difficult
-
Having to create an account to order
-
Inability to customize card
-
Lack of alternate payment options (PayPal, etc.)
Card Sorting
Two rounds of card sorting with screened participants via Optimal Workshop.
Open Card Sorting
-
5 participants
-
118 merchandise cards
-
63 categories
-
9 categories median
Open Card Sorts provided inconsistent results, due to the wide variety of merchandise. I built off of broad grouping themes and common naming patterns to develop the following closed card sort categories:
-
Bath & Personal Care
-
Books & Toys
-
Clothes & Accessories
-
Food & Drink
-
Home & Decor
-
Paper Goods & Art Supplies
-
Party
Closed Card Sorting
-
7 participants
-
118 merchandise cards
-
7 Categories - all cards placed
Feedback from participants exit interviews:
-
Confused by “Home & Decor” vs. “Food & Drink” categories - not sure what falls under kitchen/home and what is food/drink
-
Kitchen should be a main category, or subcategory of Home
-
Cocktail items could fall under Food & Drink, or Kitchen/Home - need to clarify
Based on the positive results of the closed card sort and the exit interview feedback, I created the e-commerce taxonomy and groupings.
Competitive Analysis
Based on my research results and outstanding design questions, I developed the Competitive Analysis criteria. I selected boutiques and larger stores who carry a wide variety of similarly difficult to classify items, as well as stores with a local or maker-crafted items focus.
Key Findings
-
Home and Kitchen items or Kitchen and Bar items tend to be grouped, but use sub-categories
-
Sites with varied merchandise allow multiple ways to find same item - themes as well as item type
-
Breadcrumbs highly helpful - need to understand where are/have been when browsing
-
Browsing is more helpful when specifically focused on type or them of merchandise
-
Local stores have online purchase with in-store pickup options
Heuristic Evaluation
I used Jakob Nielsen's 10 Usability Heuristics for User Interface Design to evaluate the competition stores' e-commerce websites and gauge what is most successful for users.
Key Findings / How Useful
-
Joie de Vivre's site failings were helpful as a guideline for what to avoid, and what is essential
-
I used the other 3 sites as reference tools to compare/contrast different yet successful ways of addressing relevant issues to Davis Squared
Synthesis & Analysis
Key Insights & Path Forward
I combined the key research takeaways into one file, organized by type of research. Then I reviewed and compared all findings, and distilled them down into these key insights.
Aha Moment! Multiple Use Cases & Real World / Digital Disconnect
-
Brand / business model:
-
Store arranged with purposeful merchandise juxtapositions to foster tactile exploration / discovery of items - conflicts with online shopping, need to address in design
-
Merchandise falls under overlapping categories - items by type and theme
-
-
All shoppers have similarities - needs / process varies
-
Design for two use cases with differing needs:
-
Gift Shopping: for specific item, or type/theme (willing to spend more money, often set budget or price range)
-
Self shopping: more likely to browse - Doesn’t go in with idea of specific thing (wants to explore and discover items for fun)
-
-
Design for commonalities across use cases:
-
Customer reviews important - need ability to assess quality
-
Cost is prohibitive factor - need a way to find by price
-
Supporting local artists / makers important
-
Customized gift card and wrapping options important
-
Strong preference for alternate payment and pickup / delivery options
-
Path Forward
-
E-commerce solution must mimic the in-store shopping experience; quirky, fun, curiosity-based process of discovering new products and gifts that bring excitement and spark joy
-
Provide multiple ways of finding the same item:
-
Explore section with merchandise organized by themes
-
Merchandise Categories organized by type of item
-
Ability to browse all items, or browse within categories
-
Options for sorting products by price or rating
-
-
Breadcrumbs for shopping and during checkout
-
Make ratings prominent and provide reviews
-
Highlight local artists / makers and provide access to bios
-
Provide in-store pickup (for loyal local shoppers), custom gift card and wrapping options
-
Ability to discover related products
-
Check out as guest and PayPal / G Pay Options
Site Mapping & User Flows
Site Map & Information Architecture
The new e-commerce information architecture is based on card sorting results, exit interviews, and my comparison of relevant competitor websites (Uncommon Goods and Newbury Comics).
-
Inserted E-commerce nav on home page, as secondary nav to location pages for easy access
-
7 primary categories to prevent user overwhelm
-
Subcategories to simplify search process
-
Merchandise categories by both type and theme
-
Multiple ways of finding the same item - to address both use case needs / search methods
-
Explore category is prominently placed in between the two primary nav links as central focus
Existing Information Architecture
E-commerce Add-on
User Flows
Created user journey task list and 3 user flow diagrams to help inform screen flows and layout.
-
Find Item (Whiskey Sour Mix)
-
Find Item (Prince Coffee Mug)
-
Checkout Process (as guest)
User Flow 1
User Flow 2
User Flow 3
Ideation & Design
Initial Concept Sketches: Developing Navigation, Layout & Screen Flows
I sketched a few different options for layout and worked through feature options.
Wireframing & Iterations
I produced two iterations of the wireframes and prototype in Axure, and created a Usability Testing Plan to address remaining questions (IA, sorting, checkout) and see how people search for items under each use case, then conducted usability testing for both iterations.
Iteration 1
-
Included flyout menus and clickable main nav sections that take shopper to page with all subsections as clickable images.
-
Added two sections to the footer: "About Us" and "Customer Support"
-
Show rating with merchandise, and allow for multiple ways of sorting results
Usability Testing Results & Version 2 Changes
-
Clickable main nav redundant, removed from V2
-
Footer well received, no changes
-
Taxonomy of flyout menus confusing, changes for V2:
-
Bath & Personal Care - “Gadgets” changed to “Grooming Tools”
-
Explore - “Local Pride” theme changed to “Boston Local”
-
Explore - “Shop By Price” redundant, removed in V2
-
Explore - wanted ability to see all items, added “Browse All” in V2
-
-
Find both methods of sorting (range and low to high) and best sellers / new items useful, keep both
Iteration 2
-
Focus on item pages, shopping bag and checkout process
-
Local artists/makers highlight included as option with layering of links/info
-
Breadcrumbs for item discovery path and nav options from within item page
-
Ability to find related merchandise without being bombarded on item page
Usability Testing Results & Version 3 Changes
-
“Continue Shopping” and Last/Next arrows on item page unclear - remove and update item page nav in V3
-
“Take A Look at This! You Might Also Like” on item page doesn’t read as link - fix in V3
-
Missed link to Maker/Company Bio - should be more visible, update to button and separate from description text in V3
-
“Free Shipping Status” bar label confusing - change text in V3
-
Checkout “Gift Options” unclear - update text & add clarity to options (gift receipt, etc.) in V3
-
Payment - name on card goes first
-
Simplify checkout - don’t need review / confirm button - consolidate in V3
-
Want checkout confirmation - add a page with link to check on order status in V3
Checkout Process
Latest Prototype & Next Steps
Prototype
Iteration 3 of the wireframes, incorporating outlined changes.
Next Steps
-
Do more usability testing to confirm latest changes, focus on:
-
Checkout, shopping bag, maker highlights and related items
-
-
Shopping Bag / Checkout - test to see if need to add global nav to pages
-
Reorder flyout menus, to counteract serial position effect
-
Expand on gift options in checkout - either pop-up or flyout, so can select details of wrapping, gift receipt, etc.
-
Further simplify checkout, based on testing results (change the way edit entered info)
-
Provide ability to see other items made by local makers