Cover-01.png

PiBox

Mobile App Design

My Role

UX Designer & Researcher

Team

Collaborated with teammate Lingcan Ding

Tools

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. 

Outcome

Final interactive prototype with improvements from users' feedback.

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

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

Empathizing

 

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.

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

Defining

 

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.

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.

 

Ideation

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.

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.

 

Prototyping

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.

 

Priority 1: Digital ID

 

Priority 2: Space Reservation

 

Priority 3: Dining Convenience

 

Priority 4: SNAP Booking

 

Testing

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

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

Testing Results

Round1

Round2

Reflection

 

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.

Copyright © Minkun Liu