The Problem:
Many massage & beauty service user interfaces are cluttered, generic, and feature unclear action items.
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
MVP
Personas
Information Architecture
Wireframes
User Flows and Journeys
Competitive Analyses
UI Design
Prototyping
Interaction Design
Branding & Identity Design
Digital Illustration
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.
Sitemap
With user journeys at the heart of the navigation system, the site considers 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.
Sample Screen UI
Styleguide & Artifacts
As a designer, the style guide is the soul of the whole project. In order to make the design so intuitive it is nearly invisible, the style guide should be cohesive, thorough, and deeply considered.
Vector Spot Illustrations
A final piece of character for this system, shown here are two vector spot illustrations for blank states. There are no generic components in this application's design system.
Reflections
This process taught me how to take the best pieces of existing interfaces and iterate to improve on them. 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.
Next time I would consider accessibility with color earlier in the process. I also think that the icon artifacts could be developed further to increase the strength of the identity and employed as unique components across the site.
Let's Make Something:
Thank you!