How Good Day designed a responsive website to help customers shop online.

High Fidelity Prototype

Please note that Good Day is a fictional company.

Roles: Research, Information Architecture, UX, Prototyping, Visual Design

Project Length: 12 weeks

Problem


Good Day makes premium athleisure clothes for men, with the mission of enabling healthy and productive lifestyles.

While the clothing is well received, Good Day lacks a digital presence compared to competitors. The business has realized that it is missing out on a market of buyers who prefer to shop online.

How might Good Day stay competitive and enable online shoppers?

Research

To start, I needed to better understand possible user personas, buying behaviors, and the competitive landscape.


As a source of insights, I interviewed three male participants between the ages of 18-35 via video chat for 30 minutes each. Interviews seemed like the best way to get in-depth feedback since everyone's online shopping experiences vary.


  • Staying updated on sales and discounts.
  • Larger selection of clothing to choose from.
  • Preferred clothing is not available in physical stores.
  • Inaccurate sizing & the Return Process.
Challenges
Wants
  • Availability of clothing online.
  • Ability to filter selection.
  • Ability to check out and return.
Needs


Competitive Research Findings

Competitor websites were also analyzed for approaches to online stores, and ways that Good Day could potentially differentiate itself.


Project Goals

Learnings

The Good Day online clothing store should provide an easy way for customers to browse, filter by preferences, and check out.The website should also reflect themes of minimal design, comfort, versatility, and high quality. Top motiviations for users include Productivity, Health, and Convenience.

Information Architecture

With a better understanding of potential users, I needed to test how these users would navigate the Good Day website to purchase clothes.

I used Closed Card Sorting with 8 participants who fit the user persona of Good Day shoppers. This was to test possible categories, sub categories, and how users would naturally group these.

All participants identified as male and between the ages of 18-35. Card Sorting was conducted via OptimalSort.  


Site Map

Card Sorting helped me structure the Site Map in a more clear way to avoid confusion between categories.

For example, I added the word "Collection" to each of the location specific collections. Like "Seattle Collection" instead of just "Seattle" to make it extra clear.

Another example is with changing the wording of the Sale sub categories to "Summer Sale" or "Fall Sale."

User Task Flow

Using the pages mapped out in the Site Map, I drafted a User Task Flow for the task of purchasing a clothing item (T-shirt) from the website.

This flow can be replicated for any clothing item(s) and was created to imagine the path a user might take when trying to purchase clothes from the Good Day website.

Interaction Design

Using the Site Map as a conceptual map, I created annotated low fidelity wireframes for the home pages on desktop, tablet, and mobile. These were drafted with the primary user task of buying clothes online, along with the various platforms that someone might access the Good Day website on.  



This wireframe displays a page that a user sees for a product category, such as T-Shirts. From here, the user can select specific items for further review.

Research insight: It's important to be able to filter through clothing, which I tried to enable with quick category selections and the filter button towards the upper right.

On this page, the user can read more about the product, see additional images, select the color and size, and add to their online shopping cart for check out.

Research insight: I decided to make the "Add to Cart" button larger based on the user's need to check out, and the business' goal of increasing clothing sales.

UI Design

The Good Day brand style and UI were centered around common themes gathered from research.

Themes: Minimal design, Comfort, Versatility, High quality and durability



High Fidelity Wireframes

Going back to the main learnings from research, the online clothing store should provide an easy way for customers to browse clothes, filter by preferences, and check out.

*Images are from Pinterest and the Reigning Champ website as model and product photos were not available for this project*



Desktop: Home page, Category page, and Product page (left to right).



Tablet:
Homepage and Product Page (left to right)



Mobile:
Home Page and Product Page (left to right)

Iteration

Thinking through ways that users could navigate through the site, I created this high fidelity prototype. The Site Map and sample User Flow for selecting a product and checking out were especially helpful here. This prototype was tested with 3 participants who fit the user persona of Good Day.

Testing was conducted with Maze, which provides an online platform where users can complete assigned tasks to interact with the prototype.


Based on feedback from user testing, an affinity map was created to summarize strengths, weaknesses, and potential solutions.





Initially, I was expecting users to browse for clothes by category, so the filters weren't built out completely. This caused some confusion with participants who tested out the high fidelity prototype.

As a result, the filters were built out as another potential path that the user might take to select a specific item.



Additionally, wording for the bag confirmation page was changed as there was some confusion where the user should click to proceed. Originally, the wording was "Review Cart" but was revised to "Bag Summary" to seem like less of an action item.

Below is a heatmap from Maze showing where users miskicked, along with the two variations they could have encountered during the Check Out flow.


Final Designs

This project was a great chance to learn about designing responsive websites for desktop, tablet, and mobile. I also learned how valuable testing and gathering feedback is. This reminded me that the main purpose of a design is to help with something.

In particular, designing the online check out process was especially interesting since it appears for almost all consumer products that are purchased online. Moving forward, I'm looking forward to learning more about design patterns and variations that appear in other industries besides clothing.