Let’s see how our product evolves with the case study below.
Case 1: Dashboard’s History
Prior to Oh!ya, I only had few months long experience in iOS developement and non UI- design experience. At that time, as there was no UI designer in the team, I have to draft the UI design myself as the leading developer, which proved to be a wrong decision. And the first version looks like this,
Figure 1. Customer storyboard
Figure 2. Cook storyboard
It is obvious many UI pages are complicated and unclear, especially the dashboard page.
Figure 3. version 1 dashboard, designed by the developer
This dashboard contains too many functionalities, including the profile editing, time selection, and meal adding, which actually should be scattered across different pages. The user would easily get confused and even lost if without the properly designed user guidance.
In the version 2, with the experienced UI designer Ms.Celine on board, the dashboard is separated from other functionalities, such as the meal adding and time selection mentioned above.
Figure 4. version 2 dashboard, by UI designer
It looks much more elegant than the previous one, and most importantly, the tableView controls the entries of functionalities like profile editing, payment, and password settings. The “My Meals” section will toggle today and history meals you’ve ordered, with each tableViewCell indicating the order details. The “Leave a review to your cook” denotes the order status and the changes based on status of the entire transition between the cook and customer.
So it comes to the version 3. Now it looks good. What are the remaining problems? Firstly, the status bar might seem confusing for new users; secondly, “Edit Profile, Payment, Change Password, …” features should be removed from dashboard.
Figure 5. Version 3, dashboard (Orders Tab)
Now, the “Edit Profile, Payment, Change Password” features are moved to the “Me” Tab. Though the “Now”, “History” slider buttons, user can toggle the dishes between today and tomorrow.
Case 2: User Guidance
When using apps, many of us used to be confused or anxious about what to do for the next step, or busy finding the usages of the buttons in the page. As we are new to the product design, it ‘s very likely to make the same mistake due to the lack of adequate user guidance.
Figure 6. Oh!ya foodie first page
This is the first page of the foodie app. There are some buttons on the navigation bars and lots of tableViewCell. Customers may get lost about what should to do next, and here we managed to make it better by adding a blur view on the top.
Figure 7. Blurred guidance page
This blur view clearly guides the user through the process. Although this kind of design is critical to improve the users’ app experience, don’t rush to add too much guidance that bored them.
Case 3: Landing Page
Now most apps have landing pages, which usually are designed by product manager, marketing team and UI designer. The landing pages are better to be within five pages, clearly speak out the main purpose and functions of the app and only pop up when version is updated.
Figure 8. Version 1 Landing Pages
Figure 9. Version 2 Landing Pages
When implementing the version 1 app, the idea is still having the host invite the customers to his home. So the third page in version 1’s is about some friends sharing the dinner. As the version 2’s business goal lies in pickup/delivery of homemade food, its 3rd page becomes a burger on your car seat.
In addition, by upscaling the font size of titles, the layering between titles and subtitles are clear enough to highlight our business target for the new users.
Thanks for your reading! The next chapter will perform a deep-dive into the technological part.