Tastecard / University Project

Redesigning Tastecard's app interface

Overview
As part of an Application Design module, I set myself the task of redesigning Tastecard's app interface. At the time, it was very outdated with limited accessibility and usability, as well as a poor aesthetic appearance, and being an existing user at the time I felt it could do with a makeover. As a result, I created a brand new visual style and flow for the app, along with a working prototype with a set user journey.
Delivery
UI / UX Design
Competitor Research
XD Prototype
Year
2020
The Challenge
"Select 3 interfaces from distinct delivery medium, a website, a mobile application (iOS, Android or Windows) and a digital interface of your choice (smart watch or an ambient technology for example). Your task is to conduct a design evaluation of each system and select 1 item to redesign. The purpose of the redesign is to significantly improve its usability, aesthetic and interaction qualities (user experience). You will spend 6 weeks on Part 1. The outcome of the project is a working prototype to demonstrate your interface redesign.”
The Solution
I decided to redesign the Tastecard mobile app. As a user of their existing service I felt there was a lot of opportunity where it could be improved, mainly in its aesthetics and interactive qualities. I developed a high fidelity prototype in Adobe XD to create a full realistic experience for the user, focusing on its visual appearance to create a much more enjoyable experience.
Research
My main focus was to improve the aesthetics and interactive qualities of the existing app. From downloading the app and exploring the different pages, it was clear to see that it lacked in modern design trends and customer retention qualities. It seemed like they try to put in as much information into the pages as possible by making the text very small, which will ultimately impact the usability of the app.
Existing User Testing
Before developing my redesign of the Tastecard app I decided to do some user testing of the existing app to further my understanding of what could be improved upon. I thought that doing a cognitive walkthrough of a given task would be a good way to understand the features of the app I could focus on.

“Access the app and filter the results to find a restaurant with the following filter criteria; Italian, available to use on Friday nights, and suitable for a group of 6.” After the testing was complete, I then gathered all the data to analyse how each of the participants used the app and how they felt about completing the task.
Initial Designs
I began by design process by first sketching out some basic wireframes for the app. From researching the competitors and gaining inspiration form my moodboards I was able to sketch out 3 basic design directions for the app, each having its own unique features to it. I sketched out 3 pages for each direction to get a good understanding of what style I liked most.
User Testing
With some screens designed, I thought it would be best from here to conduct further user testing of my own designs. Doing so helps me implement a more iterative process and ensuring the user is kept in mind. I put together a basic prototype of the main screens that the participants could navigate through, and simply asked for some feedback. The main pointers from this were:
‍

"Font size could be an issue for people with bad eyesight."
‍
"Could have a 'dark theme' for night."
‍
"The card could be portrait oriented to match with the other pages."
‍
"Menus could be included in the pages as it could encourage users to try new restuaurants."
Prototype Development
I began by design process by first sketching out some basic wireframes for the app. From researching the competitors and gaining inspiration form my moodboards I was able to sketch out 3 basic design directions for the app, each having its own unique features to it. I sketched out 3 pages for each direction to get a good understanding of what style I liked most.
Prototype
Once all the final designed had been made I could then get into prototyping it. I designed and prototyped the app on Adobe XD. I originally had tried other software such as InVision Studio and Proto.io however after playing around with them for a bit they just felt slow and clunky for me to use, and I felt that I could create and prototype similar effects much faster on Adobe XD.The transitions used and the flow of the prototype was thought of well as I wanted it to be self explanatory and nice and quick. Below is the interactive prototype I developed.

Fancy a chat?

Feel free to ping me a message, I’m always open to new opportunities and inspiring conversations!
‍
hey@samtruman.design
Say hello!

Check me out!

@2022 Sam Truman. All rights reserved.