Content Creator Merch Website

User Interviews

Users want to quickly find items they're looking for

After getting ideas from competitors, I performed 5 user interviews to understand users' behaviors and motivations when purchasing from smaller brands online. Findings were then synthesized into:

2 user personas to focus on who the website’s representative user is, in which both are looking to purchase from a brand's website that they’ve never encountered before
2 user stories to show what the user wants
2 user journey maps to explore the step-by-step experiences a user has as they interact with an e-commerce website

Persona & User Journey Map

2nd Persona & User Journey Map

Users need to easily assess the legitimacy of a website and purchase from brands that resonate with them

Lexi is my primary persona and represents the fan this website design is hoping to reach.

Lexi

User story: As a fan, I want to get notified of merch drops and buy official merch so that I can support my favorite creators.

Goal: Buy official merchandise from their favorite creators.

Opportunities

Provide additional costs upfront with a “minimum free shipping” label, and shipping and return policy
More information on preorders, restocks, and sold out items would be helpful

Open Card Sort

Building information architecture

At the end of each user interview, I had participants write down what pages/information they’d expect to see within an e-commerce site and sort them into related categories to gain consensus on how users logically group information that would potentially be offered through the site.

Key Findings

Being able to filter and sort by relevant categories is essential to finding the products the user needs
Have all relevant pages in one area, and the main page should focus on the products
Products displayed should be clear and easily added to their bag
Checkout should have a clear flow and always be easily accessed
Group by: collection/merch drop, actions the user can take, and information

How Might We...?

Brainstorming ideas

Finally, I brainstormed additional features/pages through a HMW exercise to translate problems into opportunities for design solutions.

HMW make finding information intuitive?

HMW organize products so that they're easy to access and view?

Sitemap

Consolidating user feedback and brainstorm ideas into organized sitemap

From foundational research, users’ proposed categories are organized into a hierarchical sitemap with all the pages my design needs to accomplish the users' goal.

Usability Testing

Research Plan System Usability Scale Summary Extra Branding Materials

The sitemap became the basis of my prototype which I tested on 5 participants to identify pain points or feedback

At the end of the research study, I had users complete a System Usability Scale to measure the overall usability of my design. Here are key results:

Final Design

After conducting moderated usability studies, I made changes to my designs

Bag/Home Page

Users were most impressed with the information provided and the UI design that allowed them to easily find products and quickly check out.

Before

After

Changes

Clicking on bag icon leads to a pop-up overlay so the user doesn’t have to go back and forth between pages
Made button colors purple and dark brown for better contrast against the background, and overall made all clickable buttons/icons/links purple and background/headers pink for consistency
Dark mode for accessibility with the brand’s colors

"Buy it now" Checkout

Users liked having placeholder text to show what information they need to input and having several ways to navigate to other pages when viewing their order confirmation/order details.

Before

After

Changes

For a quicker checkout, I made the default quantity = 1 and the border-radius thicker for the selected color to show that users would be adding that item to their bag
Users liked that the “Buy it now” screens were the same as the regular checkout but didn’t like that it was a pop-up overlay, so I made this flow open to fill the entire screen

About Page

The about page introduces the brand, associates the content creator with the brand's products and website, and explains why the customer should be interested in the brand.

Before

After

Changes

Added photo of the content creator to better connect the brand with the content creator
Z-shaped pattern and added more white space between images for more visual movement
Made links to the company’s unique aspects purple to be more easily scannable, and users can read more about the brand while keeping the page succinct

Final Website Design

Tablet & Phone Design

Tablet Prototype Phone Prototype

Here are modifications that are unique to the tablet and phone screen size for a responsive design

Final Takeaways

Users said that this site was “fairly standard across the board” with the pages and information included, and particularly liked the FAQ and About Page

This project allowed me to utilize previous skills in branding and apply them to the UI for this website. Designing for multiple screens also showed me the importance of responsive design.

Discussions with the client

If this were a real project, the visual design of the website would be a large focus because that's what sets brands apart from one another. From this, I’d have conversations with the content creator to balance unique designs with established design patterns. I’d also discuss how to implement functional designs that suit the content creator’s preferences and meet their business objectives.

Next steps

If I were to continue with this process, I would:

Do user testing for the mobile and tablet screen sizes
Develop and test a filter, sort, and search flow
Test a less cluttered design (such as a hover for the “Buy it now” feature instead of the drop-down menus and buttons) and do A/B testing to see if that would lead to a quicker checkout
Overall accessibility with the colors used, the motion in the video, and dark mode