Role
As design lead for the project I carried out all UX and UI elements.
As design lead for the project I carried out all UX and UI elements.
Skills
Competitors analysis, sitemap, user flows, user testing, wireframes, prototyping, high fidelity mockups, design direction.
Competitors analysis, sitemap, user flows, user testing, wireframes, prototyping, high fidelity mockups, design direction.
Date
Dec 2019 - Feb 2020
Dec 2019 - Feb 2020
Problem
How do we create a wine bar app that stands out?
Design according to the three pillars: confident, maverick and innovative. The app is about exploration, embracing life by the glass and putting the Vagabond experience in users’ hands with the following features:
– Venue locations
– NFC technology
– Personalised recommendations
– Profile & transaction history
– NFC technology
– Personalised recommendations
– Profile & transaction history
Wireframe development
The MVP is bold and vibrant, achieved by using lean UX methodology, repeatedly iterating the wireframes to finalise the sitemap, navigation and features. The app allows users to view venues and navigates them to the nearest bar, to sync their debit card to pay contactlessly, and pour drinks with NFC technology. Users can also explore wines by answering a series of questions that result in personal recommendations to experience new drinks, types, flavours and learn about pairings, as well as receiving personalised notifications.
UI design
The app was tested continuously to improve the product from low to high fidelity, using prototypes after each iteration. This was also done to quickly resolve any pain points in the journey as well as to present it both internally and to the client. During testing, it became apparent the home section needed refining to be more intuitive so the Vagabond card was removed and put in the Vagabond Card section. This section then developed to include transaction history, add payment card, a help section, search feature and account details.
UI design
Vagabond is adventurous, brave and maverick. The visual design plays on these characteristics, using bold typography, energetic brush strokes, and dynamic colours to build a fresh, premium look. This approach was carefully considered along with the subtle loading elements and iconography. The design direction created for this product has been extended to the website to ensure harmony between the platforms.
Wine
Beer
Cocktail
Loading Animations
Learnings
Due to time and budget constraints, I worked alongside the iOS and Android developers for each sprint, keen to ensure the gestures, animations and the quality of the build were in line with the UX, UI and client's vision. This was one of the most enjoyable parts of the project as I was able to learn more about how each platform is coded and we worked well together to find solutions to any challenges.
“I just went through [the app designs] and we LOVE them!
They look so great.”
They look so great.”
– Annah, Marketing Director at Vagabond
