Duration

2014-2015 @ QSC ( Student Portal of Zhejiang University )
Check it out on App Store (External link)

My Role

As a team, we conducted user research together. I also critiqued and studied our previous version of Mobile and other APPs in the market to provide insights. With several iterations, we came up with information architecture, wireframes, and interaction and later transformed them into high-fidelity interfaces. To communicate with engineers as well as test the designs with users, I also built the prototypes. (By the way, my awesome friend and teammate Alejandro Wang is actively looking for an internship! Check him out if you have an opportunity!)

Methods and Tools

User and Market Research, Persona and Scenario, Wireframing, Low-fidelity Prototyping, High-fidelity Prototyping, Sketch, Balsamiq, Principle, Invision

Introducing QSC MOBILE

Before Mobile

If you are a student at Zhejiang University, these are what goes into your face every day: courses, timetables, exams, assignments, research programs, school buses, etc. These just belong to a tip of the iceberg. All the information is located somewhere different. You only have two choices: either waste time to check all of them or, get lost.
Even if you manage to check out the information website frequently, you still miss fascinating on-campus events.

After Mobile

Now, you could change all of these by having a personal assistant on your phone, saving you the time and energy to manage information that you need for school. It is QSC Mobile.

TODAY: Stay focused, be present

The home screen always shows your ongoing event and other events coming up today. The countdown visualizes the current event's progress.

CALENDAR: Make the most of your time

The schedule is synced with the official academic calendar and customized for Zhejiang University students. You could view your calendar in different ways and glance your weekly course timetable.

Discover: Never miss fanscinating events

It is the window opened up for you to get in touch with the colorful events on campus. You could add them to your calendar in one-click.

TOOLS: Have the most useful tools at hand

Whenever you want to check your progress of your physical training, your GPA, the school bus, they are always available.

Approach

The approach that we reached the final design is visualized below.

Design Direction

Before Design: Gather Requirements

User Requirements: We identified the two problems through interviewing 13 users, sending out 50 surveys and reading reviews of other applications on APP store. I also critiqued them as well as our old version of Mobile. Then we proposed the product and persuaded the team.

Other Requirements: We also did market research and communicated with school staffs.

How to solve the problem:
Personal Assistant but not a One-stop Shop

I explored the design directions with sketches and quick prototype with paper.

The design directions diverged in two ways - a one-stop shop, and a more intelligent personal assistant. But I found some problems with a one-stop shop.

Everything VS Just the thing

#1. According to the survey, some of the information is seldom required by students, e.g., maps.
#2. Some information doesn't fit in the context of a smartphone, e.g., financial systems.
#3. The one-stop shop concept was also not well liked in the paper prototype test session.

Instead of seeing all the information, I'd rather see only one thing. That is what I am looking for.
——Quote from paper prototype test

So, what are they looking for?
We drew the pattern from connecting typical scenarios and found that users they require for specific information based on where they are on their schedule. When they are free, they want to check out events; when students are right before the class, they want to know where and when the class is. So we defined Mobile as a Personal Assistant, who manages the important information, as well as act differently in intelligent scenarios.

Scenario mapping by Alej Wang

Information Architecture

Below is the information architecture and the feature structure of Mobile.

Calendar, Discover, Tools represent the most frequently required information. And Today is a space where we could explore more with intelligent scenarios.

Right now, Today shows users' ongoing events and based on the event provides quick access to some features, for example, documenting an assignment when in class, getting tickets to an event in the calendar, etc. In the future, when we are capable of developing personal recommender algorithms, this home screen could also suggest on-campus events based on users' interests and locations.

IA illustrated by Alej Wang

Wireframing

Below is the main interaction of Mobile.

A Closer Look at Mobile

Interactions and Features


Intelligent Scenario: Quick Add an Assignment in Class

Users are not going to be bothered by an album full of slide pictures or asking friends every time. They are able to add an assignment and set the deadline real quick in class.


Put everything in your calendar

The calendar of Mobile is synced with the official calendar of school, which is our core competence. But for sure users want to track everything in a single application.


Poster Wall

Poster Wall

Advertising events by posters (check posters I made here) is a tradition in Zhejiang University. A lof of our users mentioned that they took and kept pictures of posters they liked. They didn't want to see this tradition disapper with the rise of Mobile. So we designed this section called poster wall to encourage organizations to keep working on deliver visually-engaging branding materials.


Other iterations

List View VS Card View to display information
Iterations of controls

Interface Design

Interfaces designed by the team

IOS Design Guidelines:
We used less shadow and border, colors, to make users concentrate on the core contents. And for layout, we used tab bars which is a common practice of iOS Apps.

Reference to Native APPs:
Interfaces of the settings and calendar were referred to the native Apps to make it easier to learn.

Color Coding:
Black and white are used the most to create a clean and simple experience.

RESULT


Till Oct. 2016, Mobile has more than 100,000 users and 18,000 daily active users. 61% target students in Zhejiang University are using Mobile now.
We really have turned Mobile into a personal assistant of every student of Zhejiang Univeristy.

REFLECTION

I need to value every single design decision of mine.

QSC is a student organization and every member works without pay at the spare time. So the development turns out to be very expensive. In this situation, as a designer, I must make sure that my design decisions are supported, and my interfaces are pixel-perfect. Only in this case could our engineers dedicate themselves to a more efficient development process.


My job definition as a UX/UI Designer is broadened.

On our team, there isn't a specific person responsible for user research, so every designer took the responsibility partially. Apart from conducting user research, designing workflows and interfaces, I tried to understand more, communicated with engineers and staff of the school, tried to understand the technical issues and guide the product through iterations of the design. Finally, we made it deliver this amazing product.


Ask why again and again

As a UX Designer, my role could be simplified to "problem solver." Whatever we are building, we're constantly making choices in the quest for the better solution. My favorite problem-solving tool is to ask why again and again until I get to the cause. I want to find the real reason why a problem happened rather than only treating the symptoms.
For example, when we found that students always missed the on-campus events, I questioned myself why this wasn't found out when designing the previous version.
And I soon found out it was because of Renren (the social network once launched as “China’s Facebook”) reaching its vanishing point. Therefore, the most important channel to spread on-campus events was cut off.
Well, some people say that "You still have Wechat! Students share Moments (Wechat's social network posts). Since most Moments friends are acquaintances, messages delivered by them can be more convincing."
Well, it sounds true. However, it's just because of friends are acquaintances that people tend not to share posts frequently. Events shared by an organization will not go further from people who are in it.
There exist traditional channels to spread information like posters and banners around the campus, and campaigns on the Student Square. They have low exposure rates and cover just a small portion of students.
Sorting out the logic behind the problem gave me confidence when proposing the feature.