Coffee Shop Mobile App — The final stage (My High fidelity project)
After the process and steps we have went through, Now we get to the point where we created an output mobile app that fulfills the needs of our users. In previous articles, we talked about the design systems used to create this system. Now, Lets present the Hi-fi screens with brief about them.
1. Local Components
As we talked earlier, it is very important to use components and design systems. I used a couple of components in my design.
2. Home Screen
In my home screen, I put a CTA at the top to encourage users to engage (Buy) with our app. To increase the sales, I put 3 sections which are:
1. Previous orders: with the ability to add them to your cart again.
2. Offers: To encourage customers to buy.
3. Nearby Coffee shops.
3. Splash & Onboarding Screens
They are screens that introduces our service to our users and sometimes used to give the user a brief about how to use the app.
4. Login & Signup Screens
To make it easy for our users to create account, I made the process done by small details and with the phone number only.
5. Settings Screens
In the settings, user will be able to edit his/her personal information, add and edit credit cards details and give reviews for his/her orders.
6. Coffee Shops’ Owners Screens
Some of the designers forget about the behind scenes part for their case studies. In this part of the app, user will be able to add his/her coffee shop and manage its details such as:
1. Name and working days and hours.
2. His menu and offers.
I also did not forget to add an effective empty states.
7. Find Coffee Shop & Order Screens
In this part, user will be able to find nearby coffee shops and see their detail(address, working hours), menu and offers.
8. Favorites’ & Offers’ Screens
In which user will be able to find his/her Favorite orders and coffee shops which make it easier for him to reorder them again which will increase our sales.
9. Cart & Checkout Screens
Inside these screens user will be able to review his/her order details and add or remove from it. In addition, pay for the order, with pop up messages to show the user wither the payment were successful or not.
10. Skeleton Loader & Error Screens
They are the screens shown to the user whenever there are an internet connection problem (Skeleton loading screens) or when there is an error.
