hungryhouse

 

Completed at: hungryhouse, Delivery hero
Location: Berlin, Germany
Role: Head of Product Design
link: www.hungryhouse.co.uk (No longer live)

 

hungryhouse is the UK’s premier online platform for takeaway and food delivery. From London to Manchester — and all over the UK — hungryhouse partnered with the best takeaways across Britain so our customers can find and order a delicious meal in minutes. On hungryhouse.co.uk, customers can instantly access a wide array of local favourite restaurants, whether they’re after Brighton’s best fish & chips or a full English breakfast in Liverpool.

hungryhouse has a digital product suite encompassing website and mobile apps. We create engaging experiences that encourage fast ordering for our hungry customers and to entice repeat visits.

projectoverview.jpg
hh_bg02.jpg

Brief

hungryhouse had not seen a facelift in 5 years, the UK competition was ramping up with the introduction of Deliveroo and UberEats and our outdoor marketing campaigns in the UK severely mismatched the online presence. Over the course of the next 2 years, I led a digital rebrand project, which included brand colour updates as well as an entire UX rewrite across 7 platforms (for web, Android and iOS) simultaneously from the ground up. Together with the design team at hungryhouse and with the assistance of an external design agency, we have created a new look for hungryhouse. A consistent experience across the platforms and a product suite which is at the forefront of UI, UX and interaction design in the same league as our competitors.

In June 2017 we launched our Android apps and we have seen an increase in conversion rate on previously sticky pages of up to 70% affecting our overall conversion rate on this platform by 4%.

Early-November 2017 saw the launch of our iOS apps after almost 2 months in beta phase collecting data and testing with users. I will update here once we have solid conversion rate results on this platform.

Exploration

We began our digital overhaul by conducting stakeholder interviews with the key decision makers of hungryhouse to gather information around how each department saw the future of hungryhouse. Then armed with that information, we began a week-long discovery, ideation and testing phase in a war room in hungryhouse HQ.

We explored ideas around the main user paths and captured notes on how we can improve the customer experience and entice repeat visits.

erinfellows_portfolio_Hungryhouse_03.jpg
 
erinfellows_portfolio_Hungryhouse_09.jpg
 
erinfellows_portfolio_Hungryhouse_05.jpg
 
erinfellows_portfolio_Hungryhouse_10.jpg

Road mapping & rapid prototyping

 

Due to time constraints and the size of the project, we engaged an external digital agency to assist us with our digital exploration. Together we mapped out every journey, every problem encountered, every requirement. We began sketching and our initial prototypes were created ready for testing. This phase lasted approximately 2 months.

User testing

Multiple rounds of user testings were conducted user testing through each phase of our design exploration with a range of cutomers, We went through 4 rounds of extensive testing and design reviews before settling on a design approach. 

See user testing video – https://lookback.io/watch/ng7x2EBys8or5Eizn

erinfellows_portfolio_Hungryhouse_24.jpg
hh_bg01.jpg

Digital brand refresh

Upon embarking on a new digital experience project, it was a public opinion that hungryhouse did not differ visually at all from our main competitor Just Eat. Further, our digital red lacked vibrancy, our green failed accessibility and there was an overall discontent as the colours felt dull and dated against more vibrant native (iOS & Android) palettes. We needed to revamp.

 
Original colours

Original colours

We validated all our choices through A/B testing current and proposed colours within current Beta apps to ensure there is no negative impact on conversion. We conducted interviews and testing sessions with Hungryhouse & JustEat customers.

We validated all our choices through A/B testing current and proposed colours within current Beta apps to ensure there is no negative impact on conversion. We conducted interviews and testing sessions with Hungryhouse & JustEat customers.

devices2_03.jpg

New interactive experience

For the last 2 years, after our months of testing and iterating, our design rollout phase began. I have led and managed this phase from conception to completion with alongside the other designers at hungryhouse successfully designing 7 platforms simultaneously. The result has been a consistent experience across our entire product landscape, a fully tested customer experience, a competitive platform design that has solved many usability issues, revised menu structures and a beautiful express checkout for our returning users.

Auto geolocation upgrades and onboarding

How do we get them infront of the restaurants fast?

Auto geolocation upgrades and onboarding Through our data we uncovered that 90% of people order to the same postcode.

Total overhaul of our new user onboarding flow in our apps covered our previously clunky auto-geolocation. We integrated pinpoint accuracy and created an easy-to-use interface that only required 2 taps for set up and 0 taps for returning users.

autogeography.jpg

Returning user: easy reorder and personalisation

How do we make this process available and fast?

Through our data we uncovered that 60% of people order to the same postcode, from the same place and often order the same items from the menu.

A sexy new homepage experience was designed for our returning users. Our easy reorder feature was introduced on the homepage which surfaced the most recent order with a single tap to order again. We have seen a huge uptake in reorders since this was introduced. For those that want to try something a little different, we use the postcode and a smart algorithm to inspire and suggest new restaurants based off their previous orders and popularity in the area.

Reorder-Copy.jpg

Restaurant listing and menu

How do we differentiate from Just Eat, get people to feel hungry and establish an emotional connection to the food?

Through A/B testing we discovered users responded better to images than restaurant logos which allowed us to use inspiring food photography and so highly engaging and visual experience for the listing and menu pages was created. We also assessed the data that was displayed on each restaurant tile to ensure that we were surfacing content that would enable to user to make a decision. This info was also carried through onto the menu page for consistency. New animations and micro interactions were created to suit the new look and feel.

listingAndMenu.jpg

Guest user and express checkout

How do we get users through to checkout without distraction?

No account creation? Thats right, no account creation. During the design of our checkout, we attended a workshop with the Baymard Institute. After assessing Baymard’s recommendations, we created a fast and optimal solution for all our users. Creating an account as part of the checkout flow is a lengthy process and most users don’t like their data stored and find the process lengthy. We opted to promote a guest experience for all users who were not already registered with the choice to create an account at the end of the flow.

We previously had a drop off rate of about 70% at the login/account creation screen and we decreased it to 55% with our optimisations. For our returning user base, who were logged in an express checkout flow was created where users can pay directly on the basket! No checkout at all!

newuserand-returning.jpg

Order pending & transparency

How do we reduce the contact rate in our CC centre with simple questions?

Gen Y…. They must have everything now and immediate verification. 34% of contacts to CC are “where is my food?” or “has my order been accepted?” To avoid this nonsense going forward, all of our order pending states were mapped out and our entire messaging throughout the apps were revised. The result of this was significantly decreased inbound calls to our customer care department. Users were no longer left wondering where there food was or how they would get their money back if their order was declined. hungryhouse opted for total transparency and clear messaging. We worked with the CC department on this feature.

orderpending-states.jpg
 

Interaction design

How do we make our app have edge over the competitors as well as making it delightful to use?

With the revamp of our suite, it opened doors to create beautiful interaction design. Every page of had an animation overhaul to create more personality and engagement.

 
 
 
 
Next
Next

British Airways