Pardon my dust.
I'm renovating and this page hasn't been migrated and redesigned yet.

Chapter Reporting Portal

ux + ui design, information architecture



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


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


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)?



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


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




July 2018 to March 2019; currently on hiatus


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!
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.


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.


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.


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.


Currently in progress.


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