Redesign: Rapid support for Auckland businesses.
Background and context
Activate Tāmaki Makaurau (ATM) has been released by the government as a support package to help businesses affected by the COVID-19 pandemic. The type of support offered by ATM ranges from health and wellbeing to business advice and grants.
ATM is home to so much information, that poor navigation, findability and readability makes it difficult for business owners to locate and apply for what they need.
My role
As the sole designer for this project, I was responsible for redesigning the landing page for web and mobile versions, including:
Analysis of the existing page
Problem statement
Sketching
High-fidelity wireframes
Stakeholders
ATM management and digital team
Users
Business owners - the support available on the landing page is specifically for this group of users.
Project scope
I had one week to carry out the following, as outlined in the Business Requirements Document supplied by ATM:
Discover: Analyse data about users.
Define:
i) Conduct an analysis of UI elements on the existing landing page.
ii) Write a Problem statement based on information outlined in Discovery phase
Ideate: Assess information architecture, use design principles and sketch design solutions
Prototype: Iterate on low-fidelity wireframes to produce high-fidelity wireframes for validation
Testing with users was out of the scope of this project
Design process
Due to the short time constraints of this project (one week), time was mostly spent on the highlighted elements of design thinking below; although I did briefly analyse the user data provided by ATM to get an understanding of the bigger picture.
Page analysis
Before heading into ideation, I took a close look at the current landing page to understand why users were getting frustrated. Here are my observations of the web page:
Top of page
Middle of page
Bottom of page
Problem statement
Business owners need to be able to easily find and apply for the specific support they need, to help them continue to run their business successfully, because they often end up wasting valuable time scrolling through content irrelevant to them. They end up getting frustrated, or may give up on their search entirely.
Sketching
At this stage, I now had a better sense of the user’s experience. I completed Crazy 8s sketches for web and mobile versions, star-marked designs which best addressed issues identified, then produced several iterations of wireframes in Figma. I considered design trends and was consistent with company branding in my work.
Sketches - web version
Mobile version
High-fidelity wireframes
After validating designs with stakeholders, final prototypes were chosen for later usability testing with users. The prototypes for web and mobile landing pages are below:
A top navigation bar has replaced the hamburger menu on the web version, for users to immediately see the support and services offered by ATM
Page content has been condensed and moved to the relevant pages under the navigation headings, for better findability and readability
CTA buttons are prominent and reduced to only two, for simplification and better visibility
Designs and content of the mobile version are consistent with web version, and with company branding
Mobile layout utilises space effectively, aiming to parallel the user’s experience with web experience
Project outcome
All tasks were completed within the given time, and as outlined in the Business Requirement Document.
I produced web and mobile design solutions for the landing page which address the problem statement, and propose to:
1) Make it quick and easy for users to navigate to the support they need
2) Simplify the hierarchy of elements on the page so content is more readable
Retrospective
Challenges
My biggest challenge was allocating equal amounts of time to the different tasks in my backlog. Initially, I spent a disproportionate amount of time iterating on the UI - I have the tendency to get caught up in fine details and can lose track of time - to overcome this particular challenge, I strictly dedicated specific amounts of time to the items in my backlog; as a result, all activites were completed in time. I also sought advice from other designers, to learn tips and tricks on how to maximise allocated time.
What’s next?
It would be beneficial to carry out usability testing to observe how well users understand the redesigns. I would want to know about the key issues: How easy is it to understand what the landing page is about? Can specific kinds of support be accessed? What is unclear or misunderstood? Usability testing would also be beneficial for me to understand and enhance my own design skills, so that I could continue to grow my capabilities.