.png)
Please note that Good Day is a fictional company.
Roles: Research, Information Architecture, UX, Prototyping, Visual Design
Project Length: 12 weeks
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?
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.
Competitor websites were also analyzed for approaches to online stores, and ways that Good Day could potentially differentiate itself.
.png)
Using insights from interviews and competitive research, I mapped out business/user goals. This helped me pinpoint mutually beneficial goals to guide my designs.
Thinking through this user persona helped picture the challenges, pains, motivations, and goals from the perspective of a Good Day customer.
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.
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.
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.
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)
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.
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.
.jpg)
%20(1).png)
