Supermac's - Online Ordering Mobile App

Supermac’s had found the previous app had a low engagement rate, where customers seemed to prefer using the website to order their food. Addressing the poor usability issues was the first challenge of the project, we wanted to offer Supermac’s customers a seamless way to order food directly to their front door.

We kicked off the project with a workshop with the key stakeholders from the Supermac’s team. During this workshop, we worked to define the exact business goals of the redesign, the intended users of the app and we mapped out the current user journeys.

The old version of the mobile app

Following on from this, we took some time to conduct usability tests on the existing app to help further identify the usability issues. It was here we noted the issues customers had inputting their address, we were able to see in real time how the app would lag and freeze. Users told us how some of the product editing screens were “misleading” and not straight forward. This step is critical when you have an existing product and are looking to learn more about the pitfalls of the existing design. These sessions also allowed us to probe the customers to gather more insight into their own needs and wants from such an experience.

With more insights gathered into the current pitfalls, we set out to devise a solution. The first step was to create some user flow maps for the new app. These help us to get a broader picture of the necessary steps and screens required for the redesigned user flows.

We find these documents great for giving our clients a clear insight to our intentions with their product, they can see for themselves how their customers might navigate through the app.

After a period of sketching down rough design ideas and user flows, we created wireframe solutions for the new user experience. Wireframes are the blueprints of the design and help us to iterate quickly without having to worry about fonts, colours or images etc. With the wireframes we were able to create a small prototype of the app which worked towards showcasing how the new UI for the redesign would behave. It allowed us to test out the different user flows we had originally devised in our user flow maps and we were able to collect feedback to improve the design.

With our insights gathered, designs mocked up, our ideas tested and validated, it was time to start crafting the new look for the Supermacs app. We adhered to the Supermacs brand guidelines. We kept in mind how the new app would need to have harmony with the new in-store kiosks that we also designed and developed.

Our final designs were created using Figma. The graphics team in Supermacs supplied us with brand new imagery for all the products to really help bring the app to life. We conducted another round of usability testing to ensure we ironed out any remaining usability issues before handing off the design specs to the development team. The official update was pushed up in July 2022 and the new apps can be found on both Android and Apple app stores.