What is Chope?
Chope is a real-time restaurant reservation booking platform that connects diners with its partners restaurants. The word Chope is inspired by the Singlish Chope used in Singapore.
First started when people used tissue to book seats at food centres.
Chope’s mission is to connect all restaurants and diners through discovery, reservations and deals.
Why chose Chope as the App to Work On?
The 5 Whys
- Personal — UI navigation not user friendly prevent users from revisiting.
- Design Issues — Visual clutter, redesign to create more consistency is needed.
- Impact to User — Unintuitive and misleading UI, causes confusion for users.
- Impact to Business Mission — Poor reviews, misleading UI navigation, user to missed out good deals, causes frustration to users.
- What If It's Not Solved — Chope might not be able to reach targeted users and might lose revisiting users.
Here are some of the negative reviews of the Chope from the App Store. Many people experienced similar UI issues with the app. There is one feedback about the search filters. Many commented negatively about the UI navigation for the deals and other functions.
Reviews from App Store
The High Level Problem Statement
The 4 Ws - Who, What, Where and Why
WHO Is Experiencing the Problem?
Mainly busy individuals such as working adults and families in Singapore. As a lot of Singaporeans are foodies, this app is created to make reservations for restaurants more convenient and efficient.
WHAT Is the Problem?
Feedbacks that remarks on the visual clutters and users also comment that the deals navigation is misleading and unclear.
WHERE Does the Problem Present?
Problem mostly found on the Home screen and Deals screen. Lack of useful features found out like food reviews, star ratings and bookmark features which can encourage more revisiting users.
WHY Does It Matter?
By improving the user experience, it can encourage more revisiting users and new users to use the app to reserve dining venues and purchase promotion coupons.
Defining the Business Idea
After analysing and researching the Chope website, we have created the Business Model Canvas. Although Chope customer segments include everyone in Singapore, the main target audiences are busy individuals like working adults and families. Chope also partnered with Google, tripadvisor and DBS for an all-rounded lifestyle experience. The key activities on the app is to make reservations with just a few taps.
Business Model Canvas
Collecting Data from the Research
We conducted an Interview with 3 users who are foodies, who are working adults and busy parents who enjoy a convenient and efficient way to reserve their dining venue.
Insights and findings include — Most users will search for deals before deciding a restaurant, they wish that deals can be more prominent so they will not miss it out. And users think that Chope should have a review feature so that they can make a quicker decision on the restaurant to go to. And we found out about the other food apps they used which lead us to the next page on competitor analysis. We created an Affinity Map to break down the insights gathered into individual categories.
Insights And Findings Gathered On Our Affinity Map
Competitor Analysis
We have done the comparison research among the other three popular competitors. The results on the different apps which sheds light on what features are required for the better experience for the food lovers. After evaluating the Chope app and we refined the necessary features based on the insight that we gathered from our comparison table.
Competitor Analysis
Persona
We chose to put together with a persona that a food app can pay more attention on. Our persona is a 37 years old marketing manager who is also a mother of two kids. As a busy mother who is juggling between work and home, she wishes to enjoy good food with family every weekend. She enjoys using an app that can help her conveniently book for restaurants in a few taps, and have minimum tech issues. She used to search for a restaurant that can cater to kids.
Persona
User Interactions with the App
Our Persona used the app and tried to find a restaurant that caters for kids, checked out the deals for the restaurant, and proceeded to reserve seats for her family of 4. After eating she wanted to leave a review for the restaurant and realised the current Chope app has no review feature.
We found out the new opportunities to explore based on the Customer Journey Map which are to include child friendly indicator for the restaurants and more search filters. Review feature also needs to add in so that users can express more about their dining experiences. Adding the bookmark feature on the Home screen can encourage users to revisit the app and reach to the restaurants that they recently explored.
Customer Journey Map
Tackling the Designs
As we reviewed the screens from the Chope app, we have identified some issues and noted them down based on the respective screens. The intention of this is to decide whether the issues listed down will make the best impact with the optimisation.
Home Screen
Home Screen
Issue 1 — Users feel that there are Visual clutters due to inconsistencies in image sizes and layout.
Issue 2 — Lack of bookmark feature that can encourage revisiting of favourite restaurants.
Issue 3 — The Interface is misleading whether it is the deal or the restaurant.
Home Screen
Issue 4 — Duplication of search option, there is one at the top and one at the bottom.
Issue 5 — From Home screen, it is not clear what services that Chope is providing.
Search Screen
Search Screen
Issue 1 — No indication of child-friendly icon beside each of the restaurants, or filter function for that.
Issue 2 — Users also feedback that it will be good to have filters to see those restaurants that are near them.
Issue 3 — Lack of more filtering options.
Restaurant Screen
Restaurant Screen
Issue 1 — When reaching the restaurant screen, the deal button is not obviously clickable and not prominent enough to show there are available deals.
Issue 2 — Lack of star ratings to entice users to make quicker decision.
Restaurant Screen
Issue 1 — Too much of information for example, "THE BUZZ", "DISHES WE LOVE" result in lots of scrolling needed.
Issue 2 — When reaching the restaurant screen, the deal button is not obviously clickable and not prominent enough to show there are available deals.
Reservation Screen
Reservation Screen
Issue 1 — The interface for selecting Date and Time can be simplified to make the selection more efficient.
Proceed Screen
Proceed Screen
Issue 1 — If users were to change their mind on the selection of restaurant, they will have to click on the "Back" button multiple times to go back to the Home screen. There should be a button to jump straight back to the Home screen beside the "Proceed" button.
Issue 2 — Deal vouchers added to reservations are not visible after selection.
Confirmation Screen
Confirmation Screen
Issue 1 — The label named "Restaurant Questions" is misleading. It should be "Any Special Request?" so that it's clearer for users.
Issue 2 — A button to jump straight back to the Home screen here as well if users changed their minds.
Prioritising the Solutions
We prioritised the solutions and feedbacks from users referenced from the issues we gathered previously. Frequency and complexity of the solutions determined the results.
Prioritising the Solutions
Ideating with Four Parts Categories
After prioritising, we ideated and finalised our ideas and solutions into the 4 parts categories using the relevance and novelty ideas. The ideas that we are going to apply on our design are the bookmark feature on the menu, comprehensive search filters, reviews feature with photo uploading function.
Four Categories Method
Determining the Brand Style & Personality
Here are some of the keywords that we brainstormed to represent the Chope brand: excitable and vibrant (Excitement), convenient and user friendly (Convenient & Friendly), always up to date (Trending) and comes with bonus and perks (Attractive deals).
The User Goals and Business Goals via Conversation
We did the Content-first Exercise by forming the turn based conversation. First, we set the user goals and business goals with the flow of what the user wants to achieve at the end. This gave a lot of helps in rectifying the prototypes based on the questions and responses from the conversation in the later stages.
Content-first Exercise
Ranking the Hypotheses
Remote testing conducted with 3 users to run through our initial designs. We created a list of hypotheses for our users testing and set a specific set of goals for users to test the prototype. The results were then used to iterate our design.
Hypotheses Ranking
Moodboard
We did an analysis on the brand colors and used it to enhance the brand personality by creating a vibrant and fun identity. The usage of more blue in contrast with the bright yellow of the Chope branding creates a bold and friendly impression.
Moodboard
Communicating with the Brand
Here is the Brand Style Guide with the set of standards, principles, and rules that helps us stay visually consistent and work more efficiently. It consists of the colour palette, fonts, icons, grids and UI components that we use for our design.
Brand Style Guide
Wireframing
Before we start to create the prototypes, wireframes are used early in the development process to establish the basic structure of the app and used them to explore the different screens before the visual design and content were added in.
Wireframing
Prototype
Visualising by Hierarchies
After the previous stages were done, we started on designing the screens which suit our targeted users. We created visual elements that have a sense of consistency throughout the screens. Using the Hierarchies give us order to make design more sense obviously, then we prioritised headers and menus according to how users want and what we want them to do.
The hierarchy orders are as below
Size — of images and fonts
Color — corporate color theme
Contrast — of color and font style
Alignment — of components
Repetition — objects to be on the same placement. CTA button for example.
Proximity — spacing between each of the components.
Visualising by Hierarchies
Components Usage and Placement
Match Between System And Real World
- Using the real world standard of tools that everyone is familiar with.
Visibility of System Status
- Providing users with information about the system status and feedback after every interaction.
Flexibility And Efficiency of Use
- Giving users the flexibility of Pay Later option, in case of unforeseen reasons.
- Flexibility and easy to use option to request for child seat.
Recognition Rather than Recall
- Help users not missed out great deals, by giving them a reminder or a shout out.
User Control and Freedom
- Providing users with an easy way back after they find themselves in an unwanted state.
Components Usage and Placement
The Final Walkthrough
The walkthrough covers the steps from the journey map of our persona. It shows the booking process of the child friendly restaurant with the review feature as well as the bookmark feature by using the search function. Not only about leaving the review but also can view the reviews from other users across the different kind of restaurants.
The Retrospective
At the stage of the retrospective, we identified our goals, the parts which slowed us down, things and participants that helped us and the risks we encountered. We combined them as the Sailboat Exercise to achieve our objectives.
Sailboat Exercise
In conclusion, we experienced the improvements of the visual clutters, consistencies, search filterings, user feedbacks and simplicity on the app.