Project Description

XJTLU
Feb 2019 – May 2019

Redefining Student
Experience

Overview

Voluntary project for Xi’an Jiaotong Liverpool University to redesign its online learning platform “ICE” for students and teachers. “ICE” has a mobile app and a browser-based desktop app. In this project, I am focusing on improving the mobile experience for university students.

Problem

ICE allows students to access study materials uploaded by teachers from a desktop version of the app. Those features are naturally harder to perform on a mobile screen, resulting in ICE being rarely used on mobile devices, even though it has the potential to become a convenient tool, used when students are not in front of a computer. The current mobile functionality needs to be reprioritized, emphasizing the accessibility of features feasible for the mobile screens.

Approach

The existing mobile app is a limited version of the desktop app shrunk down into a phone screen. The objective is to rethink the mobile experience of “ICE” for students by taking advantage of the mobile features and by optimizing the existing processes. To approach the design problem and make improvements, I needed to find out what students want and what are their frustrations when using the app.

ICE Design in February 2019

Research

I participated in a university member meeting with developers, product managers, students, and teachers to discuss the direction of ICE development and interview a group of students. Before the meeting, I surveyed and interviewed students about their experience with ICE, allowing me to construct a better solution to their problems. Insightful data points were taken from the survey with 20 student participants:

40%

Students use the mobile app out of all ICE users

95%

Students that are using the mobile app to record and track their attendance

5/12

Number of used functions out of the total available features in the mobile app

Interview 1

“I only use the mobile app to record my attendance. It’s easier to use the phone than a computer.”

“I wish it was easier to open the camera in the app to scan the QR code. Sometimes it’s easier to use WeChat for that. Also, the ICE app sometimes doesn’t work, unlike WeChat.”

“It would be nice to be able to see my grades on the app and check my daily schedule. I have to use other apps for that.”

Interview 2

“Sometimes I use the phone app to check the assignments, but I use the ICE website more often.”

“What I like about the mobile app is that it doesn’t log me out every time I close it. Not like the ICE on desktop.”

“It’s frustrating that there is no consistency between resources and submission boxes in each module.”

“I wish I could save important pdfs, so I don’t have to look for them every time.”

Interview 3

“Its always hard to find the presentations or pdf’s, and I have to look for them every time.”

“There should be a calendar so I can quickly see the deadlines.”

“I never use the messages feature. It is much easier to use WeChat for that.”

“Sometimes, I forget to take the attendance or I come late for the class. I wish there was a way to see the attendance code for the class.”

“There many extra unnecessary modules on the home page that I never open.”

Findings

  • The app’s interface is unnecessarily complicated and inconsistent
  • It is hard for the students to find the content they are looking for
  • Important functionality is missing, and the existing one is poorly designed

Interface Design

Content & Functionality

Information Architecture

Idea

I wanted to refresh the mobile experience for students and encourage them to take advantage of their mobile phones for learning purposes. After the research and analysis of the current ICE app, I decided to simplify the existing essential processes and focus on developing five main affordances:

Site Map

Sketches

Design System

Typography
Illustrations
Colors
Iconography

New Features

Browsing Calendar

Currently, students have to use another website to check their weekly class schedule, since the calendar on ICE only shows assignment deadlines. The new calendar aims to merge the weekly timetable and deadline calendar into a simple schedule. Color-coded modules are easier to remember, making the app quicker to navigate.

Accessing Resources

The previous design was flawed in organizing online resources for the classes. Consistency of the interface and clear content organization makes it easier for students to find the resources they are looking for.

Recording Attendance

Recording attendance is the most frequently used function in the mobile app. Redesigned information architecture prioritizes this function by making it easier to scan the attendance QR code. Previously, the user needed to five steps to record the attendance. Now the user can use a quick link to open the attendance page and instantly open the camera that scans the code, automatically recording the attendance.

Visual Design

Outcomes

The new ICE app prototype was presented to the development team, which decided to implement some of the suggested features. Although the team approved the design, the original app uses a framework with many limitations, which makes it hard to develop the new concept. Ultimately, computer science students were encouraged to continue the development as a voluntary project.

Prototyping different options, and exploring possibilities of user flows were intriguing parts of the design process since it showed how much the product could be improved. For the next design, I would need to work closely with the developers to better understand the framework limitations and find a compromise between available technology, student needs, and business goals.

2021 Update: Due to the pandemic situation, desktop use of ICE significantly increased, which wasn’t the case for mobile app. Ultimately the development focused more on the desktop app and ICE was rebranded into Learning Mall which adopted some of the functionalities in the proposal in the browser version.

Next Project

Next Project

Learner Onboarding Experience