Recube Ltd. • 2023
Design Guildlines
UIUX Design
B2C
Context
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.
Chanllenges
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
[Old Design]
The pain points include:
(a). 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.
(b). 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
(c). 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
After doing some research and competitive analysis, I begin to revamp the UI/UX.
[Visual Update]
The first task is to set up a simple design guildline. I consolidate the colors and font system and create a library inside Figma.
On top of that, I updated the icon set for the Recube brand and redesigning the ReCoin logo, used in the rewarding scheme.
[Redesigning 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.
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.
Old User Flow
New User Flow
Iteration
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.
Design Showcase
[Onboarding]
[Home Page]
Restaurant detail and drop-down menu
[Reward Page]
Place to view coupons details
[Borrow/Return History]
Include filter Button to Show Un-Return Item
[e-Wallet]
Makes deposit or add credit/debit Cards
What's Next?
In order to validate the effect of the new deign, some KPI metric can be use to validate the result.
(a). 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.
(b). Task Success Rate
This KPI metric can measure whether user successfully adopted the new user flow in borrow/return process