Runar App
How Runar was designed from scratch
Introduction
The goal was to create an amazing mobile app focusing on immersing users in the atmosphere of Scandinavian myths.
Analyze other players on the market and create outstanding user experience based on user needs. Also, make a new value and additional features for similar kinds of apps.
Analyze other players on the market and create outstanding user experience based on user needs. Also, make a new value and additional features for similar kinds of apps.
- Team
- Product manager
- Business analyst
- Fullstack JS developer
- Design trainee
- QA
- My role
- Founder
- Visionary
- Product designer
- Project started
Oct 2020
Discovery
To figure out what to do with a product, we with a team together worked on competitors analysis from point of market volume, features, possible revenue, and value for users.
After that I reviewed UI design and business models of all competitors from our list. As a result, we with the team got clear scope for MVP.
After that I reviewed UI design and business models of all competitors from our list. As a result, we with the team got clear scope for MVP.
Defining scope
As a result of the discovery phase, we used MoSCoW prioritization techniques and defined the basic features list we'll move forward with.
Also, after defining and implementing app with MVP scope, we decided to add attractors such as atmospheric Viking music, animated AI avatars with voices, and Runic patterns generator.
Challenge
We planned to add 4 languages to the basic version of the app, but it was hard to manage a huge amount of content.
Also, the same challenge was designing UI elements for different lengths of words (the longest words are in German).
Tip
To manage the multilanguage content challenge, we used sheets to compare all UX writing and create the layout to contain and display content for all languages correctly.
Also, after defining and implementing app with MVP scope, we decided to add attractors such as atmospheric Viking music, animated AI avatars with voices, and Runic patterns generator.
Challenge
We planned to add 4 languages to the basic version of the app, but it was hard to manage a huge amount of content.
Also, the same challenge was designing UI elements for different lengths of words (the longest words are in German).
Tip
To manage the multilanguage content challenge, we used sheets to compare all UX writing and create the layout to contain and display content for all languages correctly.
Developing & Delivering
Here's the long story of how the design of Runar app was developed and then got through feedback/ideation/solution testing/development loop again and again
Delivering designed features to development, testing, updating product documentation and mockups is not a linear process. So it looks simple here and is complicated in life.
Step 1. Mindmapping
I took the role of a founder, and created the mindmaps for all MVP features. This way, I visualized all needed scope with enough details to work with ll the team.
This way, the team created, validated and estimated their tasks.
This way, the team created, validated and estimated their tasks.
Step 2. Wireframing
After creating every mindmap, I built wireframes and ScreenFlow for the features. It took a couple of iterations for some features.
The goal was to make design solutions clear and achievable for implementation.
On this stage, we collaborated closely with Business Analyst and Developer.
As a result, before the final mockups, we got a clear understanding of the implementation possibility for the MVP scope.
Tip
Good for clarity. On this step Class Diagram was created by Developer and BA in parallel with the wireframing step.
The same principle I used for additional features after we implemented and published MVP product.
The goal was to make design solutions clear and achievable for implementation.
On this stage, we collaborated closely with Business Analyst and Developer.
As a result, before the final mockups, we got a clear understanding of the implementation possibility for the MVP scope.
Tip
Good for clarity. On this step Class Diagram was created by Developer and BA in parallel with the wireframing step.
The same principle I used for additional features after we implemented and published MVP product.
Step 3. Visual concept
I started from a mood board containing the textures of stone, fire, runes, old wood, foggy forest and sparkles. For designing the final visual concept of the app I went through a couple of iterations sharpening visual appearances and creating the needed vibe.
The concept also contained background music to create a full immersion for our users.
In this step, were created the name and logo of the app.
Tip
A musical background is the right solution here. Later, we got a lot of positive feedback from our users about it.
The same principle I used for additional features after we implemented and published MVP product.
The concept also contained background music to create a full immersion for our users.
In this step, were created the name and logo of the app.
Tip
A musical background is the right solution here. Later, we got a lot of positive feedback from our users about it.
The same principle I used for additional features after we implemented and published MVP product.
Step 4. Styleguide and consistent UI
Based on visual concept screens, I created basic styles and components for the app. What was covered on this step: Basic colors, background textures, runes' images, fonts, input fields, buttons, screen, and popup layouts.
We discussed how many details should contain the style guide, it was enough for that moment.
In the later steps, the need to improve the style guide does not appear.
Tip
A musical background is the right solution here. Later, we got a lot of positive feedback from our users about it.
All the app is built based on the components we built on start. We just improved component styles, added images and icons later to finalize the visual part of the app.
We discussed how many details should contain the style guide, it was enough for that moment.
In the later steps, the need to improve the style guide does not appear.
Tip
A musical background is the right solution here. Later, we got a lot of positive feedback from our users about it.
All the app is built based on the components we built on start. We just improved component styles, added images and icons later to finalize the visual part of the app.
Step 5. Designing all basic features and additional functionality
I finished design work on basic features in 6 weeks.
The process is not linear – we with team together worked on a couple of tasks simultaneously: design if features, new hypotheses and insights, basic features improvement, users feedback gathering. Before the release, we used app prototype and then test version on Android to collect feedback.
Tip
Early users and market feedback is crucially helpful to make sure that product direction is correct. This way, we came through less iterations with additional features searching.
Also, it was the moment of AI tools became accessible, so we learned everything could be helpful to us, and changed our approach.
It was a huge quality and quantity improvement for our team productivity.
The process is not linear – we with team together worked on a couple of tasks simultaneously: design if features, new hypotheses and insights, basic features improvement, users feedback gathering. Before the release, we used app prototype and then test version on Android to collect feedback.
Tip
Early users and market feedback is crucially helpful to make sure that product direction is correct. This way, we came through less iterations with additional features searching.
Also, it was the moment of AI tools became accessible, so we learned everything could be helpful to us, and changed our approach.
It was a huge quality and quantity improvement for our team productivity.
Result
The app was released, and after a couple of iterations, we improved features with animated AI avatars, more languages, additional mechanics, and more gamification involving users.
Want more details about app metrics? Contact me.
And now check the final app screenshots and if you're interested, install Runar and check it alive!
Install Runar and Enjoy!
Other design cases
How I redesigned the CRM menu by conducting user research
How I redesigned the CRM task tracking to improve goal achievement metrics for users and decreased clicks number
How I created visual concept of a mobile app from scratch in shortest terms using reverse engineering, rapid wireframing and prototyping method
Want to know more about my experience
or discuss opportunities?
or discuss opportunities?