A Peaceful Planet
A Peaceful Planet
The purpose of this project was to design a website for an established business. The website was for my hairdresser who recently started doing permanent makeup as well.
Role:
UI/UX Designer & Researcher
Tools:
Figma & FigJam
Timeline:
July 2024 - August 2024
Research is the best foundation
-
All projects have to start somewhere. Seeing what else is out there before you make a decision on your next project is the best starting point. This also allows you to see what will be competing against your design.
-
User interviews are done to find potential users for your design and allows you to gather any and all information that you will need to start the foundation to your design.
-
This activity is done once all interviews are conducted. Information that is gained from the interviews is sorted and categorized to find the pain points that the designs will focus on.
-
Problem statements are created to get you to start thinking about possible solutions for the pain points that were found from affinity mapping.
-
User personas are created to better understand the perspective of the users, thinking about their motivations, frustrations, needs, and wants.
-
User flows are created to understand how many screens are needed and to give some sort of time frame based on the number of screens. The user flows map out the path that users will go through when using the website or application.
-
The purpose of project goals is to find and understand what the website/application is going to accomplish from the user's end and the business end. These goals also include technical considerations based on target audience.
Problem Statements
I would like to explore different options for advertising/ displaying service information on a website, because there are many cosmetology and permanent makeup service options that can be provided.
I would like to explore ways that is easy and lowers frustration when trying to schedule services online, because most of the clientele is not a big fan of logins and trusting online appointments and there are many services offered.
Research Findings
Designing Starts Now
Low-Fidelity Wireframes
High-Fidelity Wireframes
-
![]()
For every great website design, there should be a mobile design that is paired with
-
![]()
-
![]()
All of the services are displayed in a user-friendly orientation, grouped by type of service offered
-
![]()
Problem Statement #1 Solution: This is the design that I landed on for advertising and displaying information about services.
-
![]()
-
![]()
Scheduling pages with a user-favorite stepper, based on which “Book Now” button is clicked determines which step 1 scheduling page will appear
-
![]()
Problem Statement #2 Solution: The service pages were designed to be straight to the point. Based on which button is clicked, navigation bar button, hair services page buttons, or permanent makeup page buttons, the scheduling options correlate.
-
![]()
-
![]()
Mobile page designs, same as the desktop designs just sized appropriately
-
![]()
Testing
Iterations
After
Addition of a Stepper Component
After conducting testing, I found that users prefer the stepper component when there are multiple steps and pages involved.
After
More Accurate Pictures
I wasn’t really liking the pictures that I chose. After testing, I found that users thought the pictures fit, but could match the feel of the website a little better.
Conclusion
-
Summary
The purpose of this project was to create an updated website for an existing brand. This project tested my skills when sticking to an existing branding style. I was the sole designer and researcher.
-
Highlights
I enjoyed the challenge of designing this project because it tested my skills when sticking to an established branding style. I also slightly enjoyed the research part because it established a great foundation for my design, leading to less major changes to occur.
-
Takeaways
This project improved my skills to create an updated and modern website while not changing the established branding style.