Mikael Staer Nathan

Mikael Staer Nathan is a designer from Toronto, whose work focuses on digital product design (ui/ux), graphic design & web development.

Looking for new opportunities – hire me.

Work — Case Studies

Canadian telemedicine service providing care in family medicine, mental health and diet & nutrition.

  • · IOS, Android Apps
  • · Desktop web app
  • · Website design & build
  • · Branding
  • · Illustration
  • · Print & Digital marketing materials
  • · Role: Design team of 1
  • · 2016–17
  • · Acquired ☆
Akira
Close

Project

Better Onboarding = More Patients

Problem

Paying subscriber numbers sucked! App downloads and account creation looked good though, and existing patients loved the service – we just needed to do a better job of proving our value to new users.

Solved

  • Overhauled the onboarding flow
  • Reworked the home screen
  • Removed barriers for users
Mockup of a smartphone showing the Welcome/Intake screen; the first step in onboarding for the app.
Mockup of a smartphone showing the Home screen of the app, with the currently on call doctor presented at the top and a list of available services below.

Outcomes & Accomplishments

Engagement++ Lowered time to respond, fewer abandoned chats, more questions/deeper conversations.

Growth New company role created (Intake Coordinator) and went from 1 to 2 doctors on-call/day, hours extended from 5pm to 11pm.

5x Conversation rate through the roof. Pretty much saved the company.

What we started with*

  • 6-part questionnaire form
  • When finally done with that, users were met with an overloaded homescreen
  • Still had to talk to a doctor to actually pay for a plan and validate ID
  • And then finally, after all that, they could receive care.

* I did not design this. It was the result of a pre-seed “MVP” design-everything-at-once sprint.

Users said things like: What services do you offer? Is this legal? Sign up takes too long. Why is this app asking for my health card? How do I get help?
Through talking to users and hallway testing, it was clear there were many issues.
Users said things like: What services do you offer? Is this legal? Sign up takes too long. Why is this app asking for my health card? How do I get help?
Through talking to users and hallway testing, it was clear there were many issues.
Screenshots of the old onboarding flow and home screen.
Lots to improve: Lack of hierarchy, faint typography, form-ception...
Compilation of various process sketches.
I do a lot of preliminary work on paper

A Path Forward: Home Experiments; A/B Testing

Compilation of various process sketches.

Two ideas

(A) Give them all the information
(B) Get rid of the forms, let them experience the real thing

The two versions created.
(A) Provided access to all kinds of details. But with so many buttons available and the high-commitment-required "Start Consult" button, most people were unable to move forward. (B) Put users straight into a chat with a doctor, no forms, no waiting. It was a landslide victory with immediate success. Thank you version B!
  • Android app was already hybrid web view, so I proposed testing variations without the need for complex dev work
  • Aimed to address most common user questions and concerns
  • Ran A/B test for one month
  • Tracked all interactions so we could make an informed decision

We realized immediately that variant (B) would lead to a much more manual process for the doctors, requiring them to collect patient details one question at a time. But, it allowed them to establish rapport, and people felt they were receiving care right away.

The result was an instant and sustained spike in paying users. But it needed some finessing...

With a clear winner in hand, I massaged the concept further, using feedback from medical staff and users.

Some of the sketches from refining the designs. Questions that users still had at this point included: Am I speaking to a bot? I have to pay? Is this secure?

New Flow, New Role

The new flow: 1. Account Creation 2. Intake Coordinator 3. Doctor/NP
  • With so much new traffic, medical staff were overwhelmed!
  • I looked to real life process in a medical office, and so, the Intake Coordinator role at Akira was born.
  • IC responisiblities: triage – vet, verify and onboard new patients.
  • Much more human and natural ✓
  • New Home screen + service list now made more sense once onboarded
The new flow: 1. Account Creation 2. Intake Coordinator 3. Doctor/NP
The initial message sent by the Intake Coordinator: Hi Mikael! I’m here to help you get signed up with a membership plan and ready to use Akira. I’ll answer your questions and gather a quick health history. First, what are you looking for help with today?

People don’t read—or do they? We found people actually read this first message; probably because of the less formal text message format.

Interestingly, this chat-based onboarding took much longer to complete than the form-based one, but people responded well to the bespoke feel.

Other Improvements Made

Along with a much improved onboarding, I updated other parts of the app including various chat elements, secondary screens and copy.

Chat Cards: Sometimes actions need separate flows or screens, like capturing credit card details. I designed buttons/cards that would be inserted into the chat and activated by the user.
Two buttons: Start a Chat vs. Start a Consult
So much discussion on this one. Eventually, “Start a Consult” won. I always favour calling things what they are, especially when there is an existing, strong mental model around them. KISS ftw.
An example of a service screen, this one showing Family Medecine, with a description and links to details about the service.
One of those details is the What Can We Do? screen, in this case, covering things like prescriptions and referrals.
The Family Plan screen, an example from the plan purchasing flow, showing price, description and features included.
I made an effort to incorporate the brand voice as much as possible throughout the app, making use of our illustrations, colours, typography and diction. I firmly believe in a consistent experience from marketing to product.
 
I made an effort to incorporate the brand voice as much as possible throughout the app...
...making use of our illustrations, colours, typography and diction. I firmly believe in a consistent experience from marketing to product.

App and design agency for athletes and the sport industry, providing tools and services to create a professional image.

  • · Responsive Web App
  • · Website design & build
  • · Branding

Project

Websites faster & easier than your 5k pb

Problem

Crafting a professional online image is difficult, websites are complicated and time-sucking endeavours. Athletes prioritize training first and things like websites last – they don’t have the time, energy or knowhow, and have been burned by tech in the past. Even world champions and Olympic medalists have sub par online destinations.

Solved

  • Extremely quick, simple setup & updating
  • Clean, professional look on all devices
  • No designing or coding required
Skiier doing a crazy aerial trick: Your last blog post is from September. 2016
Mountain biker on a wall ramp: Awesome photo...but that's not your sponsor anymore.
Tennis player ready to receive the ball: Your super simple, couple of clicks, drag and drop, stylishly bold, single page website.

Outcomes & Accomplishments

MVP Went from initial idea to first paying user in six weeks.

Success Users include Olympians, world record holders, top ten finishers at world champs and Pan Am Games (as well as amateurs).

$$$ Profitable (small numbers but in the green!)

Responsive Web App

The settings and customization panel in the editor, allowing stylistic changes and other site settings.
Preview of the editing experience, showing my own G11 page.
Not placeholder! When not pushing pixels, I am swimming, biking and running in the pro ranks of middle-distance triathlon.
  • Fixed layouts with content hotspots keeps things simple and focused: fewer decisions to make means less headache.
  • WYSIWYG: No abstractions, edits are made directly on the page itself.
  • Customizing fonts, colours and other settings is very straightforward.
  • Olympic Games London 2012 1
  • Olympic Games Rio 2016 2
  • Olympic Games Beijing 2008 6
  • Olympic Games Athens 2004 19
  • World Series Championship 2010 2
  • European Championship Baku 2015 1
  • World Championship (U23) 2005 3
  • World Championship (U23) 2003 3
  • World Series Montreal 5 Olympic Distance
  • World Series Hamburg 8 Sprint Distance
  • World Series Hamburg DNF Mixed Relay
  • Grand Final, Lausanne 10 Olympic Distance
  • World Cup Tongyeong 5 Sprint Distance
  • World Cup Miyazaki 4 Olympic Distance
  • World Series Montreal 5 Olympic Distance
  • World Cup Lausanne 1 Olympic Distance
  • European Championship, Glasgow 2 Mixed Relay
  • European Championship, Glasgow 1 Olympic Distance
  • World Series Hamburg 8 Mixed Relay
  • World Series Hamburg 4 Sprint Distance
  • National Championship 1 Sprint distance
G11 Highlight: the results table. Creating something like this on other platforms is nearly impossible. Flexible formatting and works for any sport.
  • G11 pages are focused on the essentials:

    · Results
    · Social Links
    · Sponsor Logos (that are linked)
    · Images + Text

  • Page layouts are purposely designed to be content-light, functioning more like an athletic C.V.
  • And provide just the right amount of info & personality.

Branding

I wanted Group Eleven to look energized and bold, and feel inspired.

Logo

BT Brik Xl By Burntype

Colours

Deep Sport #081D19 R8, G29, B25

Flare #FF2E00 R255, G46, B0

Electricity #9FFF03 R159, G255, B3

 
 
 
 
 
 
 
 

Typography

Example of large hero headings.

Acumin Pro By Robert Slimbach

Example of other heading styles and body copy.

Behind the Scenes

Some thoughts, musings and process behind developing the project.

Compilation of process sketches.

The Idea I wanted to use Group Eleven as an exercise in product development – putting to use the lessons I have learned throughout my career.

I also wanted to challenge myself to create something that people (and a particularly stingy audience) would be willing to be pay for.

Validation Having a great idea and ability to build is one thing, but does anyone actually want it?

What I posted to Instagram: Group Eleven in big text, subheading 'Websites for Athletes, Soon' and a prompt, 'DM for beta'. Background was a photo of myself on the bike racing a triathlon. I promised myself I wouldn't build anything unless I had strong signals from my target demographic. I have nearly 800 followers on Instagram, most of them athletes. I posted a single image to my stories with a prompt—DM for Beta—and required a minimum 10% conversion within the first 12 hours in order to proceed.

Approach to Building: MVP / MAP Design and build only with strong signals and validation. Go manual as long as possible: no automation/abstraction until absolutely necessary.

MVP / MAP means, "What is the minimum that needs to be built for this thing to capture interest?" Depending on the audience, that may be smaller or bigger. For G11, it was bigger, as the audience is non-technical and would not do well with less-than.

I favour a SWOT-style analysis that looks at excitement/interest around proposed functionality, with a demonstrable need or desire.

For example, I added video support because it was easy to implement, allowed greater creative expression, and brought a champion athlete to the platform. Eventually, I built a more robust Stripe integration to handle payment card updates after multiple users' credit cards expired (woops!).

Naming From my notes, "Must be cool sounding but also look good typed out." LOL. Aesthetic to the ears and eyes.

"Group Eleven" is the periodic table grouping for gold, silver and bronze (copper).

Other names considered: Podium, Top Step, Aurum (gold), 79 or Seventy Nine (atomic number for gold).

No Blog The personal blog for athletes is mostly dead. Social is where it’s at for them (Instagram, YouTube). The blog format has been the default for years, but very few have the writing ability, dedication & interest to update regularly.

Nothing is worse than “Last Updated: 2 years ago”, and honestly, no one but your mom is reading that 2000 word race report covering your first bowel movement of the day to the post-race drive back home...

Remove the guilt and anxiety, and suddenly you've created delight.