home / Companion App

New Companion
App. Stay safe.

Companion New App
THE CONTEXT

Back in April, while I was in a small trip to Berlin, I received an email from Jake Wayne & Lexie Ernst, both CO-CEO of Companion App, they were asking for a redesign of their current app.

I had enough experience designing digital products, and also worked a lot with maps -I love maps-, and that’s exactly how Jake and Lexie found me.

Typically I would’ve stuck to the plan, and would not accepted extra work, but I felt connected with the idea, and simply decided to at least have a chat. After some emails from bars and coworking spaces in Berlin, I came back home and decided to send a quick proposal redesigning the landing page. Nothing too deep, just an "alignment test" something quick to show my design vision and thought process. 

Companion New App
Quick proposal redesigning the landing page, edited with final screens.

After sharing it we had a chat, and we were very aligned, and started to work in scheduled sprints. At this time I was thinking that it was probably my first time working for a startup in the States, and Hey! It was cool!

Goals of the redesign

According to Jake & Lexie, there were several objectives for the mobile app redesign.

Companion lets you reach out to family, friends, or your public safety department to have them keep an eye on you as you travel late at night. So helping users in the process of selecting a Mode of Transportation in an easy way was the main goal. We want to make it easier for people to browse the app, navigate from feature to feature with as little friction as possible. We also wanted to drive usage of important features, like ‘Wander Mode’, that weren’t being utilized as much as we want them to be.

Companion is a complex app, a lot happens between the start and end of a trip. I was called to explore creatively and design focusing on the first part.

How it works

How Companion works, and the design challenge focus area.

INSIGHTS

I helped identify the needs and pain points of companion users.

Once I have a good idea of the general feature set, my next step is to create a point of view and try to understand the problem, and If I’m going to solve a problem, I want sufficient information to solve it. I also want to work from a position of being informed and confident. So, I tested the app, had some discussions with Jake and Lexie, and wrote tons of notes from user flows to UI decisions.

How it works

User needs help to detect problems


Canvas Proposal
I sketched out our users' ideal flow for selecting transportation, simply by completing a trip.


I also conducted a survey with a set of questions related to tasks. Surveys are a handy way to learn about customers. I started simple with clear goals about what we wanted to learn, and had both quantitative (measurable) and qualitative (how a customer feels) data, both provided a lot of insight to learn about task success, and to weigh the pros and cons of each approach.

Survey results
Survey results provided lots of insight.


One of the primary issues that popped out was that people easily get confused during the process of changing between transportation modes during a trip, due to lack of understanding of interaction patterns in our current product.

DISCOVERY

In the light of our insights my task was to lead design exploration towards a light and trustful experience.

Based on insights, we reshaped our transportation selection, to better engage our users through their trip journey.

Canvas Proposal

Work in progress. Different approaches testing user flows and navigation patterns.


Then concepting began. I developed three different versions of the app to test – one with a conversational approach (Option A), one with more options (Option B), and one very minimal options (Option C). I tested these concepts to get perspective and scope for each version.

Three original prototype options (A, B, and C from left to right) for the Companion app redesign
The Proposal

Redesigning UI, User flows and Interaction patterns.

Based on reviews, Option C version was identified as the winner. I then refined interactions, navigation, and visual design of this prototype, and made sure everything would work consistently across iOS and Android devices.

Map and Colors

Refreshed colour palette & map style for Companion.


Main proposal was to unify transportation bar into a single descriptive and always-visible icon. The icon needs to be tapped to show all the different modes. User research gave us the clue that Walk Mode can be default option. Making transportation modes a list is also an scalable approach, we can add more modes in the future and the design will not break.

Before & After. Before, users need to drag the map to show transportaion modes. After, transportation mode is always visible, and with a single tap you can select / change between different modes.

We were especially looking to see how users responded to the new approach to change transportation. In general, it was well received. I continued to refine the experience so that the trip journey were clearer.

After some final explorations and tweakings I ended up with a very simplified user flow.

Transportation modes user flow.
Wander Mode

Feature with lack of understanding. Is too hidden? Not as obvious?

To improve "Wander Mode" feature, I focused on UX Writing and improving UI. The custom icon describing the feature was not descriptive, and terminology was not as clear as it should be. The term "Wander mode" seems to be related to user action, and there is a wide variety of them. "Exercise mode", for example, would be too much limited. So why don’t we try to describe the feature? Maybe associating with time: Time based, Timer… Also we can use UI decisions to inform, adding a descriptive icon and visually changing the row. This proposal was well received, and had positive impact.

User research gave the clue of frequent destinations. Home and work were the most frequent places, by a big difference, so I included two new options for this most used places.

Before & After "Wander Mode".
Adding chocolate 🍫

Companions for building trust

How can we improve the “safety feeling”? While redesigning the app I had to study all the features, and a lot of questions surrounded me. But the main one was to improve the “trust feeling”. Before the redesign, companions were represented with an initial and placed at the bottom of the screen, I ended up giving people, our Companions, more importance showing their faces, and using familiar UI patterns, to reinforce a sense of safety, trust, and familiarity.

The look and feel of the final app redesign.
Key learnings

I learned a lot throughout the redesign process about design best practices. Some of the key takeaways were as follows:

While freelancing across different timezones I had the opportunity to learn a few things. Focusing on Transparency, Documentation, and Communication is the key. Transparency. Inform regularly on you current status. Documentation. Document all your design decisions, for small and insignificant that it looks, sharing it can have unexpected results. Communication. It has extra efforts to explain your work while in different timezones, but regular communication is crucial, we are human after all.

All of this explorations were done in weekly sprints during very few weeks. At that time Lexie and Jake were building a team in NYC, and felt that they need to put design on hold for the time being, and put all of their energy into the product fixing up bugs and tweaking features. 

Few weeks later I was watching a new show called “Planet of the Apps” and how big my surprise was when I watched Jake and Lexie pitching for the project.



Planet of the Apps
Jake & Lexie on air in “Planet of the Apps”


And they were selected! Wish all the best guys!