Development Mobile App June 3, 2019

White Label

The brand team rebranded three white-label brands, and as part of the Mobile Team, I ensured these changes were consistently reflected across the apps. To support this, I established a strong design system that sped up implementation and simplified future maintenance. I also contributed to improving user acquisition by streamlining and personalizing the onboarding and registration flows, reducing friction and boosting completion rates.

Task

I was hands-on owning the design system for Questico and its white-label apps across multiple markets and platforms. The main goal was to keep the system flexible and consistent to support rebranding, UI improvements, and feature updates efficiently. The key challenge was balancing customization for different brands while maintaining a unified, scalable system that sped up design and development.

  • Strategy

    Brand Strategy, acquisition optimizations

  • Design

    UI Design, Design Systems

  • Client

    adviqo GmbH

THE APP

Questico

Questico is the bench mark of a white label app production which is being developed for German, English and French speaking markets. Delivered for Android and iOS, this platform features variety of complex services across 3 different App products, sharing the same code base.

The Role

UX/UI Designer

Working as a UX/UI Designer in the company’s mobile team who was responsible for the design and development of 5 apps.

The team was concluded of two UX/UI Designers, 5 iOS & Android developers, 2 QA Engineers, and a Product Manager.

My main responsibilities were to have full ownership over our Design system, since our core three apps were part of a white label, and maintaining the design system was a major requirement to be fast and consistent across all the apps. Maintaining a high-quality design system ensured a smooth development process, with smooth design, building, and testing product circle.

The main tools we were using to ensure a strong reference point for the team were Sketch & Zeplin.

project kick-off

Rebrand 2020

One of the first tasks was to adapt Questico app to the new Brand. Icon adaptation, Splashscreen animation in Json, updating color and font libraries, and work on the whole look & feel was the abstract brief.

icon transition

Splash screen transition

project kick-off

White label

Just before we dive in..

  • Questico (DACH market)
  • Viversum (DACH market)
  • TheCircle (UK market)

are part of a white label. The changes that we made in Questico got adopted by the other two. I will focus more on Questico than the other two because this is the app that is driving the revenue.

icon transition

Questico | TheCircle | Viversum

Splashscreen animation

Questico | TheCircle | Viversum

White label

UI improvements

Product Listings transition

This is Questico’s product listing. The users, on this page, can sort their results and save, call or chat with an advisor. Changes had to be adressed after the Rebranding.

What has changed⁉️ 

  • Nav Bar Icons and Tab Bar Icons changed to thicker lines for improved readability.
  • Nav Bar Background receives improved usability, due to dark mode. Easy adaptation to dark mode.
  • Font style was changed to the new one according to the Brand book
  • All icons got updated to the new design
Before After
UI improvements

Product Description Page

Users here can read the details of the advisors. Information like:

  • their experience
  • pricing
  • review
  • video and/or audio demo
  • availability

What has changed⁉️

  • Nav Bar Icons and Tab Bar Icons changed to thicker lines for improved readability.
  • Nav Bar Background receives improved usability, due to dark mode. Easy adaptation to dark mode.
  • Font style was changed to the new one according to the Brand book
  • All icons got updated to the new design
Before After
UI improvements

Chats Page

This screen is where all the revenue is coming from.

The users can contact advisors either by chat or call. Most of our users prefer chatting.

  • Users can engage in a chat by directly contacting them
  • Users can book a reading in advance to ensure that their favorite advisor will be available
Before After
UI improvements

Qmail

Assychronous communication

Many advisors are big celebrities in the “world” of esoterism. Therefore many users want to contact them but unfortunately, they might not be available for the synchronous session since they can’t work 24/7. With Qmail, users can contact them and the advisors can respond during their downtime.

Before After
UI improvements

Articles

A new tab was designed and added to the app to add some content for the users to read and share.

– We had a huge collection of images with quotes that were changing every day and the users can share them on their social media. This is a good way to acquire new users without any marketing costs.

– We have a team writing content daily for our offline magazine and website therefore adding this feature to the app would be beneficial to increase retention

– The users can share quotes of the day and interesting info to them with friends. That increased brand awareness and customer engagement outside our platform

Design system

Styleguide

Before After
Design system

Color library

Design system

Fonts library

Registration flow

Survey

Lastly, I tried to improve our onboarding and registration flow since it was a really long one. We used to have too many steps and not all of them were essential.

The first step was to conduct a survey to understand our new users. Designed and built on Brazy a survey I created on SurveyMonkey. (I wanted to avoid a cross-department process that sometimes takes a lot of time since our time for research was limited)

What changed?

  • Registration is now customized to the flow that the users are currently following and the steps are the minimum/essential for the action that they are trying to complete.
Registration

v2 | Registration based on intention

Registration

v2 | Registration based on onboarding answers

next steps

Next steps

The Product manager chose to move forward with the first concept. There was an increase of 9% on registration completion. Unfortunately, I couldn’t optimize it further since I got promoted to a Lead Product Designer and moved to another team of the same company. 

Back