Review of OH!YA, INC -Part II (Product Design)

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,

Customer_0_ScenesFlow

Figure 1. Customer storyboard

CookScenesFlow

Figure 2. Cook storyboard

It is obvious many UI pages are complicated and unclear, especially the dashboard page.

Cook_5_dashboard

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.

v2

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.

v3

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.

Screen Shot 2017-08-20 at 1.56.41 PM

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.

cust_home_guide.png

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s