Yaga mobile app — from research to publish

Research and first concept

We started by taking the client's idea under the microscope and researched possibilities and paths we could have taken.

In the next step, we have done research on competitors' solutions and we came to an interesting conclusion that a similar mobile app doesn't exist on Czech and Slovak market. Only similar service Dog detective, which is well known and used in the Czech Republic, works only as a web app.

What we came up with in the first phase was the initial concept, that we introduced to the client and tuned it furthermore together.

Preparation of wireframes and interactive prototypes

The research phase continued by transforming our findings from the previous steps into wireframes. Starting with simple sketches, we verified our initial findings and then moved to complex wireframes and interactive prototypes of every part of the app.

For wireframes, we experimentally used Figma on this project. This decision saved us many hours later when we're preparing the interactive prototype and user interface. We're able to make the interactive prototype from the wireframes in a shorter time than usual thanks to Figma's extensive prototyping capabilities.

User testing and in–depth interviews

Based on the user flows, personas and wireframes created during earlier phases, we put together a series of scenarios covering the app's main use cases. Scenarios were written in a way future app users might face to help participants get into these situations. We came to the conclusion that 10 participants will get us relevant results. Then we searched for them among our friends and acquaintances based on defined personas.

We've invited participants one by one to our office. Testing was carried out in standard conditions. All participants tested interactive prototypes on smartphones loaded with Figma app. To better understand the user's behavior, we've recorded the device screen as well as sound and participant's face. All recordings were later used in the testing evaluation. In the testing room were, together with participant, an observer, who wrote down every little detail and a person, who gave the participant instructions.

In the second part of our sitting, we performed in–depth interviews, that furthermore clarified how would users behave when using the app. We also collected ideas for new functions.

Designing a brand that connects values of Yaga

Our focus was mostly on the key values of Yaga. We consulted them with people behind Yaga and also with participants of the user testing.

The result is a logo and brand, that connects four key elements — a collar, location, love, and a letter Y. We chose dark orange as a primary color as it describes optimism, friendship and success — values also important to Yaga. The logo is using Barlow as a typeface, which is, thanks to its slightly rounded corners, playful and professional at the same time.

The logo icon can be used as a mask for different textures or ornaments. One of the examples is a flag — this version can be used in promotional materials when Yaga decides to expand to a new market.

Friendly, yet serious design

Yaga's user interface arose hand in hand with its brand. Important resource of this phase was a mood board, that gave us inspiration for several aspects of the brand and user interface.

To create the user interface we once more turned to our new good friend Figma. Existing prototypes and wireframes were building stones for user interface and also saved us many development hours.