Accompany.io
Accompany.io is a startup that's working on company culture, a current and relevant topic. I was a little bit in shocked the first time I saw their product. Even though the content was great their brand, their user interface and user experience needed a lot of attention.

I've since helped them achieve small steps into establishing their brand language, their design system and some of the core user flows.
Accompany.io has three products you can start using with your team to improve your culture and get to know more about each other.

Each product is quite different so we thought it was good to differentiate them visually. We established sub brands for each product with their own colors and illustrations.
Some of their products are used both online and offline. For instance, they can start using a product to prepare for an offsite and then evaluate the results during the offsite itself.

This disconnect between the offline and online world made us realize we needed to make sure the user knew where they were in the process and what they should do next.

Our solution was to present the information in a wizard like interface (like installing a software) with clear indicators of what happened and what's going to happen. This construct helped our users build their mental models and run through the exercises without feeling confused on the next steps.
We use a card-based system throughout the app.

Depending on what we wanted to communicate to the end user, we used different type of cards.

Certain cards, like call-to-action cards are very light in terms of text and are mainly used to guide the user to his next logical step. For instance, when a user comes back to the dashboard and wants to close an exercise.

Other cards like info cards or text cards are used to communicate a larger amount of information to the end user. A typical text card we use is to explain how to get started on a new exercise. Different types of cards can coexist on the same page.
We documented each of the UI components that we designed as we were designing them. That way we could easily re use some of these components and have the basis for our style guide. 
We included email templates style guidelines in our style guide.

You may also like

Back to Top