Behind the Scenes of beApp Customer Redesign

As we’re sure you’ve already seen, beApp Customer has a new look! After 1 month of hard work leading up to this, we’re all really excited to have our new look released into the wild.

As we’re sure you’ve already seen, beApp Customer has a new look! After 1 month of hard work leading up to this, we’re all really excited to have our new look released into the wild.

To people who may not know what be is: We’re a Vietnamese ride-hailing company, and while we’re not the first local competitor to Grab and Go-Viet, we are the only one to gain a considerable market share. We quickly rose to the #2nd spot in the Vietnamese ride-hailing market after only 1 year of launching. 

To people who may not know what be is: We’re a Vietnamese ride-hailing company, and while we’re not the first local competitor to Grab and Go-Viet, we are the only one to gain a considerable market share. We quickly rose to the #2nd spot in the Vietnamese ride-hailing market after only 1 year of launching. 

We thought it would be fun to take a peek at the process behind our redesign: the new interface. It took a lot of exploration, refining, developing efforts of the whole design, engineering and product teams in only one month, and finally we've made it.

We thought it would be fun to take a peek at the process behind our redesign: the new interface. It took a lot of exploration, refining, developing efforts of the whole design, engineering and product teams in only one month, and finally we've made it.

Why Redesign?

While the old interface has performed not bad, we thought it was a good time for it to be updated with a more contemporary and vibrant look. We also have another motivation is to celebrate the first birthday of our app! Below you can see some of the stylistic and technical problems we found with the old interface;

While the old interface has performed not bad, we thought it was a good time for it to be updated with a more contemporary and vibrant look. We also have another motivation is to celebrate the first birthday of our app! Below you can see some of the stylistic and technical problems we found with the old interface;

  • IBM Plex Sans has mechanic characteristics, its “robotic” isn’t consistent with our company’s tone of voice in general;
  • Poppins typeface has a kerning problem when being used with Vietnamese;
  • App look and feel is dull, boring;
  • The current content display isn’t scalable.

Scope of work

We all agreed that the user flow should remain - due to the tight deadline and we focused mostly on the app outlook. Since beApp is a multi-services app with 3 services, our scope of work contains:

  • Redesign beRide app;
  • Redesign beDelivery app;
  • Redesign beLoyalty

Design Planning & Development

1. Font selection

Typography takes up around 70% of the interface. It’s one of the main things that influence the app look & feel. We’re very lucky having an artist in our team, whose passion lies in typography. He is PIC of the Font selection.

The typeface project actually started in May - when we haven’t had the idea of redesigning the whole app. Before this, we’ve been struggling with our system fonts: Poppins and IBM Plex Sans. While they are all great in english display, but when it comes to Vietnamse, that’s a different story. 

Font-error

It led our team to an option: Create our own typeface. beVietnam was born. We have beVietnam Display for Headings, Big Title and beVietnam for body text. You can read more about the process here.

2. Sketching & Style Exploring

The colors we used before are limited in Yellow and Dark Navy tone. Their strong contrast, while working well on materials but not in digital devices. They can tire users’ eyes as well as making the interface cramped and rigid. We tried to expand our color palette, bring vibrant and energy into the design while avoiding to use too much color. 

Exploring-1-1

Style exploring

Color-exploring

Color exploring

Icons

Icon exploring

3. Apply design to the app

Exploring is fun. Lots of ideas came out. We applied these into the UI then narrow down options, keep the UI not being colorful, express minimalist and informative. As be is a multi-service app, we have designers in charge for each product lines. Besides working on our daily tasks, we set time to work together on New Visual project, 2h/day, 2-3 days/week.

Since the number of screens is huge and everything could change, we decided to rebuild the Design System for mobile, with new color palette, typeface, icons and elements. So if there is any change, designers can implement it in no time. We quickly set a few principles for the DS: Basic, Consistent, Scalable

DS-1
DS-2

We focus to finish main screens first to review with stakeholders. The CEO, tech and product teams like this concept.

Onboarding catch users' first impression. We simply make it cleaner and modern.

Sign-in/OTP/Before-After

Core feature of the app is choosing location, vehicle then booking. From our data, we know that most users saved their home and work addresses for quick select. However, the number of users using this feature isn’t as high as we want. In the new UI, we slightly highlighted it to get more of their attention.

Slice-8

Nobody likes to wait. Especially in high-pressure situations, waiting is much more unpleasant. Every second takes a minute, every minute takes an hour. To keep users temporarily forgetting that, we "entertain" them with the radar animation, which is slightly different from other apps.(Read more about "Idleness Aversion")

Slice-6

We aim to make the Rating screen more friendly and more inviting to customers, so that they can feel encouraged to give out ratings and feedbacks for our drivers. In that way, our business units can also collect more data about the driver quality as well. Hence, these little stars!

Slice-7

Say goodbye to dull Sidebar & Profile

Slice-9

4. Making it real

From there, it was on to the product and tech team to apply the new look. Initially, we thought that with our rich experience in product design, this UI revamp project wouldn't be able to challenge us. We’re wrong. This is where problems occurred:

  • Unsync content, design elements between services (since our services share lots of common features);
  • Unsync between iOS and Android;
  • Misunderstanding between product owners, designers, developers and QAs.

The unsync happened at little tiny things that we didn’t think of: dialog content that exists cross-module or an icon that appears on Android but not on iOS, and so on. A big thanks to QA, Dev and Product teams that they’ve spotted these “hidden” tricky mistakes that wasted time of us all. The design team then sit down together, review again all the UI, screen by screen to make sure nothing is inconsistent anymore.

During the development process, Design team also join in testing UI. Even each PIC took the main responsibility to check UI of their product, all members also join testing together. Because the PIC has been working on it all the time. It might harder for them to spot errors. PICs assigned work to other designers - who check what then they will decide which ones are bugs.

Our main process was: Install new build -> Use it -> Capture screen where the UI is different from design -> Upload to Figma -> PIC will re-check and decide what is bug -> PIC log bugs to Jira and assign to Devs
Remember: Verbal communication is key.

Log-bug

Designers logged bug into Figma

After a month of hard work and fighting (yes it is!), we’re able to launch the New Visual on time to celebrate beApp 1-year-birthday (17/12). There is nothing that’ll make us feel happier than seeing it available in store and users started giving feedback.

A special shoutout to beTeam who gave the app a new costume, and also to everyone who offered valuable feedback throughout the process. We’re really happy with how these turned out, not only we’ve had great reviews from public but a great time working together.

Thanks for your reading. 

HCMC, December 31st, 2019

Amy-Logo

A Product Designer who cares and enjoy the whole process of building a product from E2E.

NAVIGATION