Opul

Opul

Opul

User Experience. UI Design.
Design Systems. Prototyping.
User Experience. UI Design.
Design Systems. Prototyping.

Opul is a relational commerce platform (B2B2C) tailored to meet the specific needs of med spas, plastic surgeons, and dermatologists.

THE ASK

THE ASK

THE ASK

Redesign the experience to make it scalable, responsive, and more intuitive, while bringing key features to the forefront of the app to increase their usage.

THE CHALLENGE

THE CHALLENGE

THE CHALLENGE

With key features like the catalog buried deep in the experience, the team noticed a significant number of guest checkouts being processed. This deeply hindered Opul's ability to surface proper business reporting and insights. Given the limited space in the existing architecture and more features on the way, we realized the existing navigation wouldn't suffice.

With key features like the catalog buried deep in the experience, the team noticed a significant number of guest checkouts being processed. This deeply hindered Opul's ability to surface proper business reporting and insights. Given the limited space in the existing architecture and more features on the way, we realized the existing navigation wouldn't suffice.

With key features like the catalog buried deep in the experience, the team noticed a significant number of guest checkouts being processed. This deeply hindered Opul's ability to surface proper business reporting and insights. Given the limited space in the existing architecture and more features on the way, we realized the existing navigation wouldn't suffice.

With key features like the catalog buried deep in the experience, the team noticed a significant number of guest checkouts being processed. This deeply hindered Opul's ability to surface proper business reporting and insights. Given the limited space in the existing architecture and more features on the way, we realized the existing navigation wouldn't suffice.

Our Users

We categorized our personas by Business Type, Practice Employee, and Patient. For the initial navigation design, we focused on the practice employee's daily duties. Through interviews with existing users, we developed four key personas: Practice Owner, Injector, Practice Admin, and Front Desk.
We categorized our personas by Business Type, Practice Employee, and Patient. For the initial navigation design, we focused on the practice employee's daily duties. Through interviews with existing users, we developed four key personas: Practice Owner, Injector, Operations Overseer, and Front Desk. This approach provided valuable insights into each individual's needs for specific data and features.
We categorized our personas by Business Type, Practice Employee, and Patient. For the initial navigation design, we focused on the practice employee's daily duties. Through interviews with existing users, we developed four key personas: Practice Owner, Injector, Operations Overseer, and Front Desk. This approach provided valuable insights into each individual's needs for specific data and features.
This approach provided valuable insights into each individual's needs for specific data and features.
Practice Owner
Practice Owner
Practice Owner
Practice Owner
Injector
Injector
Injector
Injector
Practice Admin
Practice Admin
Practice Admin
Practice Admin
Front Desk
Front Desk
Front Desk
Front Desk

Our
Approach

To explore the app's potential, our team needed to establish specific lenses, each offering a unique perspective on user interactions. Through customer journey analysis, we identified four key pillars: Sell, Differentiate, Analyze, and Administer. This framework allowed us to easily align default persona roles with their corresponding feature sets.
We categorized our personas by Business Type, Practice Employee, and Patient. For the initial navigation design, we focused on the practice employee's daily duties. Through interviews with existing users, we developed four key personas: Practice Owner, Injector, Operations Overseer, and Front Desk. This approach provided valuable insights into each individual's needs for specific data and features.
We categorized our personas by Business Type, Practice Employee, and Patient. For the initial navigation design, we focused on the practice employee's daily duties. Through interviews with existing users, we developed four key personas: Practice Owner, Injector, Operations Overseer, and Front Desk. This approach provided valuable insights into each individual's needs for specific data and features.

Sell

Sell was tailored specifically for the front desk persona. Their main job is handling checkouts, so we knew owners and admins wouldn't want them to have deeper access to the application. We heard routinely that the main metric to improve here would be checkout time.

Sell

Sell was tailored specifically for the front desk persona. Their main job is handling checkouts, so we knew owners and admins wouldn't want them to have deeper access to the application. We heard routinely that the main metric to improve here would be checkout time.

Sell

Sell was tailored specifically for the front desk persona. Their main job is handling checkouts, so we knew owners and admins wouldn't want them to have deeper access to the application. We heard routinely that the main metric to improve here would be checkout time.

Sell

Sell was tailored specifically for the front desk persona. Their main job is handling checkouts, so we knew owners and admins wouldn't want them to have deeper access to the application. We heard routinely that the main metric to improve here would be checkout time.

Differentiate

We envisioned Differentiate for the Practice Admin. This role would provide access to features like catalog management, membership programs, and rewards systems. These tools are essential for helping practices stand out from their competition.

Differentiate

We envisioned Differentiate for the Practice Admin. This role would provide access to features like catalog management, membership programs, and rewards systems. These tools are essential for helping practices stand out from their competition.

Differentiate

We envisioned Differentiate for the Practice Admin. This role would provide access to features like catalog management, membership programs, and rewards systems. These tools are essential for helping practices stand out from their competition.

Differentiate

We envisioned Differentiate for the Practice Admin. This role would provide access to features like catalog management, membership programs, and rewards systems. These tools are essential for helping practices stand out from their competition.

Analyze

Primarily designed for the Owner, this section focuses on data-related aspects. It provides business reports and actionable insights, accessible from both inside and outside the office.

Analyze

Primarily designed for the Owner, this section focuses on data-related aspects. It provides business reports and actionable insights, accessible from both inside and outside the office.

Analyze

Primarily designed for the Owner, this section focuses on data-related aspects. It provides business reports and actionable insights, accessible from both inside and outside the office.

Analyze

Primarily designed for the Owner, this section focuses on data-related aspects. It provides business reports and actionable insights, accessible from both inside and outside the office.

Administrate

A section for tasks that don't require daily attention. Here, you can manage team members, order Clover devices, update your business address, or access your account information.

Administrate

A section for tasks that don't require daily attention. Here, you can manage team members, order Clover devices, update your business address, or access your account information.

Administrate

A section for tasks that don't require daily attention. Here, you can manage team members, order Clover devices, update your business address, or access your account information.

Administrate

A section for tasks that don't require daily attention. Here, you can manage team members, order Clover devices, update your business address, or access your account information.

Validating

Our Customers

Our Customers

Before investing in this endeavor, the company needed conclusive proof that our early concepts resonated with users and significantly improved the findability of key features. We achieved this by comparing the existing navigation against our conceptual design and measuring user response. The results were compelling: 80% of all external participants preferred the new navigation and found it more user-friendly.
graph
graph

Navigation

Navigation

navigation
navigation
navigation
navigation
With proper validation in place, it's time to discuss the team's solution. The design features a streamlined navigation experience using a menu icon in the top-left corner. Tapping this icon reveals a side panel with links to all key features. The panel is organized by categories, with corresponding features listed beneath each. This structure is tied to user permissions, allowing easy show/hide of features based on access level. Additional benefits include reusability for both responsive design and application to our internal toolset and patient app.

Design Tokens
and Reviews

Design Tokens and Reviews

Design Tokens and Reviews

With multiple features in development, our team leveraged Figma's branching system. This approach allowed us to design in parallel while maintaining a single source of truth. When a feature was ready, designers could request a review, leading to either approval or change requests. This shift enabled us to transition our design system from component-based to token-based. Tokens gave us the ability to connect directly to the engineers' codebase through JSON. This JSON was sent to Style Dictionary automatically output the values into TailwindCSS.
tokens
tokens
tokens
tokens

Engineering
Handoff

We divided our implementation into five smaller milestones. Each milestone addressed a specific user interaction need, allowing us to build and validate each step quickly. During each phase, we handed off final visual designs along with interaction diagrams that precisely specified the required changes.
hand off
hand off
hand off

Results

Throughout this project's lifecycle, our team successfully navigated numerous challenges. We confirmed our initial navigation assumptions, implemented design tokens, and established a formal design review process. Additionally, we launched key features including Rewards, Memberships, and Insights. These enhancements culminated in a significant 22% boost in total revenue.
Patients
Patients
Patients
catalog
catalog
catalog
Navigation
Navigation
Navigation
Rewards
Rewards
Rewards
Reports
Reports
Reports

PROJECTS

Opul
Gopro
Aspriation
Unify

ABOUT

About

PROJECTS

Opul
Gopro
Aspriation
Unify

ABOUT

About