Work Smart Enjoy Life

A re-design for Work Smart Enjoy Life, an e-commerce website that sells diaper bags made for dads.

Overview

Task

Improve Work Smart Enjoy Life's e-commerce website.

Time

3 weeks

Team

Joanna Choi

Nelson Diaz

Sam Gosling

Tools

Adobe XD

Miro

G Suite

Problem

E-commerce sites for baby items often lack important product information that parents need. How might we organize WSEL's product information so users can easily locate and understand key product information?

Process

Research

Screener Survey
User Interviews
Heuristic Evaluation

Synthesis

Affinity Mapping
Persona
Journey Map
Problem Statement

Design

Design Studio
Mid-Fi Prototyping
Wireframing
Usability Tests

Deliver

High-Fi Prototyping
Wireframing
Usability Tests
High-Fi Refinements

Key Insights

What we heard from users

We conducted user interviews with 10 participants, 5 moms and 5 dads, all of whom were recent parents and had at least one child under the age of 5. We noticed major behavioral differences between moms and dads when shopping for baby products. As a result, we broke down our insights into two distinct groups: moms and dads.

What we saw online

We conducted a heuristic evaluation using the Abby method to identify usability problems in Work Smart Enjoy Life's current website. The website scored significantly low on two principles: clarity and usefulness.

Unclear product descriptions

The website's product descriptions are long and wordy, making it hard for users to want to read. In addition, the font size is too small, making it even more difficult for users to read. It lacks key product details that are important to the value of the product.

Unhelpful product information

Under the product page's description and customer reviews, there is a blue list of the product's key features. Although this information is important and highlights the key functionalities of the product, the descriptions are verbose and difficult to visualize.

Ideation

Understanding Marg's needs

We created a persona of a mom to embody the insights we discovered from our user interviews. All of the moms we interviewed said they wanted a full visual understanding of the product and were involved in parenting communities. As a result, we decided to embody a mom rather than a dad because moms are more involved than dads in purchasing baby products.

Finding opportunities in Marg's journey

Next we created a journey map to depict Marg's experience shopping for baby products online. Creating Marg's journey helped us find areas of her experience on WSEL's website that we could improve.

Design WORKFLOW

Creating the Product Page

Marg wants to see pictures, videos, recordings, and reviews of the product. When ideating the design for this page, we knew we had a lot of information to fit on a small, mobile screen. Initially, we created an accordion menu for the Features, Dimensions, and Material. But during our design studio for the website design, we created with a better solution: a toggle switch of the product image with important information about the features, dimensions, and material.

Challenges & Solutions

1. Toggle Function

One of Marg's greatest needs when online shopping for baby products is detailed information — product material, dimensions, and the different ways the product can be used. For the Product Page, we came up with a toggle function that shows the different product details (Features, Details) on one product image.

When conducting usability tests with participants, we found the following:

  • 3 out of 4 users successfully found the product dimensions.
  • 4 out of 4 users understood how to use the toggle function.

Overall, the Features and Dimensions toggle function was a success because users were able to find it, play around with it, and understand the information that it displayed.

RELFECTION

A site's online shopper is typically the same person that uses the site's products. For Work Smart Enjoy Life, a diaper bag shop for dad, we found that this was not the case; dads rarely did the research and shopping for baby products. By basing our design ideas on a mom shopping for her husband, my team created a detail and concise website design that provides the information that moms need to make a purchase.

Next Steps

  • Get more customer reviews to increase the site's credibility.
  • Create marketing collateral based on the user's needs — clear images, videos, and graphics.
  • Hand the website design off to developers.