Mobile App Design

My Role

UXUI Designer & Researcher


Collaborated with teammate Lingcan Ding


Figma, Axure, Illustrator, Power Point, Zoom

Project Time

Feb-May 2020, 4 months

Project Overview

To integrate Worcester Polytechnic Institute (WPI) digital resources into all in one platform and to improve WPI's digital campus life experience. Lingcan and I worked as a self-starter team to conduct this project from research, prototype shipping to user testing. 


Final interactive prototype with improvements from users' feedback.

Digital ID .png

Priority 1: Digital ID

Owing to the heavy demand for ID card on campus, users would like to have a digitalized ID card in their mobile phone.

User Flow        Prototype

Priority 2: Space Reservation

Current library tech suite booking system is designed for desktop version, it's not friendly to mobile users.

User Flow        Prototype

Space Booking.png
Dining Convenience.png

Priority 3: Dining Convenience

Users don't have access to learn the updated on-campus and off-campus dining information timely.

User Flow        Prototype

Priority 4: SNAP Booking

For now, users need to call the SNAP service and have to wait long time because of no notification.

User Flow        Prototype

Snap Booking.png



Objective: Learn about the users for whom we are designing.

Detail: User Research, Affinity diagram

As User Experience students from WPI, we noticed there are inconveniences in our campus life experience.  To integrate WPI's digital resources and to improve WPI's campus life experience, Lingcan and I decided to design a brand new mobile application.


User Research: Before we get started, we conducted user research to develop a deeper understanding of our users. We interviewed with 10 WPI students in total including 5 undergraduate students, 4 graduate students, and 1 PHD student. 6 of them are male, 4 of them are female.

Please find the question list and note-taking of 10 users here.

Affinity diagram: After the user interview, we stuck all the raw data we got and created the affinity diagram based on our research findings.


Here are the key insights we got from the Affinity Diagram:


User Analysis

Objective: draw insights from the data collected.

Detail: Persona, Empathy Map

Persona: Based on the research results, we identified our key user groups and created representative persona shown as below. The purpose of persona is to create reliable and realistic representations of the key audience segments for reference.

New Persona.png

Empathy Map: We used collaborative visualization to articulate what we know about a particular type of user. 

Emphathy Map.png



Objective: Set the direction and guides the product development process. Create a point of view that is based on user needs and insights

Detail: Value Proposition, Point of View Statement

Value Proposition: We mapped out the key aspects of the product. Value proposition helps us build consensus

around what the product will be.

Value Proposition.png

Point of View Statement: A Point of View (POV) is a meaningful and actionable problem statement, which will allow us to ideate in a goal-oriented manner. We focused our POV on our priorities.

Point of View.png


Objective: Brainstorm on a range of creative ideas that address the project goals

Detail: User Journey Mapping, Information Architecture

User Journey Mapping: We created the user journey map to indicate the process that a user goes through in order to accomplish goals.

New CJM.png

Information Architecture: We planned the structure of our mobile app, it enables users to understand where they and where the information they want is in relation to their current position.



Objective: Build series of prototypes to test our hypothesis.

Detail: Sketching, Wireframing, High fidelity prototype

Sketching: We used pen and paper to draw our initial solutions first.


Wireframing: Using wireframing represents our mobile app's structure, as well as its hierarchy and connections and key elements.


Brand guidelines: We mainly followed the WPI's brand guidelines when designing User Interface.

Brand Guidelines.png

Priority 1: Digital ID


Priority 2: Space Reservation


Priority 3: Dining Convenience

Priority3 flow.png

Priority 4: SNAP Booking

Priority 4 fow.png


Objective: Check whether the design works well with the target users.

Detail: Usability Testing

Usability Testing: to identify usability problems, collect qualitative data, and determine the participants' overall satisfaction with current design. We decided to conduct usability testing. Here is our Moderator's guide and note-taking folder.

Main flow we wanted to test:

  1. ​The flow of linking card, adding money, and paying with QR code.

  2. The flow of booking tech suite and individual space.

  3. The flow of finding off-campus restaurant with 10% discount and get the discount by showing digital ID.

Key Metrics we set:

A. Task completion time B. Task success rate C. User Acquisition D. Satisfaction Score

Key UI improvements based on first round of user testing

1. Move the home button in the middle of tab bar

Tab Bar c.png
Tab Bar - Home.png

2. Use green dashed line to represent availability instead of a full red line

Initial + Filter view).png
Initial view).png

Testing Results







Users should always be in the center: we experienced a tough time when designing the booking tech suite page. Because there are a lot of information should be contained. To design the intuitive interface, we should ask our target users for idea inspiration. Decide which part of information should be highlight and which part of information should be paid lesser attention.

Conduct the user testing at the earlier stage: In this time, we conducted user testing after we almost finish our high fidelity prototype. It cost us lots of time to make improvements after the first round user testing.