.png)
Overview
Role: UX/UI Designer
Team: 1 Senior, 1 Intermediate, 1 Junior (Me)
Year: Oct 2024 - Present
Tools: Figma, Miro, Dovetail
The Goal
-
Apply the refreshed brand identity across the UoA Website in a way that feels modern, cohesive, and distinctly UoA.
-
Test and validate design decisions through student feedback via A/B testing
-
Maintain development feasibility by making minimal structural changes while implementing the new brand elements.
-
Ensure accessibility and readability using updated colours, typography, and layout.
My RESPONSIBILITES
-
Applied refreshed brand guidelines to website interface designs using Figma
-
Led A/B/C testing sessions with 33 students, observed user interactions, and gathered feedback to inform design refinements
-
Presented design concepts and rationale to stakeholders
-
Balanced creativity with AEM limitations and development constraints.
-
Prepared developer handover documentation and reviewed builds for quality.
.jpg)
Design process
The process
The project began with research and exploration of the existing site and stakeholder input. I then ideated and prototyped multiple design variations, applying new brand elements.
After team shortlisting, we conducted student A/B testing to gather feedback. Insights informed refinement, improving hierarchy, spacing, accessibility, and creating reusable Figma components.
Finally, the designs were handed over and implemented with developers, adjusted as needed, and finalized for rollout.
Explore
Design Workshop
Once we received the first draft of the new brand guidelines, I organised and facilitated my first-ever design workshop to explore how the refreshed identity could translate into the website experience.
This workshop helped the team get aligned early and sparked strong conversations about the future look and feel of the site.
I gained confidence hosting, planning ahead, keeping energy high, and leading a group through a creative session.
Homepage Precedents
To understand how other universities applied modern branding at scale, I researched component patterns across global tertiary websites.
.png)
Ideate
Sketching & Concept Exploration
I sketched multiple layout directions for the homepage. Sketches were intentionally rough to quickly explore hierarchy, spacing, and how the new brand elements might work within the existing structure.
Prototyping
To explore how the refreshed brand could work across the website, I created multiple quick prototype variations of the homepage.
I experimented with different compositions, colour treatments, and component updates to see how far we could push the new brand while keeping layout changes minimal.
Test
A/B/c Testing with Students
I ran A/B/C testing sessions with 33 students over two weeks.
I observed how they interacted with the designs, gathered qualitative feedback, and looked for patterns in:
-
visual appeal
-
clarity
-
ease of navigation
-
preference reasoning
These insights shaped the next iteration of the homepage and confirmed which design directions aligned best with our users
.jpg)
User test plan overview
The purpose of the user testing was to evaluate student perceptions and opinions on the redesigned University of Auckland website.
The test aimed to assess the updated visual design, including new colours, fonts, buttons, rounded corners, and shapes. Participants also reviewed the current website design to provide initial feedback before comparing it with the new designs.
Feedback gathered from students helped to inform decisions on final design elements, such as colour choices and other visual details, ensuring the website reflected user preferences while maintaining clarity and alignment with the One UoA brand.
Key objectives
-
Evaluate the Current Website Design – Gather student feedback on the existing to compare against the new designs.
-
Assess Visual Design Preferences – Understand student reactions to the application of the new colours, rounded corners, and shapes to determine which design elements resonate best.
-
Compare Design Variations – Assign each participant A, B or C design, collect usability and satisfaction ratings, and determine which design performs best overall.
-
Gather Feedback for Design Refinements – Collect insights on what aspects of the design work well and what needs improvement to guide final decisions on colour choices, design details, and overall layout.
A/B testing process
Step 1: First Impressions
-
Show Version A or Version B
-
“What’s your first impression of this design?”
-
“Does anything stand out (good or bad)?”
-
Step 2: Visual Ratings
-
“On a scale of 1-5, how visually appealing is this design?”
-
“What do you like most about this design?”
-
“Is there anything you would change?”
Possible Follow up questions:
-
“What do you think of the current imagery
-
“Did any colours, shapes or layout choices stand out
-
“Does the layout make it easy to find information?”
-
“Is the text easy to read and scan?”
RESULTS
We asked students to rate each design on a scale of 1–5, and the averages for each option are shown below.
Design A
3.61
Design B
3.57
Design C
3.6
Inisights
Here are some of the key insights I developed from A/B testing.
Old website
-
Students felt the visual style looked outdated and didn’t reflect a modern university experience.
-
Navigation was perceived as cluttered or unclear, making it harder to find key information quickly.
-
Hierarchy issues (especially on the Staff Intranet) made important content blend in with everything else.
-
Students mentioned inconsistent spacing, alignment, and visual patterns across pages.
-
Card designs were harder to scan due to transparency and low contrast.
-
Some terminology and labels were confusing or unclear without additional context.
-
Overall satisfaction was moderate; students described the experience as “fine, but not intuitive.”
New A, B & C designs
-
Students overwhelmingly preferred the modern, cleaner visual direction and found it more trustworthy.
-
Navigation felt simpler and more predictable, making it easier to complete common tasks.
-
Clearer hierarchy helped students scan content faster and find what they needed with less effort.
-
Visual consistency across layouts improved perceived professionalism and ease of use.
-
Updated card styles (stronger contrast, structured layout) were much easier to read at a glance.
-
Improved labelling and page structure reduced confusion and increased user confidence.
-
Overall satisfaction scores were significantly higher, with students describing the new designs as “easier,” “cleaner,” and “more logical.”
Final Designs
the process
Based on research and testing, I developed the final homepage design and extended the patterns across other key pages.
My contributions included:
-
refining components using the new brand system
-
creating reusable Figma components with auto layout
-
establishing a full text style system
-
continuously reviewing accessibility with the new colours
Weekly design reviews with the team ensured consistency and cohesion as the project scaled.
.png)
Implementation
Developer Handover
Initial handover exposed gaps between design intent and implementation, especially with animations, transitions, spacing, and component consistency. After seeing how different the first build looked, I refined my entire approach to dev collaboration.
I introduced:
-
more detailed design specs
-
clearer callouts of changes
-
component-by-component reviews
-
a tracking system marking issues as fixed / ready for review / needs work
Challenges
Working Within AEM Constraints
AEM components limited how creative we could be, which pushed me to find smart, minimal changes that still created strong visual impact.
Building a Text Style System
Switching from National to Inter meant rebuilding all text styles. This was new to me, but I learned how to structure sizes, line heights, and scale logically and accessibly.
Accessibility Deep Dive
The new brand blues looked beautiful in print, but didn’t always meet digital contrast requirements. I ran extensive accessibility testing to determine where each colour could and couldn’t be used.
.png)
Learnings
Stronger in Dev Collaboration
Handover was one of the biggest growth areas:
-
I learned to communicate clearly with developers
-
I stopped being afraid to advocate for good design
-
I built confidence in explaining decisions using UX principles
Leveling Up in Figma
I significantly improved in components, auto layout, responsive resizing and building design systems.
This led to me being put in charge of teaching the rest of the team how to use Figma after the organisation migrated to it.
User-Centred Decision Making
Testing with students reinforced the importance of the voice of the customer, especially how different their opinions can be from internal assumptions.