Project Description


UX/UI design
UX/UI design
Interface design
Interaction design
User research
Mobile design
Education systems

Xi’an Jiaotong Liverpool University developed Learning Mall, aiming to provide convenient learning experiences for students. In response to increasingly used mobile devices to record attendance through a WeChat mini-program, my objective was to create a better mobile experience. Initially, it started as a personal project, however, I was lucky enough to participate in a university-organized user testing group. I decided to take this opportunity and redesign the first launched version of mobile Leaning Mall to improve the student experience and rethink its role in the larger context of everyday student life.

See the website

The desktop app is an essential part of the learning ecosystem, allowing students and teachers to communicate and manage all the learning material.

Student Survey

Our testing group conducted a survey among other students to get more insight into why they use the mobile Learning Mall. Insightful data points were taken from the survey with 20 student participants, where we found that the app has a very low engagement due to poor functionality and lack of responsive design.


To validate our assumptions we conducted interviews with students to see what are the pain-points that students are experiencing with the current Learning Mall design.

User Testing

We also conducted user testing sessions with students to see what are the pain points that students are experiencing with the current Learning Mall design.

Affinity Mapping

The results were documented, concluding that students primarily have difficulties with recognizing the interface elements and finding the content they are looking for. The ideas were categorized into three groups based on the type of issue we identified when using the app.


To assist current users in transitioning to the new Learning Mall app, the onboarding experience gives an overview of the new features of the app. The registration process is simpler, allowing students to register with their social media account.

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. Colour-coded modules are easier to remember, making the app quicker to navigate.

Taking Attendance

Students can now easily take attendance in a class by using their camera to scan a QR code which is shown during a lecture on-site or remotely. Previous QR code scanner was difficult to access and did not read all its information, forcing students to manually choose their class and sometimes having to manually input attendance code.

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.



The new Learning Mall 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 they 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 Learning Mall significantly increased, which wasn’t the case for the mobile app. Ultimately the development focused more on the desktop app and Learning Mall was rebranded, adopting some of the functionalities in the proposal in the browser version.

Next Project

Next Project

Learner Onboarding Experience