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.

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.

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.

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.

Contact Me

*Required field
Clear
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.