Project overview

The product:

SNS is an online shopping platform with different stores that offers affordable pricing options to customers. The typical user is between 12–70 years old, and most users are youth and adults. SNS's goal is to make shopping fun, fast, and easy for all types of users with different shops available to them.

Project duration:

I started this project in January 2022 and completed it in March 2022.

The problem:

Available online shopping websites have cluttered designs, inefficient systems for browsing through products, and confusing checkout processes. It is also very difficult to locate the different stores on the websites.

The goal:

My goal is to design an SNS website to be user-friendly by providing clear navigation, an easy way to find stores, and offering a fast checkout process.

My role:

I am the UX designer leading the SNS website design.

Responsibilities:

I am responsible for conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and delivering a responsive design.

The Design Process

User research: Summary

I conducted an interview to fully understand the needs and pain points of the users. I interviewed 10 participants between the ages of 14–50 years. The primary user group was busy employees who are enthusiastic about shopping for their home and want to have access to different stores on one platform without having to spend so much time moving from one store to the other to shop which is time-consuming.

User research: pain points

Some pain points identified in the research are:

1. Interaction
2. Navigation
3. Ease of use
4. Experience

Persona Analysis

I created a persona to guide me in the ideation processes and help me achieve the goal of creating a good User Experience for the target users.

User journey map

I created a user journey map of Sena's experience using the website to help identify possible pain points and improvement opportunities.

Starting the design

Sitemap

In order for me to prioritize what pages and content are important, I created a sitemap for the website. I also wanted to avoid creating duplicate content not forgetting that, I want to make the website User-friendly and SEO friendly.

Paper wireframes

It was time to put my ideas on paper. I thus sketched paper wireframes of each screen of my website keeping in mind the user pain points about interactions, navigation, ease of use, and a good browsing experience.

Due to the fact that SNS customers shop from different devices, I also sketched out paper wireframes for additional screen sizes to make sure the site will be fully responsive and user-friendly.

Digital wireframes

Due to the user pain points highlighted, I made it a priority to position buttons and icons useful for easy navigation on the homepage.

Digital Wireframe Screen Size Variation(s)

I created additional screen variations for users who would open the site on different platforms. I created it for a mobile screen and a Tablet.

Low-fidelity prototype

I connected all the screens involved in the primary user flow to search for an item to purchase and then proceeded to checkout flow points to see how the flow works. I then conducted a usability study to get the views and pain points of users.

The link to the low fidelity prototype can be found here

Usability Studies

I conducted a usability study to ascertain the user flow of the SNS website.

The main finding from the usability studies was highlighted in the diagram below

ITERATIONS

Based on insights from the usability study, I made changes to improve the website's homepage. I changed the number of individual items that would be displayed on the homepage to make it less cumbersome for users.

Before the usability study, there was no visual element of the item selected for purchase in the checkout process. Participants suggested a picture of the item be made visible to them so they can ascertain the validity of the item selected. I thus made changes in that regard.

ORIGINAL SCREEN SIZE MOCKUPS

High-fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for browsing products and checking out. It followed the same flow as the low fidelity prototype with the changes made after the usability study. It also meets user needs for easier checkout.

View the SNS Hi-Fi here

Accessibility considerations

Accessibility affects all of us, thus I incorporate accessibility to make the designs work better for more people in more situations.

Takeaways

Impact:

The target users were very excited to use the SNS app to find stores to shop easily. They shared that the design was easy to navigate with a clear and beautiful visual hierarchy displayed.

One quote from peer feedback:

"It's easy to navigate through the process. I am enjoying using this app."

What I learned:

I learned that not every user looks for the same experience thus conducting usability studies and peer feedback help identify pain points for many different kinds of users and help cater to those needs.

Next steps

1. Conduct a final round of usability studies to validate that the pain points users experienced have been effectively addressed.
2. Conduct more user research to determine new areas of need.
3. Monitor existing platforms to make note of new pain points that might emerge.

Tools used for my design:

1. Figma
2. Google Docs
3. Google Slides
4. Google Sheets

Let's connect!

Thank you for reviewing my work on finding stores to shop on a website. If you'd like to see more or get in touch, my contact information is provided below.

Connect with me on LinkedIn, Medium, and Behance

Email: katieboye44@gmail.com