Beautibly.
Unlock Your Beauty Potential, Seamlessly.
.webp)
.webp)
.webp)
About
Beautibly is an app designed for beauty professionals to connect with clients, showcase their skills, and offer easy appointment scheduling. It caters to a high-class user base, using a social media like experience to grow beauty professionals following. Clients can follow their favorite artist, and keep up to date on their favorite trends and styles.
The Team
Josh Leigh
UX/UI Designer
Roles
- User Research
- UX Research
- Branding
- UX/UI Design
- Testing
- Delivery
Danny Naylor
Product Owner/
Project Management
Roles
- Client Communications
- Competitive Analysis
- User Research
- Scope Identification
- Testing
- Establishing
Expectations
Beautibly
Client
Roles
- Providing Expectation
- Giving Feedback
- Design Approval
- Answer Questions
Project Challenges
01
High Class Branding
The client wanted a high-class yet inviting brand and app, but the challenge was to find colors and typography that balanced this without alienating everyday users.
02
Meeting Needs & Scope
The client wanted to incorporate their vision while staying within budget.
03
Keeping Timeline
The initial scope of work provided to us by the sales team was inaccurate. We were expected to keep the same timeline.
04
Planning for the Future
We had to stay within scope of phase one while keeping the future of the product in mind.
Design Process
Research/Discovery
I began the project, by researching the audience and their their needs, understanding the clients goals, and aquatinting myself with any industry competition.
Beautibly’s has two main audiences. The first are artists who are looking to show off their sills and make it easy for people to book their services. The second are normal users looking to follow their favorite artist and book services with them. Through my research I learned how important visual presentation is to both my users. I also researched Beutibly’s competitors and figured out what features we needed to include to address pain points they don't. The following are additional step I took in the research and discover phase:
- Client Kick-Off Meeting
- Discovery Session
- Research Audience
- User Stories
- User Personas
- Scope Out the Competition
.webp)
Research/Discovery
I began the project, by researching the audience and their their needs, understanding the clients goals, and aquatinting myself with any industry competition.
Beautibly’s has two main audiences. The first are artists who are looking to show off their sills and make it easy for people to book their services. The second are normal users looking to follow their favorite artist and book services with them. Through my research I learned how important visual presentation is to both my users. I also researched Beutibly’s competitors and figured out what features we needed to include to address pain points they don't. The following are additional step I took in the research and discover phase:
- Client Kick-Off Meeting
- Discovery Session
- Research Audience
- User Stories
- User Personas
- Scope Out the Competition
Design
I sought to build a strong foundation centered around user experience. I then applied voice and tone to the design using color and style.
In my design phase for this project, I followed multiple steps to create the final product. Firstly, I worked on defining the app's look and feel, which was a challenge because it needed to convey both high-class and welcoming qualities. Once I had a clear vision for the brand, I began designing the user experience by sketching frames and creating grayscale wireframes in Figma. I prioritize UX (user experience) before UI (user interface) to ensure my designs meet the audience's needs and are logical. Finally, I added the color and style. The following is a list of design activities I completed:
- Moodboarding
- Style Guide
- Sketching
- Wireframing
- High Fidelity Wireframing
.webp)
Design
I sought to build a strong foundation centered around user experience. I then applied voice and tone to the design using color and style.
In my design phase for this project, I followed multiple steps to create the final product. Firstly, I worked on defining the app's look and feel, which was a challenge because it needed to convey both high-class and welcoming qualities. Once I had a clear vision for the brand, I began designing the user experience by sketching frames and creating grayscale wireframes in Figma. I prioritize UX (user experience) before UI (user interface) to ensure my designs meet the audience's needs and are logical. Finally, I added the color and style. The following is a list of design activities I completed:
- Moodboarding
- Style Guide
- Sketching
- Wireframing
- High Fidelity Wireframing
Design
I sought to build a strong foundation centered around user experience. I then applied voice and tone to the design using color and style.
In my design phase for this project, I followed multiple steps to create the final product. Firstly, I worked on defining the app's look and feel, which was a challenge because it needed to convey both high-class and welcoming qualities. Once I had a clear vision for the brand, I began designing the user experience by sketching frames and creating grayscale wireframes in Figma. I prioritize UX (user experience) before UI (user interface) to ensure my designs meet the audience's needs and are logical. Finally, I added the color and style. The following is a list of design activities I completed:
- Moodboarding
- Style Guide
- Sketching
- Wireframing
- High Fidelity Wireframing
Testing
Wanting to ensure the solutions I had designed out were intuitive and easy to use, I utilized gorilla testing to quickly and cheaply test them.
This type of testing allowed me to collect honest and authentic data. I discovered parts of my designs that did not have the expected outcome. For example, the participants were confused by some of the wording used on the “Artist Categories”. This knowledge allowed us to reevaluate the names of these categories and find options that better spoke to the users.
.webp)
Testing
Wanting to ensure the solutions I had designed out were intuitive and easy to use, I utilized gorilla testing to quickly and cheaply test them.
This type of testing allowed me to collect honest and authentic data. I discovered parts of my designs that did not have the expected outcome. For example, the participants were confused by some of the wording used on the “Artist Categories”. This knowledge allowed us to reevaluate the names of these categories and find options that better spoke to the users.
.webp)
.webp)
.webp)
.webp)
Delivery
I organized the final design document with the high resolution comps to ensure the development team could easily understand the built out user flow, animation, and interaction. I then ended the design phase with one final client meeting.
The following deliverables were included in the delivery phases:
- High Fidelity Comps
- Development Notes
- Final Style Guide
- Design Brief
.webp)
.png)
Delivery
I organized the final design document with the high resolution comps to ensure the development team could easily understand the built out user flow, animation, and interaction. I then ended the design phase with one final client meeting.
The following deliverables were included in the delivery phases:
- High Fidelity Comps
- Development Notes
- Final Style Guide
- Design Brief
Delivery
I organized the final design document with the high resolution comps to ensure the development team could easily understand the built out user flow, animation, and interaction. I then ended the design phase with one final client meeting.
The following deliverables were included in the delivery phases:
- High Fidelity Comps
- Development Notes
- Final Style Guide
- Design Brief
Problems & Solutions
Tight Deadline
Due to a communication error, the initial estimated scope increased but the expectation for the timeline was the same.
Scope Creep
The client had a vision for the app that didn’t always stay within scope. They were constantly trying to push the scope further.
Branding Disconnect
The client presented pre-existing branding that did not align with the desired feel and tone of voice they were seeking.
.webp)
Design File Organization
Reusing elements in my design and utilizing components saved time and allowed me to stay organized.
Establish Expectations
Showed how the designs are structured to include the client's future ideas.
Color Theory
I presented branding that matched the desired feel and tone of voice they were looking for, and explained why.
Tight Deadline
Due to a communication error, the initial estimated scope increased but the expectation for the timeline was the same.
Scope Creep
The client had a vision for the app that didn’t always stay within scope. They were constantly trying to push the scope further.
Branding Disconnect
The client presented pre-existing branding that did not align with the desired feel and tone of voice they were seeking.
Design File Organization
Reusing elements in my design and utilizing components saved time and allowed me to stay organized.
Establish Expectations
Showed how the designs are structured to include the client's future ideas.
Color Theory
I presented branding that matched the desired feel and tone of voice they were looking for, and explained why.
Tight Deadline
Due to a communication error, the initial estimated scope increased but the expectation for the timeline was the same.
Scope Creep
The client had a vision for the app that didn’t always stay within scope. They were constantly trying to push the scope further.
Branding Disconnect
The client presented pre-existing branding that did not align with the desired feel and tone of voice they were seeking.
Design File Organization
Reusing elements in my design and utilizing components saved time and allowed me to stay organized.
Establish Expectations
Showed how the designs are structured to include the client's future ideas.
Color Theory
I presented branding that matched the desired feel and tone of voice they were looking for, and explained why.
Lessons Learned
Dont Assume, Test
Never assume you know the answer to a problem. Make an educated decision and if time allows, test it to make sure it works.
Accessibility
Make sure designs are accessible to all audiences. Some colors and font weights might be hard for people to see. You don’t want to exclude potential audiences.
Communication
Make sure to set expectations with a client on how much they want to be communicated with. Its important to know how much detail they want to be let in on.
The Take Away
An app with good UX but bad UI isn’t very fun to use. In contrast, an app with good UI and bad UX is also not very fun to use. There has to be a balance when designing. Having a solid foundation in both UX and UI design is crucial to designing successful products. In addition, making sure your team and the client are on the same page is a must. When everyone understands the project goals and who the user is, the outcome is undeniably better.
%20(1).webp)
Lets Work Together!
Please include any relevant information in your message that can help me get a high level understanding of your project.
