.jpg)
Art for everyone responsive website
Project overview
Art for everyone is a website for art tutorials.The typical users are between 19 and 60 years old, they all have different professions and occupations. The main goal of
Art for everyone is to create a space where everyone can easily find art tutorials, watch them at their own pace and enjoy the process of creating art, regardless of their skill level.
.jpg)
Design process
Empathize
Define
Ideate
Prototype
Test
My role
UX designer leading the Art for everyone website design.
Responsibilities
-
Conducting interviews;
-
Paper and digital wireframing;
-
Low fidelity prototyping;
-
High fidelity prototyping;
-
Conducting usability studies;
-
Accounting for accessibility;
-
Iterating on the designs and responsive design;
Duration
April 2023 - May 2023
Problem
Available platforms are sometimes a bit confusing and the navigation is unclear.
Goal
Designing a website Art for everyone with clear navigation, simple and intuitive user flow.
User research
Summary
I conducted user interviews, which I then converted into empathy maps to better understand user needs. I found that many of the target users liked taking art classes online because it was easy, cheap, and convenient. However, some of the users had difficulty using the websites because navigating the available websites was complicated and confusing
User pain points
1
Often navigation of the website is too complicated.
2
Messy organization and disorganized structure c fruistraits the user.
3
The absence of filter option in some of the websites makes finding a proper tutorial difficult.
Persona
Creating a user persona is an important step in understanding the target users' primary needs and challenges for the application. Gathering information as part of the research and creating a notional representation based on real data can help develop better solutions that meet user needs and goals.
.jpg)
Empathy map
User journey map
Mapping Nadia's User Journey helped me to create clear and intuitive navigation of the website.
.jpg)
Site map
Difficulties with navigation was one of the main user pain points, so I used the knowledge to create a sitemap. My goal was to create a clear and simple structure so users are able to search and find easily what they are looking for.
.jpg)
Digital wireframes
Moving to digital wireframes helped me to address user's pain points and improve their experience. Simplicity and clear navigation was key part of my strategy.
.jpg)
Digital wireframe screen size variations
.jpg)
Low-fidelity prototype
To create a low-fidelity user prototype, I connected all of the screens involved in the primary user flow of choosing and adding a tutorial to the cart and checkout.
Usability study: parameters
.png){kind=small}
Study type:
Unmoderated
Location:
Sofia, Bulgaria
Participants:
5 participants
Length:
15-20 minutes
Usability study: findings
1
Buttons
The text on some of the buttons was misleading for the users.
2
Checkout
Users didn’t have clear indication when the product is added to the cart.
3
The process of adding a product and checkout is too long, users need short way to finish the order.
Flow
Design system
Color
Primary
#BB86FC
Secondary
#FFF8F5
Secondary 2
#03DAC5
Buttons
Icons
Typography
Components
Mockups original screen size
Mockups screen size variations
.jpg)
Hi-fidelity prototype
My hi-fidelity prototype follows the same user flow as the low-fidelity prototype. There were made improvements of the design and functionality and I add profile page.
Takeaways
I learned that small details as label on button or missing icon can have huge impact of the user experience. It is important to put users needs in first place and be open-minded for others people point of view.