Brief

background

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

Each month, the higher-ups want to know what each college's chapter has done.

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.

However, I still conducted general preliminary user feedback to address specific weaknesses.

"pretty confusing...organization [of information] that you have to figure out yourself"

"repetitive...could be simplified, especially...where data are manually copied"

"works, but it's very inefficient, both visually and functionally”

Defining problems

Through these first-hand experiences and interviews, I synthesized their attitudes into four primary problems with the existing solutions.

Manual
Each month, each of the ~60 chapter's Excel reports are manually downloaded, opened, and parsed by a single person.

Repetitive
Different reporting forms also required manually copying and pasting information between spreadsheets.

Steep learning curve
‍Not only was this system tough on the District Secretary, but also for training the ~60 chapter Secretaries to fill these spreadsheets out correctly each year.

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.

District secretaries want to view accurate summaries of each chapter's performance and reports without manually downloading each report from their email.

General club members want to be able to report events that they chair without needing to learn the Excel template.

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.

With the help from the District Secretary, I organized the necessary fields in a way that would make sense to those familiar with the flow of the existing Excel template but aligned with web design paradigms for ease of learning for future secretaries.

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.

I developed a model of permissions based on the existing model of who had access to what data. However, the nuances of each of the several user roles exponentially increased the complexity.

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.

Designing with best practices and existing paradigms would ensure that the fourth problem, confusion, would be minimized.

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.

Next, I produced high fidelity mockups to hand off to developers.

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.

This project gave me insight into the significance of user-centered design since the adoption of the project heavily relied on this.

This was also the first UX project I've worked on that was actually developed and will be implemented.

TATE YEUNG

Chapter Reporting Portal