Click anywhere to interact with this prototype

MBA Business School

iOS

Apr 2015

Behind the Scene

Team Members

  • 1 Visual/UI/UX Designer: Me
  • 1 iOS Developer
  • 1 Product Manager

My Responsibilities

Design complete prototypes and logo for MBA Business School.

Target Users

Youge people who want to learn MBA knowledge and aged between 22 and 35.

User Scenario Studies

China’s App Store has many apps related to MBA. While most of them lack of a comprehensive content or the elaborate interface, fails to provide the good user experience or arouse their study interest. Our target users are young people who want to learn MBA knowledge. They need an app that can provide them with comprehensive knowledge and act like a teacher who accompanies them around.

Comprehensive News Feed:

Users can get information about MBA anytime and anywhere and we have nothing else but MBA news.
  • Terminology Explanation:
    1. We have the most comprehensive MBA terminologies. Users can browse the information like browsing news and look up the relevant terminology like using the dictionary.
  • Book Shelf:
    Users can download and read e-books in our e-book stacks, which can save them a lot of time looking for online e-books.
  • Beautiful and fluid UI design.

Wireframes


Wireframe

Problem 1: The MBA information can be broken down into many ways, and how can users know what information they are reading at a glance?

  • Solution: Add different colors of tags in front of each piece of information to indicate different kinds of information. For instance, financial information tag is purple, and, workplace information is blue.

Problem 2: How to arouse users’ interest in reading books?

  • Solution: At first I chose to use the traditional list form, using the book thumbnail and topic. After our usability test, users said that the interface filled with too many words was very rigid and would lose their interest to read. Later I found that each book cover actually could convey valid information (topic, author) effectively, so I abandoned the list form and only used cover to present each book. After the second round of usability test, the user thought that the interface with less words and the larger thumbnail was more interesting, and they were willing to stay more time on this page.

Problem 3: How to make the app look like reliable but not boring?

  • Solution: On the one hand, the content should be accurate and correct. On the other hand, the elaborated design could give users more confidence. I chose blue and black for the main color of the bottom bar of the page, because these two colors will appear stable and reliable. To make the app less tedious, I also added a lot of interesting little details to UI and UX design.
  • News Feed Page:According to our research, most users prefer the page with both words and pictures. So I didn't rush to display a lot of text on the news feed, but displayed an interesting picture with some information, allowing the users to slide up to explore what's next.
  • Terminology Page:I highlighted the high-frequency terminologies with blue. Therefore, users could notice them at a glance and the page seemed more interesting with the highlighted color.
    News Feed Page
    Terminology Page

Usability Tests

We conducted two rounds of usability tests. In each round, we invited 50 participants to use the camera, observe their interactions with the app, and analyze the problems as below.
  • Learnability:
    How easy is it for users to accomplish basic tasks the first time they encounter the design?
  • Efficiency:
    Once users have learned the design, how quickly can they perform tasks?
  • Memorability:
    When users return to this design after a period of not using it, how easily can they reestablish the proficiency?
  • Errors:
    How many errors do users make? How severe are these errors? How easy can they recover from the errors?
  • Satisfaction
    How pleasant is it to use the design?

Feedbacks

  • Learnability:
    95% of users had no difficulties using MBA Business School from the beginning.
  • Efficiency:
    90% of users can use all the functions in a very short time. 10% of users took some time to realize how the tags work.
  • Memorability:
    In the first round of usability tests, we invited 25 users to use the camera. One month later, we invited the same group back. 100% of them know how to use the functions.
  • Errors:
    80% of users barely made mistakes.
  • Satisfaction:
    90% of users believed that the interface is beautiful, the content is comprehensive and organized.