TATE YEUNG

Chapter Reporting Portal

ux + ui design, information architecture

Brief

background

Circle K International (CKI) is a collegiate student-led organization that does community service.

PROBLEM

The existing solution for this is overly manual, repetitive, confusing, and error-prone.

Challenge

How might we design UX and UI for a web app to replace complex (and buggy) Excel templates and chaotic email handoff (and make the transition as seamless as possible)?

Parameters

Team

Chris Lam, software developer
Kevin Tran, software developer
William Lin, software developer
Jonathan Chu, project manager
Wayne Cheng, District Secretary

role

As the sole designer for the project, I conducted user research and designed the UX, UI, and IA.

tools

Sketch

time

July 2018 to March 2019; currently on hiatus

Research

User empathy

Having worked directly with people who used the existing solution, I was intimately aware of their struggles.

Defining problems

Through these first-hand experiences and interviews, I synthesized their attitudes into four primary problems with the existing solutions.
The summary guide of the existing solution is 1300 words long!
Error-prone
The ability to lock cells that process information using formulas was often beyond the skill level of District Secretaries making changes to the template, leaving formulas crucial to the form vulnerable to unintentional edits.
Comments were necessary to clarify which cells shouldn't be altered.

Defining need

Chapter secretaries want to easily report events, with a workflow that automatically draws as much information as it can from other sources.

Design considerations

Frictionless transition

The existing Excel template was used as a starting point to the designed solution to make the transition as seamless as possible.

data input

The details of each entry of data are relational, and since entries were typically inputted individually, a form would make more sense. The existing solution used a form format but on a spreadsheet.

permissions

While the nature of manually sending files implicitly and simply managed access to files, the nature of a web app requires logins/user accounts and by extension, explicit permissions to determine who had access to which data, when it could be edited, and how it is shared between users.
Iterations of the permissions model based on current access roles.

Execution

Reconciling problems

While considering the problems defined following user research, three of the four issues are inherently solved by the transition from Excel spreadsheet to web app.

Initial sketches

In my initial sketches, I ensured that all the necessary information about the status of various forms and all the data fields required were included in a wireframe.
Basic table and form structures for the core reporting feature.
Revised report creation form with organized input fields.

Iterating

Upon receiving feedback from my team, I realized that the status of a given report was ambiguous. This was the opportune time to analyze copy I used and do some research on UX writing.
Initial high-fidelity mockups used for development.

Testing

Currently in progress.

Reflections

Though I've designed UX previously, this was the most comprehensive and significant complete project I've designed before.

 Back to UX projects

 Back to UX projects