With O is an AI-driven health tech startup that builds on-the-fly yoga-inspired video exercises for individuals with stigmatized health issues. 

I was hired as a freelance creative director to develop the company's UX, plus design the UI for the upcoming MVP app. The app is intended to be a cross-platform SDK built in React Native.

My job was to develop the brand (platform, strategy, visual identity and name); visualize, direct and edit the immense video content (300+ videos); record and engineer the sound production (for 150 videos). These components affected the app design, so the stages were staggered to influence the aesthetic of the eventual MVP.

The timetable was hyper-aggressive: in 6 months, the app design and brand were to be completed; I was able to finish the project in 4 months (with very little sleep and lots of large cups of coffee). 

TL;DR

Objective:

• Design the UX & UI for MVP app

Challenges:

• Develop and build brand designs and strategy that would serve as the umbrella for the app design 

• Honour the needs and requests of the Research team  

• Develop UI tool kit

Deliverables 

• Branding and naming development

• Logo design

• Colour Palette

• UX design

• UI design

Branding and naming O

Starting with a branding questionnaire for the founders, I distilled the company's landscape, associations, audience and competition. The founders were keen on developing a holistic health company that was: 

1. Open

2. Caring

3. Friendly

4. Yet taken seriously

These core attributes became the underlying theme that I used to develop the name, build the brand platform and design for the initial MVP.

The founders and I spent a (long) day together in a naming exercise that was a hybrid/mash-up of Google Ventures branding exercise and a construct of my own, where the team was able to come up with a narrow field of (17) names to choose. We whittled it down to a name that I had conceived earlier in the day (during lunch tbh): O. Just the letter O.

Based on what I had gleaned from the branding questionnaire, the letter O meant a lot of things to me:

• Openness

• Strong, yet friendly and gentle

• Comfortable and comforting, like a hug

• Holistic — complete from beginning to end

Plus, it gave the brand a lot of room (much like the counter of an O) for a multitude of prefixes for marketing fun: Your Well-Being with O; Exercise with O; Health with O.

Logo Design

I retained the attributes and themes discovered in the initial fact-finding survey. I went through an exhaustive process starting with 100 designs, narrowed down to 5 and finally to 1. I did another round of fine-tuning the logo for legibility and optical refinement, plus a new series of refining the logo for clarity and visual polish.

Round 01

Round 02: Refinement.

Colour Palette

Another considerable task was developing the brand colours. Again, I used the brand attributes as the springboard for what the colours could mean. The founders wanted something current and contemporary, that could sit with their competitors, yet pop out in the crowd. As a health company, specific colours have meaning associated with that particular sector. Coupled with the brand themes, I was able to narrow the scope.

I presented a system that paired the brand attributes with colours and their general meaning (note: in Western culture — the company was based in Germany, but was a legal entity in the United States and was being built for that market). The two colours that were the most dominant were Green and Blue - 

Green:
Green is the colour of growth, fertility, health and nature. It is also the colour of wealth, youth and freshness. Soft greens are used for health, fitness or well-being. Green accented with blue as another primary colour will indicate energy and youth. It is a symbol of life, new beginnings, safety, fertility and of course, the environment. 

Blue:
Blue is harmony, peace, calm and relaxation. Using soft blue has a calming influence. Health and hygiene companies use blue to promote freshness and cleanliness. Blue is also used to promote trust and security. Blue is synonymous with peace, freedom, intuition, imagination. It also inspires us to be loyal, sincere, confident, and intelligent. 

Colour Presentation.

Final Colour Way with variations.

Also, I chose the yet-to-be-filmed yoga instructors outfit colours to be grey — heather contrasted with a charcoal/80% black. Any colour could sit on top of the videos, without competing for attention. This decision would be serendipitous when I started to develop the UI for the impending app (more on that soon).

UX Design 

The challenge of designing the UX for this particular app was building something that could be used by a large user group. The service was for a broad age group. It had to be gender-diverse — the founder and Chief Researcher, genuinely designed for everyone; ages 16-80; cis male, cis female, intersex, and trans individuals. In addition to an extensive onboard questionnaire, research needed baseline questions answered so that they could track progress and provide clinical evidence and feedback that the exercises were working.
Also, as this was a subscription-based service, we needed to present the information in a way that would build trust every step of the way. As this app is a new kid on the block, offering a service that asks personal questions to develop personalized and unique exercises for stigmatized health-issues, trust-building was essential.

Hired for the initial build phase, and not for the subsequent testing after the release, I came up with a simple solution that could be developed by UX designers in the future and would act as the bridge for the user and research: the O bot.

The O bot

In conceptualizing the feel of the app and service, I used the brand's core tenets and attributes as our foundational structure. I felt the best way to build a relationship with the user was to present as a friendly companion that was kind, slightly over-polite and a bit apologetic (like the generalized perception of Canadians — I had to sneak us in there somewhere). As the name of the company was with O, I came up with the O bot (like, Robot, but for O). The O bot asks questions, says beautiful things and makes terrible jokes.

UI Design

The Colour

Before Apple & Google decided to recently show the world what they had been building (dark UI), the lead developer and I decided that having accessibility as the tentpole for the app was paramount. I designed a stark grey background (65% black) that passed all accessibility tests, which allowed the colour palette to pop on top and make the typography stand out. An 80-year-old could see what the O bot was asking, but an 18-year-old would think that the look was fresh enough for them.

Also, the accessible grey matched my visual look for the yoga models in the videos we had shot the month before (as I mentioned). My design rationale: a subtle dark grey works with everything (look at this site).

The Framework

My decision to make the O bot the conversational centrepiece of the app meant that the bot needed a defined area to ask questions and the user (research and myself preferred the term "participants"). I built a structure that split the screen into 4 sections: 

01 had a persistent logo that could (eventually) offer a function if needed, but initially a design decision based on brand reinforcement; 

02 was the O bot's questionnaire area; 

03 was the field for the participants (or "user") response;

04 offered pagination dots for the MVPs settings menu. The area was designed for a future toolbar area for nutrition, historical data, exercise calendar, and community tools, as the service grew.

Typography

I chose a typeface with openness and a friendly demeanour in mind; again, I used the brand attributes to determine the look and feel of the face. The open counters and shape were necessary, as was a large x-height for easy on-screen viewing (in addition to being essential for O's older users). I also wanted something with a bit of character and charm, but not overtly, as the typeface was inherently and secretly Canadian. I settled my scope on Latinotype's Aestetico.

Aestetico is a versatile face with hand-drawn characteristics, open counters and a generous x-height for excellent on-screen legibility. An excellent example of the attention in detail is the bowl of the two-story "a" (which also has a unique little tail in the Regular face) and "g;" not entirely geometric and a little quirky, which provided me with the humanist touch.

I wanted O to feel like a conduit between people helping people. A geometric face would have felt cold. Besides, the participants (aka "users") we're going to read a lot of stuff during their onboard. I wanted the font to appear as friendly as the O bot itself. 

Process.

Final UI Design.

Back to Work

prev/next