IHOP Case Study
.png)
.png)
.png)
IHOP is a well-recognized breakfast diner restaurant chain whose origins date back to 1958. Through my General Assembly cohort, I was assigned to a team and through a challenging two-week sprint, we tackled various issues involved with IHOP’s current app via foundational background research and effective design implementations.
My team consisted of myself, Carmeena Escobar and Rito Torres.
research goals:
At the outset of this project, my team and I felt it was critical to identify as best as we could what aspects of IHOP’s current app attracted customers and how to best translate that into an effective food delivery service. To this end, I set the following research goals:
- Identify best practices for creating a food delivery app.
- Understand pain points that could make using the app difficult.
first impressions:
After going through IHOP's current application ourselves, my team realized that while the current version of the app was functional, there was a lot of room for improvement. Pain points we noticed ourselves and wanted to highlight in further research were as follows:
1. Flow of the website felt discontinuous in certain areas.
- Selecting a location proved confusing and took multiple attempts to navigate to the ordering menu.
2. Images look sloppy and poorly aligned
3. Wait times with pick-up/delivery.
We also began ideating potential solutions to these pain points and wanted to explore how user's responded to the following:
1. Incorporating a map display on the location selection screen for intuitive design.
2. Utilizing a QR code in order to reduce the time while picking up orders.
3. Incorporating a star rating feature where users rate restaurant locations on service.
user surveys and interviews:
My team and I proceeded to conduct user surveys and interviews to gain a better understanding of food delivery service users’ behavior. While conducting our user surveys, an immediate issue that my team and I encountered was that none of our surveyed users had ever experienced using IHOP’s app. To navigate around this issue we decided to approach our solution synthesis with a competitive/comparative scope, in order to understand best practices implemented in the current market and incorporate said practices as solutions for IHOP’s current design. We synthesized our user responses into a cohesive affinity map:
competitive analysis:
Rito spearheaded the competitive and comparative analysis, and pulled insightful data that served as a foundational piece to the conception of our design. Comparing IHOP to Waffle House, The Original Pancake House and Denny’s, Rito ran a feature comparison to gauge what features were available across all competitor apps.
Waffle House:
Pros:
Responsive design (web to mobile)
Option toggle between map view and listing of locations
Rewards program
Cons:
No online orders
Add to cart available but checkout not available
No prices on
Original Pancake House
Pros:
Request to provide notifications
UberEats partnership is visible
VIP coupons available.
Cons:
Sections are transparent and text isn’t legible
Unable to order through the app -- directs to website
Font alignment on title skewed
Denny’s
Pros:
Carousel hero images to promote new/popular items on the menu
Location visible on menu
Educate users on why they should create an account
Cons:
Unable to tell what 3rd party delivery service utilized
Call to action buttons in the checkout page are muted
The competitive analysis revealed to our team that a rewards program was almost universal across IHOP’s competitors, even when some of its competitors lacked an effective online ordering app.
We collectively decided to shift our target focus from just refining some of their features to incorporating IHOP’s current rewards program into their mobile application. We believed this would be the best way to encourage users to start using the app and also developed other incentives that worked with our initially ideated solutions like a QR code scanner on the app that gives rewards points to users viewing the menu in store or leaving a rating on the app to receive rewards points.
So to begin ideating our solutions, we started with a structured user-flow that efficiently encompassed the functionality of IHOP’s current site, while incorporating our added features.
- User flow begins with a login page
- Do you have an account decision diamond
- Create an Account or Sign In
- Select Order Status
Carmeena took most of the workload involving the design iterations while Rito and I oversaw the design process and collectively as a team communicated and decided on the flow and functionality of the site, placement of images, buttons and text and made personal edits to specific overlays and screens.
Sketching began with ideating what the Rewards Feature would look like on the app. We pulled from our comparator Chick-Fil-A’s current rewards feature design and developed the following screens:
At the top of the rewards home page, would be the total amount of points a user accrued and below it would be the available deals redeemable for points. The second screen shows the QR Code scanner that you would be able to scan when dining-in or picking up an order.
Alongside this, a sketch of the store selection map screen was developed and displays the map view of the stores represented by pins. Clicking on pins would pull up the stores details, ratings, distance, etc.
mid-fidelity mobile wireframes:
Mid-fidelity wireflows were developed to flesh out our team’s design research and ideation. Here are examples of the login screen and rewards page we initially developed for our first round of usability testing. We attempted to retain as much of IHOP’s current image while cleaning up the spacing of buttons, text and images.
usability testing:
As our team’s lead for usability testing, I began looking for users to test our product to see the areas of design that needed improvement as well as what we were already doing well.
The parameters of my usability testing were as follows:
- Time limit: 5 minutes
- Maximum errors per task: 5
- Goals:
- User will successfully place an order for pick-up and checkout
- Create an Account
- Place a pickup order for 3 original pancakes, 1 vanilla milkshake and 2 strawberry milkshakes
- Proceed to checkout, pay with Apple Pay and leave a rating
- User will successfully redeem points and complete an order for delivery
- Access your rewards page and redeem an order of hashbrowns
- Navigate to Locations and create an order for delivery
- Add an order of original pancakes to your cart, checkout and land on the delivery tracker page.
Round 1:
Our first round of usability testing gave our team insight for improving the designs our team had initially created. Some areas we noticed as pain points specifically were the login and the shopping cart icon. Our iterative changes included opening up the means of navigation by increasing accessibility.
Our initial designs lacked a full range of navigation as users attempted to navigate to their shopping cart by clicking on the shopping cart icon as opposed to the “View Cart” call to action button in a drop-down overlay. We quickly resolved these navigation issues and also added additional design changes like resizing images and improving spacing of icons.
Round 2:
Some of the key observations I made during testing was that all users either mentioned or suggested an improvement/change that could be made to the rewards page because the layout we had was one they were unfamiliar with. Another area of navigational improvement was with the checkout page where 66% of our users wanted to click on the top tabs to navigate from Order Details to Checkout. Below are the iterative changes made to our design.
round 3
For our final round of usability testing, our feedback affirmed the cohesiveness of our iterated design decisions as well as provided insight into further improving specific areas of the app. For the final round of usability testing, users were tested only for the second goal, as our iterations were made based off of our second user flow.
From our final round of usability testing, we affirmed our research-based design choices and finalized our design.
Link to Figma File
future iterations:
Planning for future iterations, I began structuring the groundwork for continual iterations of improved design. A few things to take into consideration:
- Incorporating a reviews portion for users to specifically voice their comments and concerns
- Adding functionality to the profile section of the application, so users can manage their account preferences
- Improving the UI design further by smoothing out rough edges of buttons and improving legibility via white space
closing remarks:
The design process for IHOP's food delivery app was a challenge due to some team miscommunication. This project enforced the importance of team-communication and accountability, which will be a skill I will continue to cultivate and develop moving forward. By taking the initial structure of IHOP’s current application, my team and I were able to successfully meet our design goals through the improvement and redesign of IHOP’s app.