Healful
Where Self-Awareness Meets Self-Improvement
About
Healful is a web application that helps employers encourage their employees to improve their emotional IQ. With a unique and data driven way to identify ways individuals can improve their emotional maturity, Healful provided a personalized track for each person. Utilizing training videos made by real professionals, anyone can reach emotional self sufficiency.
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
Healful
Client
Roles
- Providing Expectation
- Giving Feedback
- Design Approval
- Answer Questions
Project Challenges
01
Short Timeline
Our services were sold to the client in the way of design sprints. This meant that the timeline was short yet high quality work was still expected.
02
User Sensitivity
Because this product is centered around emotional health, information needed to be presented in a way that was sensitive to users of all emotional maturities.
03
Branding
The branding the client started the project with did not match their mission and goals.
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
Since this web application centers around learning, I began the project by seeking to not only understand my audience but how they best learn.
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
Research/Discovery
Since this web application centers around learning, I began the project by seeking to not only understand my audience but how they best learn.
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
In this phase I adjusted colors and branding to align better with the clients goals. I then designed wireframes, prioritizing user experience and then user interface.
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
In this phase I adjusted colors and branding to align better with the clients goals. I then designed wireframes, prioritizing user experience and then user interface.
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
In this phase I adjusted colors and branding to align better with the clients goals. I then designed wireframes, prioritizing user experience and then user interface.
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
Both I and the client tested the designs with members of the target audience. Results revealed initial weaknesses in the design that we were able to address and solve.
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.
Testing
Both I and the client tested the designs with members of the target audience. Results revealed initial weaknesses in the design that we were able to address and solve.
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.
Delivery
Because the client did not want to pay for a prototyping phase, I had to make sure that my design notes were impeccable. I had to make sure that the developers understood the designs and could successfully build the vision we had created. I left detailed notes on the file and communicated back and forth with them on multiple occasions.
The following deliverables were included in the delivery phases:
- High Fidelity Comps
- Development Notes
- Final Style Guide
- Design Brief
Delivery
Because the client did not want to pay for a prototyping phase, I had to make sure that my design notes were impeccable. I had to make sure that the developers understood the designs and could successfully build the vision we had created. I left detailed notes on the file and communicated back and forth with them on multiple occasions.
The following deliverables were included in the delivery phases:
- High Fidelity Comps
- Development Notes
- Final Style Guide
- Design Brief
Delivery
Because the client did not want to pay for a prototyping phase, I had to make sure that my design notes were impeccable. I had to make sure that the developers understood the designs and could successfully build the vision we had created. I left detailed notes on the file and communicated back and forth with them on multiple occasions.
The following deliverables were included in the delivery phases:
- High Fidelity Comps
- Development Notes
- Final Style Guide
- Design Brief
Problems & Solutions
Short Timeline
The client was sold a short timeline with a high level of quality.
Designing for Sensitive Information
There were many restrictions on how we could present information because of the sensitive nature of the information.
System Permissions
We designed a system of of permissions that would allow certain users to have access to sensitive info with permission
Design Sprints
We broke the design phase into sprints in an effort to work quickly but effectively.
Branding Disconnect
The client presented pre-existing branding that did not align with the desired feel and tone of voice they were seeking.
Color Theory
I presented branding that matched the desired feel and tone of voice they were looking for, and explained why.
Lessons Learned
Complicated Users
The less you understand your user the more complicated you are. If you are having a hard time designing for a user, get to know them better.
Shape and Color
Every aspect of a design will affect how a user feels and interacts with a product. Paying attention to color and shape use in products can elevate your designs.
Simplify
When in doubt, keep it simple. It can be tempting sometimes to over complicate a design in an effort to impress or wow. Most often the simpler the better.
The Take Away
Designing for an audience in a vulnerable state can be difficult. There are so many things to take into consideration. Research is key in these situations. The more you understand the user, the better you can design for their needs, and the less complicated they become. It's like sketching a design out when you get stuck. When you need to understand a user better, go back to the beginning.
Lets Work Together!
Please include any relevant information in your message that can help me get a high level understanding of your project.