OLIVEBOARD CASE STUDYRedesigning the Tips and Tricks Feature

BACKGROUND

• Oliveboard, Banglore provides web and mobile based personalized coaching for various competitive exams in India. Courses include Banking, Engineering and MBA.

MOBILE EDUCATION

• These are some of the use case scenarios which demand a mobile solution.

• Mobile education - or m-education is education on the move.

“Long commutes without books with exams around the corner”“Unable to remember the formula learnt yesterday”

TIPS AND TRICKS

• The “Tips and Tricks” section of the application gives users helpful hints and easy access to frequently used formulae / shortcuts for different exams.

CURRENT NAVIGATION

• The current version requires users to swipe forward to access the next tip.

• There are 55 tips. So say a user wants to go to the 10th tip, he/she has to swipe through the first 9 tips to reach it. 55th tip requires a lot of patience to reach!

OTHER ISSUES

• The tips are not categorized. Most users while trying to re-collect a tip, remembered the topic and not the tip number.

• Most users requested a bookmark feature so that could save the tips they needed the most.

WIREFRAMES

• Starting out with good old pen paper; I looked at springboard and list view means of navigation.

• We wanted the users to get a quick overview of all tips and navigate easily to a desired tip. These two navigation styles allow for greater content.

WIREFRAMES• I went on to mock up both these

styles in Indigo Studio.

• The designs generated further questions such consistency and amount of information made visible.

• Categories looked cramped in the springboard view and it stuck out from the navigation style of the rest of the application. Reducing number of boxes per screen meant more swiping. Hence we chose the list view.

In the spring board view, the highlighted tabs indicate bookmarks and in the list view the stars do the same job.

USER TESTING• The list view again presented the question of presenting

details inline or drill down? Ask the user! We decided to go with drill down because :

• Inline are exceptionally useful when users want to compare details. This was not the case with their observed usage.

• The word list employed a drill down approach and having two different navigation styles for a similar list view = confusion.

BOOKMARKS• Initial designs had the

bookmarks feature with two tabs “All” and “Favorites” at the top.

• Tabs took up screen space, in addition to the navigation bar at the top.

BOOKMARKS• An star icon on the home bar,

corresponding with star on the list. The star acts as a toggle and the bookmarked tips slide on to the screen and slide away.

• The animation lets the user know that they are still in the same context aka tips and tricks.

• I created a quick (rough) demo video to illustrate this. https://www.dropbox.com/s/5fhrnuv5i6azmtx/Demo_5.avi

BOOKMARKS• The user can select and de-select a tip in the drill

down view.

• The bookmark star appears in the navigation bar only for the tips and tricks and navigation menu.

• I had also created an additional option of being able to access bookmarks from anywhere in the app. Screen 3 shows up.

• Lastly, I suggested replacing the nondescript home with the Oliveboard icon. Most users are familiar with pressing the logo to go back to the home screen and it adds a subtle branding element.

• The changes suggested will be incorporated in the second version of the application.

LESSONS LEARNT

• This was my first time designing interactions for the mobile and Android platform. It was a lot of fun and also made me aware of the several constraints / consequences of each user action.

• One has to make allowances for user’s lack of attention when using the mobile platform.

• I wanted to iterate some more on the designs/ test more but had to work with time constraints of delivery of the next version. So next time more planning and quicker iterations !