A UI case study for bringing a new look to the usual

The Challenge

VoiceTube is a well-known English-learning platform that empowers people to learn the foreign language through videos. The Taiwan-based startup has received numerous awards for its English tutorial service, including winning Grand Prize from Facebook’s FbStart Apps of the Year in 2016.

While has helped so many Chinese speakers to learn English both on the web and mobile apps, the existing interface design of VoiceTube Dictionary app does not quite meet the expectations in terms of aesthetics and usability. Therefore, as a frequent user of the app, I found this as an interesting challenge to solve.

Research and Analysis

I conducted two methods of research to learn more about the problems users’ are facing:

Usability Evaluation

Current VoiceTube Video Dictionary app for iOS

The evaluation of the current VoiceTube Video Dictionary app identified the following problems:

1. Menu

  • Hiding main navigation in the hamburger menu has made the content less discoverable and increased the difficulty for users to complete their tasks
  • A label in the menu has run off-screen, and tapping “About VoiceTube” will cause the app to shut down

2. Navigation

  • The in-app navigation relies heavily on using the hamburger menu, there’s no “back” function on the screen, the only way to return to the previous page is by using the side menu and navigate from the top level again

3. Pronounce Buttons

  • Placing the US/UK pronounce buttons right after each vocabulary word not only results in misalignment in layout but also makes it harder for users to scan over the screen
  • The touch target size is too small for human fingers

4. Visual Design

  • The spacing between title and content is inconsistent
  • The current interface design does not make a good impression at first sight

User Review Analysis

VoiceTube Video Dictionary (v1.1.24) Ratings on App Store

Despite the identified usability problems, the VoiceTube Video Dictionary receives a 4.2 out of 5 rating on App Store, including 60% of 5-star and 20% of 4-star feedback. From my findings, the high average rating of the app could be ascribed to the following reason:

  • The app is simple, yet it has served its purpose well — to look up English words, listen to pronunciation and find example sentences/videos. There are no unnecessary features.

However, most of the positive feedback is following by users’ complaints and suggestions of how the app could improve.

After reviewing the user comments in App Store, I have summarized some user pain points below:

  1. Users are unable to sync Word Book between web platform and mobile app
  2. Navigation is poorly designed: there’s no back button
  3. Lack of sorting options in Word Book and History
  4. Users can only delete one item at a time from the word list
  5. The pronounce button is too small on the screen. The location of the search button has made it difficult for the finger to tap
  6. The Android version of the app is more visually appealing

Solutions

With all the insights gathered, the following are my solutions to the redesign challenge:

1. Menu & Navigation

  • Move the primary navigation from the hamburger menu to the bottom tab bar, several reasons are:
    1) Current app only has 5 top-level destinations
    2) Consider the reachability for the thumb, the bottom navigation is more accessible and intuitive on the mobile device
    3) As mentioned above, a visible menu improves content discoverability and users’ task performance
  • A “back” button is displayed when navigation is more than one level

2. Sorting
Users can now sort the list by dates or alphabetical order.

3. Delete Function
There’re two ways to delete the list item now:

  • By using the swipe gesture as in the original app
  • or by using the “Edit” feature which allows the user to remove all the items at once

4. Search Button & Pronounce Button

  • As a dictionary app, the search function plays a key role in the app navigation, by repositioning the search button to the bottom tab bar, it is much easier for users to reach and more efficient to look up the vocabulary word
  • Increase the tap area for the pronounce buttons and make the buttons align to the horizontal or vertical grid

5. Visual Design
A quick walkthrough of the Android VoiceTube Video Dictionary app has helped me gain a better understanding of the user preferences and the brand characteristics. I decided to set the dark theme as the default theme in order to keep the user experience consistent across two platforms.

VoiceTube Video Dictionary on Google Play Store

6. Other Improvements

  • Home Screen
    Instead of seeing “Daily Word” as the default screen every time users start the app, I introduce a new “Home” section which includes “Word of the Day”, “Trending Words” and “Word Facts & Stories” to make the usual dictionary app more dynamic and interesting
  • Word of the Day Archive
    In case the user might not use the app on a daily base, an archive of the previous “Word of the Day” help users to catch up with the missing ones
  • Custom Category in Word Book
    From the App Store user reviews, many have mentioned the wishes of creating their own categories in Word Book. This feature allows users to save the vocabulary word to a single category or multiple categories

Final Thoughts

I was facing a dilemma of whether to use the dark UI or light UI during this 7-day redesign project. Although I have learned from several sources about the good, the bad as well as the dos and don’ts of dark UI, it was still a challenge for me to make the decision.

In fact, the above solution was my third iteration, and I was started in light UI initially. What made me finally decide to not use the light theme was driven by the goal of bringing consistency across different mobile platforms.

Thus, for my personal project, I did not put business goals or marketing strategy as the primary concern, instead I put my focus on how to bridge the gap between the original iOS and Android app design, and be extra careful about readability and clarity to provide a more consistent experience to the end users.



Source link https://uxplanet.org/-voicetube-video-dictionary-app-aa859057452f?source=rss—-819cc2aaeee0—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here