![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/3f764247-ad59-4870-af5f-356e42f63b94_rw_1920.jpg?h=439976362523b0437b6894b6ee481fe9)
Body Mind Peace
I designed this massage interface to embody the elegance and relaxation of the experience itself with the eponymous brand mantra: body, mind, and peace. This project brief was part of a User Interface Design class in my senior year of undergrad at Portland State University.
The Problem
Many massage & beauty service user interfaces are cluttered and generic and feature unclear/redundant 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 inviting, intuitive, spacious, and sophisticated.
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/93530d06-9205-4d09-b999-b59106f18a4c_rw_1920.gif?h=89d9dbc8770507d6f99fe0338e378d9b)
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
Tools
• Figma
• Photoshop
• Illustrator
• InDesign
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/2ce65d7f-5310-4c38-bce7-f0465c3e8147_rw_3840.png?h=2beb1c356ddb9c2526b87e347964269d)
Strategy
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 many are generic in design and often feature redundancies that deter and confuse users. Determining their Strengths, Weaknesses, Opportunities, and Pain Points was a crucial launching point for the design process of this interface.
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/f333620b-0039-4c37-945f-0eda1df3c247_rw_1920.png?h=26cf7c968690da7534df9bbe67e0a560)
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/627e2361-a179-4bba-8075-590184f0875c_rw_1920.png?h=90724692005adbd17f7d2441c73ce954)
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?
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/52c633ab-feda-4531-bb18-a96b38067068_rw_1920.png?h=e23b5dd6cb08984aef0a6b25cccb4948)
Sitemap
The user journey is the heart of the navigation system ensuring ease of use and fluidity.
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/43ea0a23-1e34-4426-8b9e-21bd460e36ef_rw_3840.png?h=080657fc9af42cd42fbb77fae6a487ad)
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.
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/a0676b10-7ad5-496d-93c0-e012ddd7f10f_rw_3840.png?h=1c8fc7f5a8f0519fca41c84a50882d4e)
Vector Spot Illustrations
Shown below are two bespoke vector spot illustrations for blank states expanding the design system to ensure that there are no generic components in this design system.
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/83467550-4f74-40ad-ad49-9de2cb9789e3_rw_1920.png?h=ebef7f9368591a5e15857541096a49cc)
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/0bdbaffb-9f47-4973-b17b-0e60784d0f87_rw_1920.png?h=b85c6cacb49d0782ff40170e291030b3)
Final UI Screens
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/23591dee-e90c-4c9a-9c6c-9a641c5e3b87_rw_1920.png?h=95504771de04603b4cf330969bfcfe30)
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/9ee42ab9-bf22-430a-b52e-1ce42c9aa3db_rw_1920.png?h=5346819d725a659f0d24ee774e960c11)
![](https://cdn.myportfolio.com/bbba6522-fb0e-453e-9979-426ef200d41e/c835a13e-48d4-4e84-a0b5-d76ae96706b5_rw_1920.png?h=2b16a72f4d9621d10ccd62eb2ccaf2f1)
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 ease 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, I would consider color contrast accessibility earlier in the process. The icon artifacts could also be developed further to increase the strength of the application and brand identity.