loKaffe – Coffee Shop Locator App
About loKaffe
An interactive Iphone App Concept which allows users to locate their nearest coffee shop. This is an Uber eats style of application with an integration to make orders in App, add extras and be informed of your estimated collection time.
My role:
Designer
- Adobe XD
- Illustrator
- Photoshop
Problem
In 2019 there is a need for lifestyle purchases to be made on the go now, for example the increase of Applications such as Zara, H&M and others where customers are able to purchase what they need when they want.
As the coffee industry continues to grow I felt there is a need for one to be able to purchase coffee on the go, from all of their favorite stores. Through integration of the different brands a user can simply set their location – choose which brand they prefer – order goods – modify purchase(s) – pay in app – receive estimated time of collection.
As a starbucks customer for example they can simply download the Starbucks App but this allows for alternatives if a Starbucks store isn’t within walking distance.
User Personas
Based on the researches and user needs, I created three personas for different user cases.
User Flow
Wireframes
After strategizing the user flow I created low fidelity wireframes for the App. these wireframes provided a clear road map of the App, from a navigational point of view initially showing the login/sign up process, before selecting preferences for the coffee shops the user would like to use within their app. these preferences will be relevant within the location pages in relation to which stores will be visible within the search/available in the given Country. After selecting the store this leads to the order process and any additional extras required for the product. Payment options are also provided before receiving confirmation.
For this whole user journey I attempted to make the UX as seamless as possible utilizing clear CTA buttons in each stage, with the idea of a clean UI using 3 main brand colors throughout.
Creative Direction
The sign up process for this App is very simple requiring name, email and password; and the reason for collecting this data allows for users to have an account giving them access to previous orders so if they have favourites these can be reordered without having to go through the process of doing so again.
The third screen labelled Preferences is also very important. As mentioned previously this app works through numerous brands collaborating in a similar way to uber eats and allows for users to choose which ones should be visible on search results. Dependant on ones Country location some brands may also not be available.
Since the inception of Uber I have also been a fan of the UX and UI of their location page. As a result I have replicated this in a similar way when users are entering the location page. There is an auto-find your current location or have the option to enter a specific location. In addition to such the further three screens show that when clicking on a specific icon of the Coffee shop you prefer it will pull up some store information such as distance, opening hours, estimated wait time and the option to order if one wishes to proceed.
Ordering products online such as coffee there are always add-ons such milk preferences, extra cream etc so I kept the UX streamlined from this perspective allowing a user to pick their beverage, select if the order is to drink in or takeaway and the add-ons can be modified later in the process. The app provides a drinks only menu through post launch and after further testing additional food products could be added in the same format.
The second set of screenshots show additional drink options available.
After making a selection it i felt it important from a user journey perspective to be aware it is a 3 step process before completion, to choose add ons. There is also the option to skip a section by simply clicking on the green arrow to the next screen. The UI of selections was a set of buttons which are highlighted once clicked on.
As with the Addons I felt it was important for the user to be aware of the stages required before completion which was my thinking behind the green progress bar located towards the top of the App.
Payment has also allowed for the option of entering bank details or scanning the card on completion – your estimated wait time, order ID and the option to plan your route through google maps will then be available to make the collection process seamless.
Conclusion
Brand collaborations through eCommerce Applications have become more prevalent and I feel this concept is something which would work well within the market. Considering the problem I feel like this has been theoretically achieved through putting the user first in producing a clean interface which was easy to navigate through. Please see the Live prototype below with the App in action!
