Prafind — UI Design Case Study
Book a practitioner at any time, wherever you are
Introduction
Many individuals find a workplace that suits their interests and lifestyles. Things that attract them to a specific workplace would be condition, coworkers, work load. However, we pay little attention to benefits.
Many benefits can be beneficial to our health. Whats often overlooked is holistic health. A lot of workers are fortunate of this benefit though, never put it to use. Benefits not being utilized, leaves a gap in the market for us to directly connect practitioners with clients. Prafind, originally called “Health Hustle”, is a platform designed to connect licensed health care practitioners with clients to provide health and wellness treatments in the comfort of their homes.
The Project
Our group of UX and UI designers are assigned to put together the basic foundational blocks for a website, that allows clients to search for and book a practitioner for a health and wellness session in their home or office. This helps solve the issue of benefits being under-utilized.
1. Research
Our Product Design Team was excited to discover the vision of Health Hustle and how we could help develop the brand to our client’s needs.
The Client
Before getting into the creativity, we need to always see what the clients desires are and what they have to present to us, to get a solid idea of what we can start with. Our clients Gertrude, and Muhammed came forward with Health Hustle. We were tasked to rebrand Health Hustle to reflect holistic wellness, while also starting off the business with a solid starting design.
Health Hustle had a sporty italic design for the typeface. The logo was a Celtic knot that was used because the client said it was used to represent natural energy, emotions and spiritual healing.
Gut test
We went forward with a Gut Test. We displayed a series of images, icons, typography, and illustrations to the client for review. This helped us understand our client’s preferences and what we should base the new design on.
The top section consisted of photos that didn’t appear favourable by the client.
Illustrations seemed too playful for the feeling the client was aiming for. The icons and pictures were too forward and rough
For the bottom examples, we found out our clients appreciated the minimal, simplistic elements as well as professional, bright imagery.
Goals: After the Gut Test and learning what design the client is aiming for, we moved on to setting goals to prep for our design process.
- Rebranding the business name and logo while also staying within the clients vision.
- Creating design for both users and practitioners to feel welcoming, safe, and secure.
-Creating a responsive design for users to use on mobile.
2. Design Process
After the client meeting and seeing what they wanted for their design, we were ready to start the design process for the rebrand of Health Hustle.
The Why — Design Inception
When seeking the “why”, we needed to find something that reflects our client’s vision of health and wellness while also leading us through the design. We got together as a UI Team and collected key words to create the “why”.
Words we looked into:
- Health
- Wellness
- Location
- Trustworthy
- Grow
- Restore
- Find
What we needed to look at is that we needed to ask “why do we need the consumer to use this app?” Using key words and many iterations such as “Bringing health and wellness to your community” and “Holistic wellness in your community”, We ended up with a “Why” that reflects the visual language and defines the websites purpose.
4 Elements of the Visual Language and mood:
Visual language includes Space & Movement, Colour Palette, Shape & Imagery, and Voice & Brand. Some words we chose were minimal movement, lots of white space, soft, pastel colours, plants & photography and a welcoming, reassuring voice.
Space & Movement: Our clients were looking for breathable space. This would consist if a lot of white space and minimal movement with little animation. With this, we needed to go as simplistic as possible
Colour Palette : Soft and little to no contrast would push the calm and soothing feeling. Due to this, pastel colours would reflect this energy that massages carry.
Shape & Imagery: During the Gut Test, our clients were not fond of illustrations. This lead us to using more photography for our screens. Within this photography, we went into using plants for an earthy feel and imagery of massages to set more of the mood for the user.
Voice & Brand: Simplistic and thin were words our clients were pushing. We needed to pair the brand with being “welcoming and community” with the simplistic aim the clients wanted.
MoodBoards
Collecting from the research gathered, all the mood boards allow us to showcase the mood through imagery and typefaces. We chose minimalist imagery, showcasing a dominant colour with an accent secondary colour. All our directions convey a relaxed, soothing, and rejuvenating feel.
Style Tile & Brand Guideline
When translating our mood boards into style tiles, we needed to have distinct style direction due to us having very similar mood boards. From this, We have created these style directions.
Syle Tile Direction 1:
- Highlights simplicity and a cursive aesthetic.
- Also conveys a “sanctuary” feeling to create more of a welcoming atmosphere.
- Gold is used as an accent, accompanied by whitespace, to increase focus on the page.
Style Tile Direction 2:
- Uses a complementary colour scheme of dark lavender and muted forest green, with off-white and black as neutral colours.
- The images chosen convey the relaxed, calm and rejuvenated feeling the user would experience within their home.
Style Tile direction 3:
- Uses soft sage green tones with cool greys.
- Imagery features lush foliage in the home and natural textures.
- Space is open with calming interiors.
- Header text uses bold serifs for a warm and relatable attitude.
Logo and Re-Naming
Changing the name and giving ideas for the logo were a huge part in the UI design process. We go through a process for the rebrand that helped us grow in an experience of the rebrand.
Name Change
The image below reflects the process we have been through for naming the website. This consisted of in-group brainstorming and name surveys that grabbed outside opinions.
Top Row: Initial inspiration from names (given by the client) that we knew were vetted by Corporations of Canada. This was a good experience in understanding that there are certain qualifications that are needed for a company to brand themselves
Middle Row: These were words we collectively decided were close to the service of the company.
Bottom Row: The names in green were what we have put together. These names have their own explanation of what can represent the website and its vision.
- Grove: This brings out the earthy and plant theme in the website. This word also invokes a pushing and swaying feeling.
- Mobile Sage: The word “mobile” shows movement of the practitioner coming to the user. “Sage” refers to the herbs and wisdom.
- Pestle: A pestle is a a heavy tool with a rounded end, used for crushing and grinding substances such as spices or drugs. This would put the pushing and massage vibe to the name.
The name “Prafind” is the final decision of what the name is going to be. This was one of our clients first suggestions. The name is a combination of ‘practitioner’ and ‘finder’. Our name surveys didn’t exactly show in favour of this name however, this name was in favour of our client and followed The Corporations of Canada.
Logo Exploration
Our UI team was happy to come up with a new logo. We developed many iterations of alternative logos, and presented our final designs (shown below) to the client. Our process consisted of focus groups and brainstorming many different ideas.
We studied the logos of other practitioner companies and identified design traits which distinguished them from their competitors. Our logo iterations adopted elements from each company: Urban’s wiry geometry, Soothe’s similar light-weight look, and Zeel’s extra heavy, characterful word-mark.
The first logo adopts these traits in the typeface and uses a symbol with a wave in the bottom left side. This wave represents the calmness motion and the circle implies Prafind’s mission of complete, holistic care.
The second logo features a symbol inspired by the Venus fly trap (symbolizing strength/persistence) and an eye (symbolizing the search for a practitioner).
After multiple brainstorming and focus group sessions, the client decided on the Celtic knot along with the name ‘Prafind’.
The recoloured Celtic knot shows the circle and leaf shapes from the previous designs, while retaining connection to nature but expressed in a more subtle way.
Iconography
Reflecting the final logo, we made custom icons for Prafind. The icons use a thin simplistic outline and a light green fill. Using the logo elements, this further pushes the earthy, calm and simplistic theme
Final Style Tile
Gaining traits throughout our research, we finalized on a style tile. In the final tile, it draws main inspiration from the third direction with the use of the colour green and the earthy plant theme. The tile draws inspiration from the sanctuary feeling in the first direction and the colour change of the logo and the warm use of purple from the second direction.
3. Paper Prototype and Mid-Fi Designs
These are the paper prototypes that have been handed over from our UX designers for us to look through. They did a remarkable job in exploring both the user and the practitioner, for the usability and the market around them.
Paper Prototypes
Mid Fi Screens
The paper prototypes translated well into the Mid-Fi screens. The elements and assets were shown clearly in the Mid-Fi desktop screens as-well as the responsive version. The UI team then organized these assets into a library for use in the Hi-Fi Screens.
4. Final Screens — Hi-Fi
When receiving the Mid Fi screens the UI Team was ready to add their assets. We had many different ideas but it was easy to come to common ground with one another. Which made the process of creating Hi-Fi screens efficient.
Once the library was finished and the the Mid-Fi screens were finalized, we were ready to add our designs into the desktop screens. Once the Desktop screens were done we had a finalized library. The UX team then gave us the mobile screens. The process of adding the library assets to the mobile screens was easy due to our team being well organized.
Invision Links
Desktop: https://invis.io/V9WE8BRYRJ5
Mobile: https://invis.io/2FWE8P567X3
Conclusion
The project provided valuable opportunities for growth as product designers. We honed a range of skills, from executing complex rebranding efforts, such as redesigning the logo and naming, to creating basic inception and style tiles. The project was not only informative, but also provided an enriching collaborative experience with the design team. Through working closely with one another in Sketch and Illustrator, we had the chance to learn from one another and gain insight into each team member’s unique design approach and personality.
Future Considerations
- More quantitative data from practitioners — along the lines of a graduating class of practitioners would be ideal.
- Interview and gain more insights on other health and wellness services such as naturopathy, acupuncture and even yoga.
