Web App Revamp

Web App Revamp

Web App
Revamp

Recube Ltd.
My Role : UI / UX Designer, UX Researcher
Tools : Figma

Overview

Challenges

Design Process

Iteration

Design Showcase

Overview

Overview

Overview

My main task during the internship at Recube Ltd, a reusable tableware service provider, is to revamp their current web app UI UX for improve usability and product experience. I start off with identifying some user pain points and analysing the existing navigation and layout of the app. Follow by some design research like competitive analysis and try out other competitor's app myself. Finally iterate the design base on some feedback from the stakeholder.

My main task during the internship at Recube Ltd, a reusable tableware service provider, is to revamp their current web app UI UX for improve usability and product experience. I start off with identifying some user pain points and analysing the existing navigation and layout of the app. Follow by some design research like competitive analysis and try out other competitor's app myself. Finally iterate the design base on some feedback from the stakeholder.

My main task during the internship at Recube Ltd, a reusable tableware service provider, is to revamp their current web app UI UX for improve usability and product experience. I start off with identifying some user pain points and analysing the existing navigation and layout of the app. Follow by some design research like competitive analysis and try out other competitor's app myself. Finally iterate the design base on some feedback from the stakeholder.

Challenges

First, I sort out the problems of the current design by reviewing the existing design and founder's take on the web app. Below is some snapshot of the original design and pain points of the web app

Original UI

Pain Points

  1. Navigation and IA (information architecture) is not efficient

    Some navigation is not ideal, important page such as "My Coupon" is hard to access while less important page like wallet is put in prominent area. Also Homepage's space is too blank without much content. Moreover the borrow/return button only contain QR Code icon with no text label, which may leads to confusion for some new user.

  1. Borrow/Return process is troublesome for restaurant side

    Restaurant staff feedback suggest it is annoying for them to scan the user QR code during borrow/return process, especially during peak hour where staff is extremely busy and occupied

  1. User feel hesitate and insecure to add payment method

    In the current design, we see many drop out at the adding payment stage. Prevent the user to start using the service.

Design Process

Design Process

Design Process

After doing some research and competitive analysis, I begin to revamp the UI/UX.

💡 Update visual element and consolidate design system

The first task is to build a design system to facilitate later design. Therefore I consolidate the colours and font system and create a library inside Figma.

The first task is to build a design system to facilitate later design. Therefore I consolidate the colours and font system and create a library inside Figma.

The first task is to build a design system to facilitate later design. Therefore I consolidate the colours and font system and create a library inside Figma.

On top of that, I updated the visual element by sourcing a icon set for the Recube brand and redesigning the ReCoin logo, a Recube rewarding scheme.

💡 Redesigning IA (Information Architecture)

💡 Redesigning IA
(Information Architecture)

Next, to address the challenges about navigation and IA, I decide to redesigning the IA to a more efficient way. Since this is a web app, a Navbar approach seems space consuming and left a small viewable spaces for user. Therefore as seen in below diagram, I reassign the navigation to a more intuitive way. Where Navbar is removed and user can now directly access features like "My Coupon", "Coupon" and "History" in home page. Also borrow/return button is well labeled with text.

Next, to address the challenges about navigation and IA, I decide to redesigning the IA to a more efficient way. Since this is a web app, a Navbar approach seems space consuming and left a small viewable spaces for user. Therefore as seen in below diagram, I reassign the navigation to a more intuitive way. Where Navbar is removed and user can now directly access features like "My Coupon", "Coupon" and "History" in home page. Also borrow/return button is well labeled with text.

Next, to address the challenges about navigation and IA, I decide to redesigning the IA to a more efficient way. Since this is a web app, a Navbar approach seems space consuming and left a small viewable spaces for user. Therefore as seen in below diagram, I reassign the navigation to a more intuitive way. Where Navbar is removed and user can now directly access features like "My Coupon", "Coupon" and "History" in home page. Also borrow/return button is well labeled with text.

Before
After

💡 New Borrow/Return Process

In light of restaurant's feedback, where they feel troublesome to scan user's QR code, we decide to follow our competitor's method in borrow/returning process. The new process become user scanning the tableware to borrow/return. Therefore a new user flow is implemented.

In light of restaurant's feedback, where they feel troublesome to scan user's QR code, we decide to follow our competitor's method in borrow/returning process. The new process become user scanning the tableware to borrow/return. Therefore a new user flow is implemented.

In light of restaurant's feedback, where they feel troublesome to scan user's QR code, we decide to follow our competitor's method in borrow/returning process. The new process become user scanning the tableware to borrow/return. Therefore a new user flow is implemented.

Old User Flow
New User Flow

Iteration

Borrow/Return Process

When reviewing first draft of design, concern regarding borrow and return confirmation screen seems alike is raised, which may affect restaurant staff ability to check whether user had successfully completed the action. Therefore, I iterate the screen to a version where the word "BORROW" and "RETURN" is now prominently displayed to help restaurant staff identify user's completion of action.

When reviewing first draft of design, concern regarding borrow and return confirmation screen seems alike is raised, which may affect restaurant staff ability to check whether user had successfully completed the action. Therefore, I iterate the screen to a version where the word "BORROW" and "RETURN" is now prominently displayed to help restaurant staff identify user's completion of action.

When reviewing first draft of design, concern regarding borrow and return confirmation screen seems alike is raised, which may affect restaurant staff ability to check whether user had successfully completed the action. Therefore, I iterate the screen to a version where the word "BORROW" and "RETURN" is now prominently displayed to help restaurant staff identify user's completion of action.

After some discussion on this iteration, considering restaurant staff may need to view the screen in a distance and not noticing the detail wording on screen. We want make things clearer between borrow and return process. Therefore we changed the background colour of the two process for the final iteration.

"BORROW" being white and "RETURN" being dark green.

After some discussion on this iteration, considering restaurant staff may need to view the screen in a distance and not noticing the detail wording on screen. We want make things clearer between borrow and return process. Therefore we changed the background colour of the two process for the final iteration.

"BORROW" being white and "RETURN" being dark green.

After some discussion on this iteration, considering restaurant staff may need to view the screen in a distance and not noticing the detail wording on screen. We want make things clearer between borrow and return process. Therefore we changed the background colour of the two process for the final iteration.

"BORROW" being white and "RETURN" being dark green.

Design Showcase

Design Showcase

Design Showcase

Onboarding User Flow

Components Library

Home Page

with Restaurant Detail and Drop-down Menu

Reward Page

with Coupon Detail

Borrow/Return History

with Filter Button to Show Un-Return Item

e-Wallet

with Feature of Making Deposit or Adding Credit/Debit Cards

What's Next?

Design Validation

In order to validate the effect of the new deign, some KPI metric can be use to validate the result.

In order to validate the effect of the new deign, some KPI metric can be use to validate the result.

In order to validate the effect of the new deign, some KPI metric can be use to validate the result.

  1. Conversion Rate

    With the new design where user can now easily add payment through Apple Pay, with clear explanation on the operation. We can observe if there is an increase number in user who take the desire action, which is start using the service by adding payment method.

  1. Task Success Rate

    This KPI metric can measure whether user successfully adopted the new user flow in borrow/return process

© 2023 William Chan

Home

About Me

Contact