Drinkless, an innovative new organization with the vision of building a global service aimed at helping people systematically reduce their consumption of alcohol.

What I did

-Collaborate with Drinkless team to lead design in iOS, Android app, and web experience.

-Work with product managers, designers, developers to build prototype and user research

-Research, build wireframes and design onboarding, user profile, dashboard, goal setting, lessons pages

-Design app icon, iconography, and illustrations, type system

The BRIEF

DrinkLess wants to develop an iOS and Android app for users around the world.

This will help increase the DrinkLess user base and offer a seamless experience for DrinkLess subscribers.

 

The team worked with DrinkLess to identify the highest priority design and

development items and to execute on those throughout the engagement. Priorities will be

determined by monthly prioritization sessions. The work includes the following: 

 

Sign In & Registration: A User will have the ability to login with existing

credentials or sign up by creating an account.

 

User Profile: An authenticated user can edit their information including name,

email, and photo.

 

Dashboard & Goal Setting: The Dashboard will allow a user to access their logs,

history of past lessons that they’ve previously completed and see what progress

they are making in the given week.

 

Urge Surfing: A user can utilize Urge Surfing in times of need until their urge to

drink subsides. This includes the Chatbox, the ability to watch a video or leverage

mediation exercises.

 

Lessons: An authenticated user will be able to navigate their lessons which

include completing questionnaires and the ability to interact with other

community users utilizing comments.

 

Forums: The application will link out to Raizlabs Responsive Web Experience to

allow the User to interact with Forums.

 

Push Notifications: The iOS and Android applications will support Push

Notifications to align with a marketing strategy that fits the needs of the DrinkLess

team.

 

● Analytics: Raizlabs will provide specific analytics through Google Analytics or a

similar service. This integration will be included to screen tagging for 5-10 events,

or more as needed.

 

And so much more. This is only a tentative list for the Raizlabs team. We fully expect that

during our conversations, both prior to, and during the engagement, newly generated

ideas will be added to the queue and delivered in priority order.

DISCOVERY PHASE

The project started with a foundation meeting. We talked about the project and tried to form up a general idea of what and how the team going to approach the design. Whiteboarding was the bridge that connected all designers, product managers, developers together.

The foundation meeting helped us define the brief and led us to the kickoff meeting. In this meeting we brainstormed and whiteboarded out the user flows and features.

We generated the information architecture that captures all key ideas from previous discussions. 

 

In each page, we also defined sub tabs and key stories.

 

We took this IA and presented it to the team and the client.

 

The purpose of the app was to stop the user's urge to drink so I thought of meditation apps like Calm which I was using a lot at the time.

WIREFRAMING

We took a step further to develop these low-fi wireframes. Personally, I think these low-fi designs are crucial. We want to get every one of the team to on board and make any changes necessary before diving deeper into the process. As a result, we took several meetings between design, development, product teams and the stakeholders. We went through many rounds and of course, there were debates and hot topics. These topics became objectives for the user tests later on.

Visual exploration

It's always fun to work on the visual part of the project. We explored colors, iconography, typography, layout, illustrations. I wanted the experience to be less like a therapy and more like a personalized experience. I asked myself how I can get the user to feel relaxed and feel less pressure when they open the app. When the user feels like they have the urge to drink, I want the app design to get them to a meditative state.

These are very early explorations of the UI. The home page was my first strike. I wanted the homepage to be able to capture all key info like their goal progress, next lessons and a quick button for the user to conquer the urge to drink.  We thought of using tickboxes, graph chart, photography, etc...

The feed page was second. This page made me think of a personal place for the users to express themselves. I wanted to use Serif as the key font to make the design feel multi-dimensional. The use of colors also makes each post unique to another. Iconography plays the role of gamification.

This app was designed for everyone. Men, Woman, LGBT, and many other minority groups. This UI was for the onboarding screen.

Illustrations were the primary graphics assets to make the app looks fun and uplifting. It was very fun and I really enjoyed doing this. 

PROTOTYPING

We created an interactive prototype using Invision and sent it out for user testing. The result came back very positive. We took the feedback and data then presented to the stakeholders. 

BRANDING

In my opinion, the product defines the brand experience. So we started with the product design, once we got enough data to validate the core values of the app we then looked at the brand design and started to define the visual language. We took the visual elements that we created already and used that as the foundation to design visual elements

THE RESULT

This work was one of my most enjoyable projects. There were very few opportunities in my career to tackle illustration, product design, UI, UX, and Brand at the same time. I love working on projects that create a positive energy that inspires others to live healthy and happy. 

  • Instagram - White Circle
  • LinkedIn - White Circle
  • Spotify - White Circle
  • Twitter - White Circle

I always love to hear great ideas so let's chat!

2020. Copyright by Vinh Tran | Vinhspiration