The "Abstract 3D" days of light explosions, distorted NURBS, and Photoshop + 3D fun

Mikael Staer Nathan

001 intro

I am a multi-disciplinary designer with a focus on digital product design and UI/UX. My work also involves graphic design, illustration, copywriting and web development.

002 details

location Toronto, Canada
currently Head of Design at
social TwitterRead.cv

003 bio

My career in design began at an early agetwelve!, when I discovered the creative possibilities of the internet and began experimenting with websiteswhen Flash was king, CSS was for styling links, webpages were built with tables and Javascript was a dark magic called DHTML. and digital art. I taught myself how to code and quickly became fascinated with making things people could interact with and use. Being able to build my ideas opened a whole new world for me and I soon created my first producta CMS for design/art portfolios – still in use today!, which had me conceptualizing and identifying opportunities, designing interfaces and interactions, coding front & backend, crafting a brand and more. This cultivated the multi-disciplinary skillset and holistic approach that I practice today.

I believe designing is communicating, and as such, don’t see limitations in mediumdesign is design is design. The principles and fundamentals apply regardless of the output. I like to move between idea and implement­ation, physical and digital, visual and verbal. Exploration and curiosity are driving forces in my practice.

I studied Graphic Design at OCADU in Toronto, and with what became an extended exchange semester, completed my Master’s in Visual Communication at KADK in Copenhagen, Denmark.I lived in Copenhagen for six years, exploring my Danish heritage and finally becoming fluent in the language.

When I’m not designing, I can be found swimming in Lake Ontario, cycling the high roads of Halton Hills, and running along Lakeshore Rd, chasing time as a triathlete.

Mikael Staer Nathan

Design, UI/UX, Web dev.

↑ About
↓ Featured Work

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: Founding Designer
  • · 2016—2018
  • · Acquired by Telus
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.
Screenshots of the old onboarding flow and home screen.
Lots to improve: Lack of hierarchy, faint typography, form-ception...

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 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.

A web app for athletes to quickly and easily create professional websites, with unique sport-specific features.

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

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

Preview of the editing experience, showing my own G11 page.
  • 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
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.

Brand & Identity

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.

Promo Imagery

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 people to buy/use this thing?" 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.

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

"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.

↓↓

Album cover for Danish electronic band, Belle Ville. 2012.

Experimental typeface, Solar.

Dear City

Dear City allowed people to write to their city, about their city. Founded in 2009, under the name Kære København ("Dear Copenhagen"), it expanded first to a few cities within Denmark, then by popular request to other European cities, and finally in 2013, to the rest of the world.

When it launched, the mayor of Copenhagen, Frank Jensen, said,
‟I believe Kære København will create another important space for communication between the citizen of Copenhagen and the city council.”

Indeed, the first expansions to other Danish cities were commissioned by those municipalities and used to gather feedback from their citizens.

It was nominated for an Index Award in 2011, and featured on The Atlantic, Strombo, Bettery Magazine, Fast Company and had a front page feature on the Copenhagen Metro weekly mag.

In collaboration with Philip Battin.

Points, experiment in linescapes · NFT · Buy on Rarible