Mobile Vikings
Loyalty program design made for a network operator used by over 100,000 people
Mobile Vikings is one of the biggest and most beloved virtual network operators in Poland. They are famous for their great brand, reliable services and affordable pricing.
The company approached me and asked me to work on two things. One was a design for their loyalty program that allows users to invite their friends and get discounts. Second was was design system setup and cleanup of theexisting component base.
The company approached me and asked me to work on two things. One was a design for their loyalty program that allows users to invite their friends and get discounts. Second was was design system setup and cleanup of theexisting component base.
The Loyalty Program
The main challenge of the project was to design a new dashboard summarizing all info about the user's discount status, people their invite to the app, their crew status, and much more.
We spend about 2 months nailing down the program details with all of its edge cases and scenarios. After iterating and testing tens of different layouts and information structures, we were able to define the final requirements for the designs.
I prepared designs for native iOS and Android apps and a desktop app, with full support of the dark mode. Designs included the main dashboard, friend invite flow, plan upgrades, account switching, previewing your crew and their statuses and many more.
We spend about 2 months nailing down the program details with all of its edge cases and scenarios. After iterating and testing tens of different layouts and information structures, we were able to define the final requirements for the designs.
I prepared designs for native iOS and Android apps and a desktop app, with full support of the dark mode. Designs included the main dashboard, friend invite flow, plan upgrades, account switching, previewing your crew and their statuses and many more.
Inviting Your Crew
A lot of Mobile Vikings clients get recommended by their friends, which happens in various settings like parties, dinners, or chats in the office. It was critical to have a user invite flow that is seamless and easy to do, regardless of the situation and the amount of time and effort someone is willing to spend on it.
We allowed users to invite their friends via their contact list, use native sharing options, or even - use a special form that their friend filled out on the user's phone and activated the account right away.
We allowed users to invite their friends via their contact list, use native sharing options, or even - use a special form that their friend filled out on the user's phone and activated the account right away.
Desktop App
Obviously, Mobile Vikings clients mostly use the mobile app to manage their accounts. However, a desktop account was also a must-have for us. All of the flows and features were also available in the responsive web app, using the same design system and component base.
AI-Generated Avatars
Since not all users add their profile pictures - I prepared an avatar set using Midjourney AI. So even if the user doesn't have any contact photos - they will not see any boring, gray silhouette placeholders.
Design System
Apart from designing new features and flows, my role was to clean up the existing component base and set up a design system that could be used by other designers that will work with Mobile Vikings in the future.
The client's app was designed and built by various designers and developers for a few years already and there was no proper style, file, and library structure in Figma. Because of that, it was really difficult to find any past designs, maintain design consistency, and avoid theming bugs (especially in dark/light mode).
I set up a new file structure and atomic design systems for different platforms - with some common, and some platform-specific styles and components. I also created a color palette based on the current production app, fully supporting dark and light modes. Apart from that, I came up with templates for component and handoff guides.
The client's app was designed and built by various designers and developers for a few years already and there was no proper style, file, and library structure in Figma. Because of that, it was really difficult to find any past designs, maintain design consistency, and avoid theming bugs (especially in dark/light mode).
I set up a new file structure and atomic design systems for different platforms - with some common, and some platform-specific styles and components. I also created a color palette based on the current production app, fully supporting dark and light modes. Apart from that, I came up with templates for component and handoff guides.
Results
Different parts of the loyalty program flow and features are being implemented right now. Some of them are already in production and receiving positive user feedback, and some of them are still being worked on.
The foundation of the design system received very positive feedback from the developers, designers and managers working on the app. New designers are already working on new features using the newly created libraries, adding new components, and growing the system. It's pretty clear that all new designs are looking more consistent than previously. Even some product owners use the design system to come up with wireframes for product flows.
The foundation of the design system received very positive feedback from the developers, designers and managers working on the app. New designers are already working on new features using the newly created libraries, adding new components, and growing the system. It's pretty clear that all new designs are looking more consistent than previously. Even some product owners use the design system to come up with wireframes for product flows.