MicroSun Companion App — UI/UX Project

This is an article describing my process in detail. For a shorter visual presentation of the project, you can see the project presentation on Behance.

This project is a fictional concept project made to built by skills as a designer and to practice conducting user interviews. I enlisted a friend to play the customer, SunInc, to have a more realistic feeling of working within constraints.

Project Challenge statement

MicroSun is a small portable artificial sun lamp made by the Danish startup SunInc. The lamp is used to battle winter depression. The lamp can be powered by kinetic energy, so the more you move, the more your MicroSun shines.

The overall objective of this project was to design an inspirational companion app for the MicroSun lamp. The app must live up to the following requirements: • It must motivate the user to use the lamp to get sun therapy. • It must motivate the user to stay active to generate power. • The styling of the app must comply with the MicroSun style guide. • The app design must be based on thorough user testing.

The high fidelity prototype on which the final version would be built should be delivered within 7 days.

The project challenge statement
Brainstorming session

I started the project with a brainstorming session, writing down initial ideas about the user flow and evaluating how to implement the key brand values: portable (for the user on-the-go), energizing and joyful.

I then moved on to make rough sketches of the expected user flow and flesh out the concept. Apart from searching for the app in the app store, there are three entry points to getting the app: 1) by scanning a QR code on the package, 2) via an app store link on the web page, 3) and a QR code on posters and postcards. When using the app for the first time after install, you go through a sign-up flow or you can sign in if you are already a user. Users can add reminders and access statistics for the use of the MicroSun as well as for the power generated by the user’s movements.

Using the Marvel app, I created a rough clickable prototype with the sketches. I took my prototype to a test group of people to examine if the user flow worked as anticipated and if the overall concept was working. An initial key finding was that the content of the main page did not interest the users. A user pointed out that reminders would be an essential functionality for her, and it should, therefore, be easier to access. During the interview, I also noticed that the battery indicator in the top right corner created confusion. When I inquired about it, one user said it was too similar to the one found on an iPhone and placed too near it.

The ideation phase

Based on the sketches and the information gathered in the user interviews I created wireframes for another prototype in Marvel.

I tested the wireframe prototype on users to find out if the structure of each page worked and if the alterations to the concept had been successful. Now I got a positive reaction to the main page. One user requested that it should be possible to set goals. Another user requested that the statistics page should use the information gathered more actively.

Wireframe prototype

I created the final high-fidelity prototype based on my research and the multiple iterations. The overall focus of the design was to follow the guidelines from the brand development guide.

To implement the brand’s key values, I focused on three overall concepts derived from them.

For the value portable I focused on creating a user experience, which is well adapted for the user on-the-go by making it: 1) easy to navigate including possible to use with one hand 2) possible to get the key information at a quick glance, 3) work offline.

The value energizing I build up around the concept of including motivational content like reminders, progress reports, visual representations of user data and so forth.

The value joyful is conveyed through a focus on brightening the user’s day. This focus is to be created in two ways: 1) inspirational content like helpful tips and articles presented 2) inspirational design using a colorful palette and inspiring photographs.

I assigned the brand’s primary color scheme — pink, green, yellow and blue — as defined in the brand development guide, to the different elements of the app to ensure clarity. I chose to use the pink color for the primary call to actions. The green color was assigned to elements pertaining to power and energy. The yellow color was used for items concerning the use of the lamp and tips about sunshine. The blue color was used as an overall tone of the app and for highlighting content.

In the brand’s style guide the primary font is Avenir, which was also used as the primary font in the app. The style guide’s secondary type was Braggadocio, which is hard to read on small screens and which was, therefore, not included in the app design.

High-fidelity prototype flow

I tested the high-fidelity prototype on users, and it was generally positively received. However, two major concerns were pointed out by some users: 1) The pink color used for the primary call-to-action button looked too close to red (one user actually perceived it as red), a color which most users saw as having negative connotations when being used in an app that didn’t have a red color scheme. 2) The overall color scheme is too bright and white. Since the app’s primary goal is to motivate people during the winter times, it means that the app will mostly be used in a dark environment like on an overcast day or before sunset. However, the app’s current color scheme would be too blinding if used in such a setting.

Some other minor issues also stood out. There was again some confusion about the battery indicator from some of the users. Multiple users also requested a short introduction when using the app for the first time. The first user requested a streak counter. The following users were asked if they also wanted a streak counter and they all confirmed that it would be a nice feature.

High fidelity prototype

Final App Design

In the final app design, the streak feature and an onboarding screen were added. The battery indicator on the main page was removed as an experiment to test in the future if the users will miss having it there. The information is still available to the user on the settings page (only one click away) and the assumption is that most users will use the battery indicator on the lamp more than in the app. If this assumption proves false a new battery indicator will need to be designed at a later stage.

The use of the color palette was rethought to ensure that the app no longer appeared too bright while used in a dark setting. Three gradients were created to add colored backgrounds that would also set the mood for the app. With the darker backgrounds, it was now possible to change the primary call-to-action color to yellow. The pink color was now only to be used for motivational content in the daily feed and only when used in a way that more clearly made it look pink instead of red. The blue color was now also assigned to the new streak feature.

The customer disliked that Braggadocio was not used in the app design even though they did understand the reasoning behind the decision. The font was, therefore, added to the app design but only used to work as an eye-catching contrast in the sign-in flow and in the daily feed.

In the following images, you can see the final design.

The project was an interesting exercise in working within constraints. Having a 7-day time constraint on getting from idea to high-fidelity prototype ensured that my work stayed focused. Testing my concepts and ideas on users made me understand the product better and taught me a lot about what to consider for a better user experience. Following the brand’s style guide proved more challenging than expected and some creative solutions were at times required to find the right balance between meeting the customer’s wishes and the needs of the users.

In the future work with the app, I will look specifically at testing accessibility and on how the app functions when used on-the-go to ensure it gives the optimal user experience. Ideally, the app should work to support the MicroSun lamp, and help drive increased usage of the product with helpful tips and inspirational nudges. This ideal will also be tested and the design will need to be adjusted if the goal is not met.

Maria Hagsten Michelsen

Written by

Graphic Designer / Illustrator / Regex Crossword Writer / Productivity Nerd / http://maria.michelsen.dk/