Body Mind Peace
A massage interface that embodies the elegance and relaxation of the experience itself as well as the brand mantra: body, mind, and peace.
The Problem:
Many massage & beauty service user interfaces are cluttered, generic, and feature unclear action items.
The Solution:
Through three stages of research, competitive analysis, personas, and strategic user journey mapping; I was able to design a UI system that is intuitive, spacious, and sophisticated.
What I did:
• Design Direction
• UX Testing
• UI Design
• Strategy
• Information Architecture
• Wireframes
• User Flows and Journeys
• Competitive Analysis
• Prototyping
• Branding & Identity Design
• Digital Illustration
Vector Spot Illustrations
Shown below are two vector spot illustrations for blank states expanding the design system to ensure that there are no generic components in this design system.
Strategy
Research & testing are the most valuable components of user-centered design. In this phase, I looked for pain points and friction in current applications with an extra emphasis on accessibility and mobile-first responsivity.
Competitive Analysis
There are strong competitor apps for health & beauty booking services but they are generic in design and often feature redundancies that can hurt smaller businesses.
Persona
Tailoring the service to the user's motivations and goals helps keep the UI user-focused. Using these motivations and goals and understanding pain points led to the following questions:
• What are the minimum steps and screens to book or rebook a service?
• How can services and products be advertised in an elegant and inviting way?
• What feedback is necessary to provide cues to users without overwhelming them?
Sitemap
User journeys are the heart of the navigation system to ensure ease of use and fluidity.
Feature Flow: Book Now
I mapped out every feature flow and screen flow necessary to achieve the minimum viable product. Below is the interaction breakdown for the service booking user journey.
Reflections
This process taught me how important it is to take the best aspects of existing interfaces and iterate on them to increase efficiency and intuition of use. The blue-tinted color treatment for product photos with a peach-orange primary color palette invokes a striking complementary contrast while still creating a calming mood. The generous use of white space between elements also serves to heighten this calming effect.
In the future, would consider color accessibility earlier in the process. The icon artifacts could also be developed further to increase the strength of the application and brand identity.
