hungryhouse redesign

Hungryhouse is an UK based online food ordering platform which provides customers a great takeaway experience and a valuable partnership for restaurants.

Year 

Products

Visit / Download apps

The Problems

Goals

• Redesign the hungryhouse platform on IOS, Android and Web so that they provide users with great food order experience and to stay competitive in the industry.
• Nudging users to our mobile apps due to higher conversion rate.
• Increase overall conversion rate.
• To provide users a fast, reliable and delightful ordering experience. So that users would come back to order more food.

Research and collaboration

We worked with an external agency in London to help our redesign process. It was a true collaborations, we worked on user and brand research, wireframing, card sorting, low-fi prototyping, customer journeys, hi-fi design, hi-fi prototyping and interactions. It was a great learning experience for me as I had the opportunity to work with some really talented people.

Our Users

Male and female who are age between 25 - 44, students, professionals with medium income (25.000 - 49.999 GBP). People who are looking for meals which are good value for their money.

Wireframes and UX flows

I worked on some of the web and mobile wireframes. We created wireframes with Sketch and basic prototypes in invision to test them with exciting and new users to validate the flows. We also get product owners and developers involve early in order to align business goals and tech constraints.

Daily task management

hh Design Team work out of JIRA using our own Kanban board to manage and allocate our weekly tasks. We meet twice a week to review completed tickets and assign upcoming tickets.

Tools

We design our product using Sketch. We export directly into Zeplin for sharing, commenting and the demonstration of flows. Quick prototypes for user testing flows are created using inVision. Our detailed prototyping is mostly done by myself with Principle or Framer JS when we need to explain microinteraction flows and animations. Slack is a studio-wide tool we use for communicating across departments. JIRA is also used for managing tasks that are in production within the development teams. We store all our files on Google Drive.

Folder structure

We have a very organised folder structure and naming convention for version control that helps us easily locate design files on our design server. This folder structure is particularly important to the process and synergy of our team.

Working with app team

Our mobile app development team is in Poland. So great communication is vital. Each morning we participate in daily standups to track progress on tickets that are currently in development and to answer any questions around the design or interactions. The developers work in fortnightly sprints using our designs directly out of Zeplin, coupled with the animated prototypes that I created. The designers own and follow their tickets end-to-end to ensure that the direction and experience is implemented as envisioned. Each ticket must be approved by a designer before it is passed by QA.

Working with the web team

Our web development team is located in Berlin. Due to the complexity of the web responsive suite, development is a lot slower. The design team is able to operate ahead of the web team to flesh out entire sections of the website and then move into a support role for their fortnightly sprints. They also work out of Zeplin following the flows we have created for each screen size.

Design & Prototyping

Prototyping is like designer’s super power. It is so much easier to show the prototypes than explaining your ideas and interactions on static design screens. I tried many prototyping tools, in the end I settled with invision for general screen flows, Principle for quick and dirty prototypes and Framer for hi-fi and detailed prototypes which requires some logic. For web prototypes, I use HTML/CSS/Javascript, developers can use some of the code from the prototypes. It helps speeding up development process.

UX flow for auto geo loation (Android mobile)

Framer studio has been extremely helpful with figuring out complex flows with animations. It also helps me communicate with developers about animation curves and easing values.  

When prototyping can speed up development is really empowering. Here is an example of using HTML/CSS/JS code to build a prototype which helps figuring out the animation sequence and timing. Some of the CSS and JS code was used for development. 

Take a look at the prototype here

User testing and Analytics

Historically we have always made great effort to go to the UK to meet with users and with restaurant partners in order to maintain relationships and to test our products. In Product Design, we typically focus on customer visits (Eat with Customers) unless we have something specific to test with our restaurant partners - as was the case when the partner portal was being redesigned.

Eat with Customers is field research conducted in the user’s home, which gives us an opportunity to better understand how our products are being used and how they can be improved. I focus on building realistic mobile prototypes for testing our ideas. We use Lookback to record and manage our sessions. We share all feedback with the whole product and development team and some of these feedback would translate to tasks and fixes.

To gain more insights from users, we conduct many A/B tests using Apptimize (mobile apps), Visual Website optimizer (web apps) and Usertesting.com. We also use google analytics to understand which part of the our apps have the highest user drop off point. A beta user testing group and an In-app feedback.

Handoff for development

When it comes to handoff assets and design to developers, zeplin is our tool. I work with developers closely to ensure the final animation results is what we envisioned, framer studio has been helpful, I can directly extract animation values from Framer. I can then provide animation values to developers to get the best results.

Each flow is exported individually, developers are not only able to collect assets but also able to make comments to the flows. 

Design assets are orginised with sketch symbol library. Single source of truth!

Challenges

Product design and development are not always smooth. We have many constraints with legacy back-end systems, development time frames, business decisions and budgets. We have to constantly justify our ideas with how much values for our customers and business alingment.

Developing hungryhouse from outside the UK can also be challenging, which is why we make an effort to travel to the UK to talk to our our customers and restaurant partners.

New App suite

The launch of our new apps were probably our biggest achievement for 2017. In June, we saw the release of our new Android app suite to market. This included our new colours and an entire new UI and UX for our customers. After 2 years of planning, iterating, testing and working alongside a creative agency, Android was the first to be released. We have been iterating and improving the experience continually, as we learn what works and doesn't work for our users.

Featured in Google play store

In November 2017, our Android app was featured in Google play store.

The Mobile Team contributed quite a bit to our revenue earn out goal in 2017, especially with the launch of our redesigned iOS and Android apps. As an example, our logged out conversion rate has nearly doubled, and our logged in conversion rate grew 10% since releasing our new Android design in June 2017. Our overall mobile volume (IOS & Android) grew from around 35% to 50%.

Iphone & Android Apps

Responsive web redesign

The responsive website has seen many iterated versions over the last few years as we continue to improve the experience and add value for our customers. When the apps launched with their new colours and experience, we upgraded the colours of the website also. Since then, we have solely focused on creating a better mobile experience for our web users finishing the restaurant listing page, menu page and guest checkout experience.

Desktop and mobile web sites

In February 2018, we were acquired by food ordering platform giant Just-Eat.

Behance / Linkedin / Twitter / Email

© 2018 - eddiechungdesign.com