UI/UX Design Mobile Prototyping User Research Website
Improving UI/UX Design for UpSouth, The Southern Initiative (TSI), Auckland Council
UI/UX Design Mobile Prototyping User Research Website
Improving UI/UX Design for UpSouth, The Southern Initiative (TSI), Auckland Council
Duration
10 weeks
My Role
UI Design
UX Research
Prototype & Validation
Company
The Southern Initiative (TSI), Auckland Council
Timeline:
February- April 2024
Achievement
Received excellent feedback from the Auckland Council team on the visual design, ensuring the inclusion of the Pacifica element. Delivered pixel-perfect high-fidelity wireframes using Figma.
The Work
I was the solo UI/UX Designer and collaborated closely with The Southern Initiative, Auckland Council to create high - fidelity wireframes using Figma that improve and maintain the user experience consistency and create the brand guidelines.
Overview
In the rapidly changing digital landscape post-COVID-19, engaging youth in decision-making is crucial for shaping our future. TSI initiated the UpSouth project in 2018, a pioneering ideas crowdsourcing platform dedicated to amplifying youth voices and rewarding their insights. It facilitates meaningful engagement and interaction through a digital platform where youth share insights and receive micropayments.
The Problem
We had three website design files and code from previous cohorts, but none of the versions could be implemented due to technological and budgetary limitations. Launching any of these designs would have resulted in a significant delay.
The Process
The redesign process for the UpSouth platform began with discussions with stakeholders to address the delays encountered after receiving three website design files. Following a meeting with Auckland Council, we decided to prioritize building an MVP product to meet the publishing deadline. The agreed-upon feature list includes the hero page, about us page, sign-up page, submit challenge page, and announce new challenge pages. Two developers were assigned to utilize Amplify to build a responsive design.
From a UX perspective, my primary focus is on designing new products that align with the aesthetic preferences of the target audience. This involves removing unnecessary features that are not relevant to the current status, organizing information effectively, and strategically placing it in appropriate positions. My goal is to ensure that when users land on the homepage, they are drawn to engage in activities. Additionally, I aim to convey TSI's main goals in a visually clear and simple manner through hierarchical visuals.
Design Decision
I initiated the creation of more than three design files for the Auckland Council team and target audience to select the most suitable design. After deliberation, we settled on the green theme. The final decision was influenced by the dark green colour, which conveys professionalism and aligns well with government aesthetics.
Key updated
Colour Theme
Based on a survey, 76% of users still prefer a calm, visually weighted deep green background, which can better showcase the purpose and readability of the UpSouth website.
Flow visualization
We incorporate a "how it works" diagram to visually illustrate the process of how TSI runs challenges, gathers funds, and recruits participants, providing users with a clear understanding upon their initial login to our website.
Enhanced Description
We have added more descriptions of TSI to illustrate our goals and mission, providing users with a comprehensive view and understanding, especially when financial transactions are involved.
Style Guides
Although we initially had three design files, following internal user testing, we opted to redesign all design elements and colour themes to align better with current design trends. The aim was to tailor the design style to better match the preferences of teenagers.
Conduct Usability Test
In the usability test, to validate whether the landing page redesign is intuitive, user-friendly, and user-centric, we interviewed our target audience to provide us with valuable feedback.
Iterative Design Process
Testing
First-time users might not know the purpose of TSI when they just arrive at the landing page. It could potentially increase the user drop-off rate or create a less credible impression.
Hi-Fi Wireframe Design
Reflection
Throughout this project, observing industry standards and the structure of the product team has been crucial. It's taught me effective communication with stakeholders and the product team, prioritizing critical tasks within deadlines, and refining the MVP product for maximum benefit in minimal time.
Creating a Minimum Viable Product: Prioritize and narrow down the scope, creating the MVP with the fastest tools within a limited budget and time constraints.
Analyzing User Feedback in Design: From a designer's standpoint, adopting an open-minded approach to user interviews allows for the analysis of user feedback in an iterative design process.
Agile Collaboration: As part of our agile methodology, we hold weekly stand-up meetings. Through this collaborative teamwork, I've gained valuable experience in industry cooperation.