'Burger Kat Mane?' Website
Establishing the user journeys
Image: Societal
THE OVERVIEW
Unilever Food Solutions (UFS) Malaysia launched a new website called 'BurgerKatMane' (translation: Where's the Burger?). The platform aims to connect the thousands of burger stall operators in the country with potential customers around the area. Users can use the search function to find nearby burger stalls based on their current location
I was approached by the design agency for Unilever Food Solutions (UFS) to work together to come up with User Flows for their new platform of finding burger stalls. My final deliverables were a User Flow diagram and a complete deck of mockups.
MY ROLE
User Flow
Lo-Fi Mockup Screens
DURATION
11 Days
TEAM
1 UX Designer (myself)
1 Project Manager (Client)
THE CHALLENGE
Mayonnaise being one of the key ingredients in burgers, (UFS) Lady’s Choice understood the concerns of the local vendors and decided to support the cause by catapulting them into the digital age. They launched a Malaysian website called 'Burger Kat Mane?'. The platform aimed to connect the thousands of burger stall operators in Malaysia with potential customers around the area. Users could use the search function to find nearby burger stalls based on their current location.
The agency's requirements within the tight deadline:
-
Make the website look and function more App-like optimised for mobile
-
Need to establish an overall look and feel for the agency's team to adapt
- Delivery of user flows so that the design team can take it and process it for the next step of designing
THE APPROACH
The research and creative concept of the platform were provided by the client to the agency. In their business plan, they had identified the target users defined as two-pronged: The Burger Operator and The Burger Eaters. This was helpful throughout the entire process of designing this app. After the initial briefing from the Project Manager, we were able to distill the final list of requirements:
-
How to handle the login (for 2 types of users) and the journey for them?
-
How do The Burger Operators give out deals?
-
How does The Burger Eaters receive deals and claim it?
With this in mind, they wanted to immediately see how this translated into individual pages.
I started with a User Flow diagram by a sketch that laid out the "happy path" for both the Operator and the Consumer. Straight away, we could see that The Burger Eater's promotion screen was dependent on The Burger Operator's deals (timed promotions).
The confirmed user flows
As we were on a time crunch, almost immediately, they requested for an Information Architecture to put into their deck. At this stage, the client also requested for what would go into the menu bar (orange).
Right after, some key screens were discussed. These were important to lock down and we had established user's screens were inter-depended on each other. A few screen sketches were quickly drawn up for discussions.
-
Homepage
-
User selection
-
Operator give out deals
-
User claim deal
-
Map (to feature deal)
-
Loyalty card
Right from the start, the design agency was happy with the proposed sketch for ‘User Claim Deals’ to have a ‘timer’ and a ‘claim’ button next to the profile, therefore little to no iteration was done. (as seen at 0:55sec in Actual Instructional Video for Operator below). From various scroll bar formats to drop-down menu, the most time was spent trying to figure out how best the Burger Operator was to ‘Give Out Deals’.
Individual screens from the Information Architecture were designed and went through 4 rounds of reiteration. Here are the key screens derived from the sketches.
HOMEPAGE
USER SELECTION
BURGER OPERATOR GIVE DEAL
BURGER EATER RECEIVE DEAL
MAP
LOYALTY CARD
Each round of the User Flow was done up to an Information Architecture of App screens. Here is the final Mock-Up to the client.
-02.jpg)
Operator Tutorial for Burger Kat Mane - By Societal
(Actual instructional video for users for Malaysian Audience)
Diner Tutorial for Burger Kat Mane - By Societal
(Actual instructional video for users for Malaysian Audience)
REFLECTION
OPEN AND CLEAR COMMUNICATION
As I refined the designs, I con-called regularly with the Project Manager to explain how I was solving problems and to get feedback from him. We worked at a quick pace with me outlining what needed to be done with approvals at each stage.
(After looking at the I.A)
"Just went through this with Kevin (the boss). We're really happy! :D "
(After looking at 1st round of Mock-Ups)
"This is great! I've gone through and there's a few small things that I think we can change. When the boss saw how much you'd done and how fast, he was very impressed."
-Felix Pels (Project Manager)