Timeline

2-Week Solo Sprint, 2022

My Role

UX Generalist: User Research, Usability Testing, UI Design

Tools

Figma
Dovetail
Maze
Optimal Workshop



The Solution





I created a new e-commerce site that prioritizes clear photos, visible product information, and user flows that follow typical e-commerce standards
By doing that, users will have a more familiar experience, thus reducing frustration and distrust.




The challenge


    Sunset Bazaar is a mid-century modern furniture store in Los Angeles
    that sells vintage and vintage-inpsired furniture. This project was a
    spec concept redesign for a local business’ e-commerce website.



(Above) Sunset Bazaar’s current website




UNDERSTANDING THE USER


    I interviewed four adults who enjoy shopping for furniture:

 
“I put [the bed frame] together by myself and I had to ... my bedroom's really small, it's basically the size of my bed with like a little bit of walking space on the three sides. Getting the mattress out, getting the old bed frame taken apart, hauling these giant pieces of old wood in;
Trying to assemble them cause there's a headboard, a footboard and two side rails and get it all put together by myself. And then dragging the box spring back into the room and seeing that it didn't fit

I was ready to cry



Through four user interviews, I discovered some common themes:


  • Users want to stay in their budget
  • Proximity is a priority
  • Proximity & affordability are hard to come by
  • Users like to browse furniture online for fun
  • Incorrect product details created problems at home
  • Miscommunication with customer service caused major delivery delays
  • Bad photos are misleading; leading to buyer remorse




Testing, Testing... is this thing on?


    I ran moderated Usability Tests with all four interviewees



(Above): One example of a category page with missing content. Navigation on the top and bottom confused all 4 users. To get to a shopping page, users need to click “More.”


• Pages with missing content confused users

    “Almost looks like it didn’t load”


• 100% users didn’t like global navigation at the bottom; especially after opening a page, navigation was also on top

• Only 25% of users found the shopping tab by hovering over “More” (as seen in screenshot above)

I’m so confused, and angry actually




(Left) Product Page: Unreadable text; type matches the background. (Right) Users can’t complete a purchase


“It makes me feel like the brand is junky, cheap”

“I bet they don’t like it either”


Users don’t trust the store, nor the owner. As a customer, would you want to shop at a store with multiple issues? One issue, maybe. Two is pushing it. But consistent issues? That’s not good for any business.




What’s Familiar?


    If users felt confused, angry, & don’t trust this store,
    what’s familiar in e-commerce? What’s the standard that
    other sites use?

I compared Sunset Bazaar’s website with three local furniture stores that also sell mid-century furniture:

• Den LA • Sunbeam Vintage • West Coast Modern



• All 3 sites have global navigation at the top
• All 3 sites have call-to-action buttons
• Listing pages either have 3 or 4 products per row
    (vs. Sunset’s 1 product with 4 images per row)
• Product titles & prices are clear
• Product pages have clear photos, visible text & relevant details




What’s your Problem?


    Now that I understand the User’s needs, goals, & pain points,
    how can I draw upon that to create a solution?


Meet Joan.

Joan is an urban professional who likes to shop local & browses for furniture online for fun.

She wants clear photos & accurate product details, because not having that created major problems at home, like shipping delays & buyer remorse.




How might we present photos, product, & store information in a clear, accurate, and visible way?




RE-Mapping the Navigation


    How can I reconfigure the site’s navigation & information architecture,
    creating an easier way for users to find products?


Sunset Bazaar only has 10 different types of furniture; I reorganized them into three categories:

• Seating
• Storage & Organization
• Tables & Desks

With the re-sorted navigation, I created a Tree Test with Optimal Workshop to analyze the new architecture:



Overall Findings?

• All four of my tasks got a minimum 90% completion rate (whether direct or indirect).
• The most difficult (#2) was due to people unsure if store hours were under Info or Contact
• Since the store only has 10 different types of furniture, putting them into 3 clear categories makes it easier to find

Redesigning the menu with a clear navigation is already starting to improve the site’s usability, increasing the users’ confidence and trust in the store.




Let’s set the mood


   I drew inspiration from other forms of art 
    made in California during the mid-20th century.


(Clockwise from top left:) Door & door detail, David Hockney’s home (Architectural Digest), Joel Meyerowitz, Joel Meyerowitz
(Clockwise from top left:) Saguaro Palm Springs, color palette, Tuscon Inn, William Eggleston, Simply Wholesome Foods, Palm Springs City Hall, Streamline Modern home in Santa Cruz




what’s your (proto)type?


    After compiling this research, defining problem statements,
    & coming up with a solution, I created the mid-fi prototype


(Above) Home Page with annotations of design decisions based on user research


• Simple global navigation on the top followed e-commerce standards, creating a sense of familiarity for users

• Pages without missing content, visible text that doesn’t match the background



(Above) Category Page with annotations of design decisions based on user research

• Users want photos that are clear
• Users need relevant product information (e.g. dimensions & price)




will this be on the Test?


    I used Maze to run unmoderated usability tests with 7 users
    on my mid-fi prototype to help inform the final design


Mission: “You’ve decided to buy the bookcase. Could you please buy the item?






Unfortunately, the way I designed my “Product was added to cart” pop-up, the buttons were too low in Maze’s testing system.
Users could not see the View Cart button, nor scroll down to find it.

“One pop-up was slightly cut-off from the screen,
so it was a bit hard to hit the button to progress forward.”



I designed the popup to be the same height as the page (1024px). 
I knew for my final design, I needed to make the popup shorter, and move the buttons up to be visible for smaller monitors.


Some more feedback I recieved was to move the shopping cart to the top right (vs top left), as that’s more standard to them.

“I'm also typically used to the cart being on the top right.”



On the positive side, users felt like the site was much easier to navigate, simple to use and well organized.

“The site seems well organized, I like the colorful check-out window.”

“Everything was easy to find and very clear.”





It’s time to work


    After taking the usability test findings, adding images,
    & product info, here is the final prototype






Moving forward


    What steps will I take to create a Minimum Viable Product?
    What did I learn and how will I apply it in the future?


• Developing a search function, keywords
• Adding a favorite/like feature
• Creating an Instagram icon
   • Many secondhand local stores use instagram for their online sales
• Add a “remove from cart” feature

• I need to keep improving my interview questions so I can gain deeper user insight, pain points, & motivations
• Get more quantitative & operationalized data
• Learn more about accessibility and begin to implement it from the start of every project
• Ideate more