Designing an iOS Companion App

Looking for UI Inspiration

Kelly Phillips
RE: Write
3 min readApr 23, 2019

--

Onboarding

During the onboarding process of our companion app, we want our users to understand the simplicity of our product in a couple of easy steps. I wanted to find inspiration that used simple illustrations to show how each step and to keep the onboarding process on brand.

via Sudhan Gowtham
via Mixs
via UI8

I ended up going with a simple visual language, using the Humaaans library for assistance at this point. From there I incorporated our brand palette and allowed a new user to swipe through the “how to use” screens while still being able to set up a new account.

Set up page

For the habit set up page, I downloaded a few different existing habit building apps. The two I found the most inspiration in were Productive App and Done App. Productive broke down potential habits into different areas, and allowed users to write their own. I liked the fact that users could choose from habits that were given, as a way to make this process easier. Done had an extensive set up process for their habits, but I felt that this was necessary for the user. I also liked their UI more than Productive.

Productive App
Done App

Dashboard

The overall goal of this companion app is to allow users to view their progress at a glance, without having to spend large amounts of time interacting with it. I searched for inspiration in the form of a dashboard, where I could display the few aspects a user may want to view on the homepage. I wanted to keep it on brand, with the use of simple illustrations and pops of color.

via Grace
via Maciej Kałaska
via Maciej Kałaska
via Shahidul Islam Shishir

Control page

I wanted to give users the ability to control their product from the app, as well as give them a way to log progress when away from their desks. User will be able to turn their light on and off, change the color of the notification blink, turn the brightness up or down, and edit the alert frequency.

--

--