UX/UI CASE
FASHION.CO website
Fashion.Co is an online retail store that sell clothes for anyone that is 16 years old and older.their main audience are University students and those that are early career professionals. Fashion.Co goals is to be make fashion fun and accessible to anyone 16 and older
Empathy
User research
User Interviews
Define
Persona
Journey map
Empathy map
Ideate
User flows
Crazy eights
Competive audit
Prototyping
Wireframes
Low-Fidelity
High-fidelity
Test
Usability testing
Implementing feedback
Project Overview
The Problem
Local designer usually have a website that is unprofessional and a cluttered designs. Which can make it harder for users to navigate through the website.
My Role
-
UX Researcher
-
Lead UX Designer
-
UI Designer
-
USer testing
-
Wireframing
-
Prototyping
-
UI Design
The Goal
The goal is to make a website that is pleasing to the eyes and easy to navigate. Doing so will allow user to spend less time looking for products
Project Duration
November 2021 to February 2022
Understanding the User
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat online shopping as a fun and relaxing activity when they need a break from school or work. However, many local designer shopping websites don’t make it easy for them to connect to their designer or place a special/personal request. They usually have to go on social media, and not everyone have social media. This cause member to have a negative experience. a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation.
User Pain Points
To capture all the aspect of our research i created hypotheses to determine the right goals and ensure that we meet all of user need
1
THE PROBLEM
Shopping website designs are often busy, and overwhelming for the everyday user
Using icons and less texts should
allow more empty spaces on the
pages. doing so will will also put
less work on the users eyes
2
THE PROBLEM
Local designer usually don’t have an easy way to connect to their customers.
Adding an extra screens/page for
contact. Doing so will make it easier fo user to ask for specific designs and also improve relatonship with between user and seller
3
THE PROBLEM
One of the pain point was that a lot of small business doesn’t have a way for their customers to track their packages
Using a separate page where member can keep track of where there package are and edit the information before it is shipped should make it on easier for the user and seller. this way they wont have to deal with unecessary messages
Persona
The next was to create persona to help further understand the user need, i was able to create two personas with different problems and needs. that allowed me to put the user first and not be bias and building something that i think the user might need
Starting the Design
Sitemap
Difficulty with the website navigation is something that i took note on early and how crowded everything was
My goal here was to make strategic information architecture decisions that would improve overall website navigation. And be visually appealing to anyone who is visiting the website
Paper Wireframes
Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
The home screen paper wireframe variations below focus on optimizing the browsing experience for users.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Easy navigation was a key user need to address in the designs in addition to equipping the website to work with assistive technologies.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Wireframes
Screen size variations
Usability study findings
To start testing the designs, I created a low-fidelity prototype which you can view here. This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study:
Refining the design
Mockups
After doing a usability study, I recieved feedbacks from my colleagues and users. I found that the page was lacking some basics stuff that could help users find more of what they are looking for. I added the “Similar Item” to give the user different view of what they can buy and their options. There was also a line added to separate each sections
Accessibility considerations
High-fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.
Going Foward
Takeaways
Impact
Our target Users found it refreshing how easy it was to navigate and accomplish task on the website. The love how simple it was to track their order and how organised everything on the website was
What i learned
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next Step
1.Testing
Conduct follow-up usability testing on the new website
2.Ideation
Identify any additional areas of need and ideate on new features
3.Readability
Conduct a readability test on the website