As part of City University's Student Union priority of tuition fee transparency with its student body, I was tasked with creating a student- friendly version of the financial summary page featured on City University's Website.
Step 1: Gathering Requirements
Requirements were provided by a Student Union manager. I was asked to design a new web page for the Student Union website that:
-
Simplifies the financial summary page on City's website
-
Consolidates the key points of the design
-
Has a minimalistic and aesthetic design ​
​​
The original website design may be seen in the two images below.
Image 1. Snapshot of original Financial Summary page
Image 2. Snapshot of original Financial Summary page
Step 2: User Research
I consulted two students about their opinions on the original Financial Summary page. The students expressed disinterest in heavy bodies of text and agreed that they'd quickly switch off before reaching the key pie chart which describes the university's expenditure.
Step 3: Low-Fidelity Wireframing
Now armed with the key requirements and user research, I developed a paper prototype (low-fidelity wireframe) of my design, deciding against heavy bodies of text and highlighting key income & expenditure figures .
Image 3. Paper prototype
Step 4: High-Fidelity Wireframing & Prototyping
Using my sketch, I developed a high-fidelity wireframe in Figma before evolving this into a prototype to demonstrate a hovering interaction across the detailed expenditure pie chart; when a user hovers over each expense, a pop-up appears providing further information about said expense. This enables students to learn more about each expense without having to scroll away from the chart as before.
Image 4. High-fidelity wireframe view in Figma
Step 5: Evaluation & Outcome
The site design was approved by the Student Union Manager, who commended the design for its simplicity and the fact that it conveyed the key information students might want to know.