Empowering recovery with design

UX • UI

SO-B is reshaping drug rehabilitation testing. No more long waits, in-person meetings, or costly tests. They offer a modern solution for centers and clients, giving them back their time and freedom.

This innovative solution combines both hardware and software components. My role encompassed designing the UX and UI for the rehabilitation center platforms and the testing software for clients.

The problem?

Current methods are costly + time consuming

The current method of client drug testing is costly and time-consuming, burdening organizations as well as people in recovery. An efficient, cost-effective alternative is imperative.

My solution?

Remote drug testing.

A win-win for everyone.

A remote drug testing software that seamlessly integrates with hardware to increase speed and personal accountability. This targeted solution caters to treatment centers and individuals in recovery.

My role

Project planning & research
Wireframes + High fidelity mockups
Work with development to implement

Timeline

May – July 2020 (3 months)

Team

1 designer (me)
2 developers (frontend + backend)
2 Product Owners (SO-B)
1 Project Manager (Applied Design Corp)

Tools used

Sketch - organization, research, designs
Zoom - communication

My ux design process

Understand the problem

Explore ideas

Final design

Keep reading —-

for a deep dive into the case study

STEP ONE

Research + understand the problem

Interview Product Owners

I conducted interviews with the product owners about their product, what they were trying to accomplish, who it was for, and how they were planning to get the product to those people. I identified four areas that I needed to stay focused on while designing.

Treatment provider needs
Client needs
Software + hardware needs
MVP flows

We decided to begin by focusing on the clients since they were going to need special hardware in addition to the software. I created a Client MVP list for the web portal and shared this list with the Product Owners.

2. Client User Persona

We wanted to first focus on the client user since they would be using the specially designed and created hardware. Therefore I explored the client user persona.

STEP TWO

Organize information + explore solutions

User Journey

With the business goal in mind, we needed to be sure that both users are able to complete the necessary tasks without hiccups. So, I sketched a user journey map to place important software steps as well as identify opportunities for improvement. I found several unnecessary steps while conducting this user journey. Therefore I ended up with a much faster and streamlined drug testing experience.

2. Wireframe flow

Using Figma, I translated my first sketches and user journey map into semi-low-fidelity wireframes focusing on both Treatment Centers and Client users. Then I showed the designs, layout, workflow, and possible icon to the Product Owners.
Based on feedback I received from the Product Owners I made a few alternations and moved on to created high-fidelity prototypes.

Below are the base wireframes for Treatment Centers I presented to Product Owners.

STEP THREE

Feedback + final high-fidelity mockups

Final designs

I designed full user flows for both treatment centers and their clients for desktop, tablet, and mobile devices.

Treatment Center flow

DESKTOP

Client flow