The research started with market research to study other online stores. This initial step help gather information from existing online shop. How these websites are organized and what type features and filters are used in these websites.

Primary research was performed in the form of interviews. There were 3 participants interviewed ranging from 35 to 37 years old. All participants have done online shopping within the last 30 days before the interview was done.

The research found that mobile apps are the main platform for online shopping. Because users generally have their phone with them most of the time, online shopping does not occur at any specific time of the day. Because, online shopping does not let you see and touch items as in a physical store, users rely a lot on reviews before committing to buy an item. Additionally, users care about their credit card information and how shopping sites use it. Finally, instant gratification can make the overall experience, from opening the app to the moment the items is in their hand feel easier and more satisfying

From the results from the primary research, I created a persona that represented all the participants success, concerns, and pain points of online shopping. The persona is Allison, a 37 married female professional. Allison does shop for herself and her husband. She takes shopping as something important that needs to be attention to maximize what she gets for each buck. Allison reads reviews, reads the items description and composition. She spend a good time making sure she is getting something worth the money.

Based on Allison persona and the way she does shopping, I created a story board showing how the flow and steps she go through when doing shopping.
This Story boards give a glimpse of how the persona interacts wit the product.

Before starting working on the architecture of the site, I recruited a group of participants to complete a card sorting exercise. The participants were asked to organized the items in different groups and categories. By doing this step, I had a much better understanding of how to organize the site and how to group items in a way that makes sense to people.

After completing the sorting exercise, I created a site map that based on the most common organization pattern created by the participants.

While working on the storyboard and the site map, I was already thinking on the steps the user or the persona has to go through to complete a task. I was in the back of my head something simple like buying a corduroy shirt. I thought of a corduroy shirt because it is a common item that you can’t always find in any store, so this would allow me to test navigation and organization within the online store

With the Storyboard, user flow, site map I was able tocreate the first set of wireframes in Figma showing how content would beorganized and layout. During the wireframes process, I focused on creating andshowing the right categories to users. Categories and subcategories helpedorganized all items in a logical way. I also, focused on filters which is afeatured that all the participants that i interviewed pointed as necessary.

I spent some time working on branding, colors and logo. The goal of the project is not only to create an online store, but also a new brand and company image. I create a logo and name for the company and worked with different moodboards. I rename the company Output because in digital world, the output is what makes media visible or audible. This idea can relate to young customers in many ways. Below are the most successful boards and logo iterations.

Having the wireframes and the branding boards, I dived into the UI kit. The process was a combination of looking at what fit the wireframes and researching other online stores. Basically, looking for things that work or can be successfully adapted to the site. I could have spent more time creating unique UI components, but this project didn’t have enough time to focused on that and I found that using UI design patterns would help users navigate the site better, because those patterns simply work.

The process of making the prototypes was fairly easy thanks to having a clear branding and UI kit ready to start populating the wireframes. After placing all the content in each page, I run a usability test with 3 participants. Some of the participants were already part of the research interview. Each participant gave feedback thatI wrote down a long with personal observations from the test. The final prototype below is a revised that addresses the main feedback from the participants.

After going through the interviews and usability test, I realized that users often want to cut though site map directly to what they are looking for and even when they are just browsing through items with they have something in mind. Sometimes people are looking for a pair jean, a white top, black clothes, etc. There is always something in their mind that filters out other items. The prototype could have focused more on filters and search box to create paths that can minimize the number of pages the user has to go through to complete a task. Because this was my first UX project, I decided to project simply in order to be able deliver good work. However, I’m aware of the input from participants and can see how addressing those points can make the site much easier to navigate.