top of page
iphone_13_pro_mockups_7.png

IMLeague App Redesign 

Project Overview

My role
Project Lead

  • Recruited group members.

  • Defined and maintained product requirements and led the design team to plan, track, and execute requirements.

  • Facilitated weekly meetings and design workshops.

UX Designer

  • Conduct background/ competitor research, and user interviews to understand pain points.

  •  Translated user needs into clean and efficient solutions through sketches, wireframes, and prototypes.

  • Conducted user testing sessions to validate design decisions.

Tools we used

Figma, Figjam

Timeline

05/2022- 07/2022

Project Background

IMLeague provides convenience for users to attend intramural sports activities. However, there are lots of usability problems within the current design that disappoint users and discourage them from using it continuously.  As UX designers and also IMLeague users, we would like to use our UX skills to help figure out where the problems are and create tailored solutions to provide a better user experience.

Outcome

The team was able to create high-fidelity interactive mockups for improved course browsing, searching, registering,  and unregistering flows. The design was validated through several rounds of user testing and led to a higher satisfaction rate for users. A full app flow can be viewed as below.

Design Process

For this project, the team adapted the Design Sprint methodology and completed 2 rounds of Design Sprints. Each sprint spanned 4 weeks.

Group 352.png

01. Discover  the problem

User Interview

The team first started with user interviews.  5 in-depth interviews were conducted to current IMLeague users.

 Competitive Analysis

After the interview, the team started listing out some of the competitors of IMLeague.  Each of the team members explored 2 or 3 competitors and shared their thoughts with other teammates during the group discussion session.

微信图片_20220706230355.png

02. Define the scope

Affinity Diagram

All the feedback and insights collected from user interviews were sorted and organized into an affinity diagram. During this proces , the team used red stickers to vote for areas that they wanted to focus on.

Design Sprint.png
User Flow

After deciding on the direction, the team chooses to map out the current user flow (AS-IS) to help us better understand how current users use this app. When the AS-IS flow was finished, we then developed an ideal future user flow (TO-BE) to demonstrate how our design can change the way users interact with the app.

asis.png

AS-IS Flow

to-be.png

TO-BE Flow

We decided to focus on

​

  1. How might we create an easy way for users to explore, register , and unregister  courses
  2. How might we tidy up the information architecture within the app so that users won't feel overwhelming
  3. How might we allow users to track their registered courses easily
  4. How might we make the app feel modern

03. Design the product

Sketch

We combined design ideas collected from previous researches and drafted  a total of 3 design sketches.

Wireframe

After reviewing each sketch, the team voted on ideas that they agreed on and merged them into a brand-new wireframe. A total of 3 flows were designed, they are:

​

  • Main page browsing

  • Course browsing

  • Course registration

Prototype

Based on the wireframe and results collected from the first-round user testing, we further refined our design into a high-fidelity interactive prototype. 

Feature Highlight: Main Page Calender & Add to Calender

During our user interviews, we found that many users are complaining about the difficulty of tracking their course registrations, which will usually lead to their absence.

 

In order to help ease this situation, we designed the calendar on the main page together with the add to calender function after course registration.

Feature Highlight: Reorganized Filter

When looking at the original IMLeague app, a lot of users expressed that the filter system is hard to use.

 

In order to help users have a better search experience, we restructured the filter system and used different designs & wording to present an intuitive filter system.

Feature Highlight: Equipment Provided Section

By having a section on our course detail page listing all the equipment provided for each course, we allow users to have a sneak peek at what kind of thing they need to prepare.

Feature Highlight: Invite Friend 

After course registration, the invite friend feature will allow users to share event info with their friend

04. Getting feedback

User Testing

In order to validate our design decisions, we conducted 2 rounds of user testing at different stages of this project.  The focus of first-round testing was to confirm the smoothness of the function design while the focus of the second-round testing is to double-check whether visuals will make any difference. A total of 12 usability testings were conducted and  some of the major feedback collected were listed as below:

Feedback From Testing 1

​

  • A vertical scrolling mode for the schedule on the home page is preferred.

  • The filter section is confusing and hard to use.

  • The naming convention needs to be unified.

  • The activity goal on the user page is confusing.

  • Would like to have alternative course suggestions after unregistering the course.

​

​

Feedback From Testing 2

​

  • New users may need onboarding for the swipe gesture.

  • Category as naming is a little confusing.

05. Iteration Highlight 

Home screen

  • The calendar was changed to a waterfall type for easier browsing.

  • A profile pictures was added to  give more customization.

Explore screen

  • Reorganized filter structure to prevent confusion. 

  • Provided more space for the courses.

Course Unregister  Confirmation

  • Added visual indicator to show action has been completed.

  • Suggest similar events to users.

Limitation

Asides from the achievement,  the project also has some limitations that need to be considered in future development. 

​​

  • In the present IMLeague app, there are still some features designed for clubs and games. Due to the time restriction, we decided to remove those features from our MVP list. However, they still need to be implemented in future development.

  • When recruiting end users for interviews and user testing, we tried to recruit as diverse users as possible, however, we were not able to recruit users outside of the University of Maryland. To prevent biases, It would be better if users from different backgrounds can be interviewed.

Reflection

Throughout this project, I was able to create and execute a holistic plan for the IMLeague application redesign as well as contribute my design and data analysis skills from the preliminary user research phase to the later prototype and user testing phases.  Meanwhile, in the role of facilitator, I facilitated design sprints and coordinated teamwork sessions for better efficiency. Through all those tasks, I was able to polish my research, design, and project management skills, and grew as an all-round designer.

bottom of page