UX re-design and
de-clutter of a public sector website.
In this case study, I show how users are now able to navigate the website and discover information, to quickly access business support with this user-centred re-design of a cluttered public sector website.
Explore the re-design
Go on, have a play!
BACKGROUND
Overview
Activate Tamaki Makaurau (ATM) - a public sector programme announced by the Minister of Finance and the Minister of Small Business was designed to deliver business advice and mental health support for Auckland businesses
ATM has a dedicated web page to help business owners to access business support, ranging from health and wellbeing, business community resources, business advice, grant, and support from service providers:
https://www.aucklandnz.com/activateauckland
Challenge
ATM is home to so much information it can sometimes be difficult to find everything business owners (the customers) need. The customers have to click through all the different sections and spend valuable time rummaging through a cluster of information.
You are requested to give your advice and to create a simplified design solution before it is handed over to the sub contracted web design agency.
Role
Role: UX designer
Timeline: 1 week
Devices: Desktop & Mobile Responsive Website
Team: Myself & Steven De Thierry (Developer)
Contribution
Proto Persona
Website audit
Site mapping
Design goals
Crazy-8s ideation session
Usability Heuristics
Wireframe
High Fidelity Prototype.
Preview and Present.
RESEARCH
Understanding the user
As one of my first tasks, I created a Proto persona to better understand the user and empathise with them and their current experience. I utilised the analytic tool Similarweb to help uncover user data of the ATM website to define who the main user is. I used this data and assumptions to create a proto-persona to best reflect the main user persona. My user persona helped influence my design solutions by reflecting on Frankie's motivations and pain points and creating some key design goals heading into my ideation session.
Meet Frankie
"An Auckland cafe owner doing her best to keep her doors open while operating in ever-changing conditions during a pandemic.
One evening after another stresseful & long day she jumps on the ATM website that she was recommended to by her friend to find out what government support she can access.
She is immediately left feeling frustrated clicking through the website trying to get her head around the information. Left wondering whether their programme is successful. Having difficulty navigating the website. She is soon ready to give up and wants to talk to a real person for further support."
Painpoints:
Time poor
Difficulty navigating the website
Trouble finding relevant information quickly
Age: 38
Location: Auckland.
Occupation: Cafe owner
Status: Married with 2 kids.
Devices and Platforms:
iPhone
Macbook.
iWatch
Facbook
Instagram
Whatsapp
Motivations:
Get Business grants and funding.
I want wellbeing support for my staff.
I want resources to help run my business.
Site Mapping
I undertook a UX audit of the ATM website which included mapping out the site as part of the process to understand where users experience difficulties in navigation and finding information. This helped me discover what can be potentially changed to improve the user's experience and business performance and define the key design issues to address heading into my ideation session.
Website audit
Drawing on my knowledge of common web patterns and usability heuristics I identified 9 UX issues for improvement.
1. Hamburger menu used on desktop & lack 
of menu navigation options.
-
Navigating the website to key pages (and back) is
 not easy.
-
“Only 52% of users over the 
age of 45 even know what the hamburger icon 
means...” according to Usability Geeks. This becomes an accessibility issue in addition to usability issue by not following common website design patterns.
2. Above the Fold content not effective
-
It doesn’t follow common Homepage design pattern
-
Headline is ambigous.
-
Does not encourage a user to easily and quickly take key action
as soon as they land on the Homepage.
-
Hero image is not engaging for the user, and does not
 build credibility or trust.
3. Page layout, Information Heirarchy & FAQ accordian not effective
-
The information provided is not presented in an effective order.
-
additional Information is clustered together and listed as an accordion vs. curated into relevant 
sections to tell a story that is easily skim-read.
-
It is not engaging and hard to understand.
-
Too much white space and wasted space.
4. Tiled Section not optimised for desktop
-
Requires too much scrolling.
-
Too much white space.
5. Button link diverts traffic to Youtube
-
Sends Traffic away from website to a distracting video platform
6. Inconsistent and confusing web design patterns and branding experience
7. Key web pages not easily discoverable
-
The majority of business owners seeking further information will primarily
be interested in learning more about business advice and grants.
8. Footer Menu lacking detail
-
No navigation options to key webpages
-
As a result, makes website hard to navigate
9. Wasted space in mobile layout
-
Unnecessary scrolling.
DESIGN IDEATION
Design Goals
I began by reflecting on Frankies pain points, thoughts and feelings and my website audit to create three key design goals. These design goals helped me prioritise areas of improvement for the ATM website.
1. Make it easy to navigate.
2. Arrange information to tell a story and is engaging.
3. Allow users to take action quickly.
Crazy-8 Sketches
The main purpose of this exercise was to quickly brainstorm design solutions for the Homepage of the ATM website. I created eight versions, and I selected my top three designs. Each design provided different features and layout options for information. A consistent feature among my top three was a header navigation bar, a hero section and a 3-column card section for the support options. Other features included an embedded video, contact form, and alternating content section. I did not choose one sketch to move forwards with, rather I chose my top three and combined the features and layout I believed helped answer my design goals best. I used these sketches to create my wireframes.
Wireframes
After the crazy-8 session, I began creating my wireframes. Creating wireframes of my sketches helped bring clarity to my project, allowing me to work through all the interactions and layout needs. I created Low Fidelity Wireframes using Figma. I chose Low Fidelity Wireframes for this stage of the project to allow for speed and to move on to presenting my wireframe to my teammate to get feedback.
The focus of my feedback session with my developer was to get first impressions and identify user experience/interaction problems, desirability, viability and feasibility of the design for development.
The feedback session was overall positive, with no actionable design iterations required. I proceeded to create a High Fidelity prototype of my wireframes.
DELIVERY
Prototype
The visual style I chose was a light, fresh, energetic, clean style communicated through the font and imagery chosen. A consideration made in selecting illustrations was to ensure that they conveyed inclusivity, in addition, to support and business success. It was achieved through the selection of imagery that represented groups that often face discrimination, under-representation and equity issues. I am proud of this ethical consideration being included in my design. The ATM brand colours are used throughout the design for consistency and to convey credibility. Figma was my chosen tool to build my high-fidelity prototype.
Design Solutions
The final solution tells a story displaying information clearly on the ATM website that was originally cluttered and hidden. Information is easily discoverable and users are able to quickly navigate the website to take key actions that benefit them and align with ATM's business goals of helping business owners access support and information.
My design has streamlined the sign-up process of joining the business community and features the highlights video embedded in the website keeping users from diverting away to youtube.
Included is a new feature highlighting the success stories to provide social proofing and build credibility, and a feature to help with lead generation for the launch of future funding schemes to ensure quick uptake and the success of these funding programmes.
Below I have featured a handful of outcomes and design solutions where I dive in a little deeper into my reasonings and justifications for why they exist:
1. NAVIGATING THE WEBSITE IS NOW A BREEZE
The Redesigned the desktop header, website footer and mobile menu now gives the user control and freedom to navigate to key web pages (and back). This aligns with Usability Heuristic #3: User control and freedom.
I used common web patterns for these design elements for a familiar usability experience. Consistency in branding colours and aesthetics was used throughout the design of all these design elements. These align with Usability Heurisitic #4: Consistency and Standards.
Desktop Header Navigation Bar
-
The Get support drop down menu option is designed as ghost button int the branded green colour. This gives it an element of contrast to the other menu options and aids to grab the users attention.
-
Search bar included to allow further ease of navigation and flexibility in approaches when seeking out information or navigating the website.
-
User Login/Profile icon included allowing users to easily log in to their account if they have joined the business community section of the website.
-
Branded Navy colour is used as the fill colour of the navigation bar to create a clear contrast between the navigation bar and the section below.
-
Common web pattern used for a familiar usability experience (Usability Heuristic #4: Consistency and Standards)
Mobile Navigation Hamburger Menu
-
Facilitates easy navigation to key web pages (and back).
-
The ‘Get Support’ option is a drop-down menu to allow ease of navigation to different website levels.
-
Branded Green colour was used for the plus icon on the ‘Get Support’ Button to draw the user's eye to this menu option and understand that it has Level 2 menu options available.
-
Common mobile UI patterns are used for a familiar and intuitive experience. (Usability Heuristic #4 Consistency and Standards)
Desktop Footer Navigation Bar
-
The branded Navy colour is used as the fill colour of the footer navigation bar to create contrast between the navigation bar and the section above and achieves brand consistency.
2. THE HOMEPAGE TELLS A STORY WITH A MINIMAL AESTHETIC FEEL
​Using common web design patterns for a fimilar and intuitive web experience executed in an aesthetic and minimal style. This aligns with Usability Heuristic #8 Aesthetic and Minimalistic design & Usability Heuristic #4: Consistency and Standards.
The Information is no longer clustered and hard to find. It is now arranged to help answer questions the user has more intuitively creating a better flow and engaging experience for the user: What is Activate Tamaki Makaurau? What do they offer? Who do they partner with? Are they successful? How do I get support if I needed?
New homepage layout with scannable sections to quickly find relevant information.
-
Clear sections and headings to quickly draw attention allowing skimming of information and consumption of relevant content.
-
The information we want the reader to see most is arranged at the top with clear attention-grabbing CTA buttons. This aligns with the business goal of getting business owners to utilise the services offered by ATM.
In a matter of a few seconds users learn about ATM and what action to take next.
-
The Headline and sub-headline communicate to the user what ATM is all about in a matter of a few seconds.
-
I’ve added a clear CTA action button, which draws the attention and encourages the user to take action.
-
I’ve used an illustration that visually communicates a feeling of support and success while leveraging the colour yellow which is warm and energetic and has great synergy with the ATM branding colours.
-
Subtle hand-drawn arrows draw the user's attention and encourage the user to take actions such as clicking on the CTA button and begin engaging with the rest of the Homepage.
3. NO MORE UNNECESSARY SCROLLING AND TRAFFIC REDIRECTIONS
Tiled Section optimised for desktop and mobile
-
Now arranged into 3 column layout on the desktop to optimise space and minimise scrolling.
-
It is mobile responsive and becomes a carousel for users to scroll through the different content cards.
-
The distracting cluttered-looking stock photos have now been substituted for simple illustrations which visually communicate what each section is about quickly.
-
CTA action buttons now draw attention and encourage the user to take action. Branding colours are used for brand consistency.
Embedded video prevents traffic being diverted away
-
This helps users by eliminating a source of distraction. The user will no longer get distracted on Youtube as a result of being diverted away from the ATM website. It empowers the user to stay on task and more likely to engage with ATM services.
-
It will aid other business goals and metrics for the website such as increasing time spent on the website and the number of pages visited by a user.
4. TRUST, CREDIBILITY AND SOCIAL PROOFING INTRODUCED.
The introduction of a Success stories section brings an element of trust, credibility and social proofing. Research shows social proofing provides and element of social influences that helps improve conversion rates/achieving business goals.
A ‘Customer Success’ section added to the homepage and website
-
This highlights the success of the programme users are able to discover examples of how the ATM resources have been accessed by the Auckland business owner community.
5. CONNECTING WITH PEOPLE IS SUPER EASY
Seeking support is now super easy. Throw the old 4-click user flow out the window.
-
The contact form is now part of the homepage and makes ATM reachable without a 4-click user flow to send them an email.
-
The placement of the contact form near the bottom of the homepage is consistent with common web design patterns.
-
This feature communicates to the user that they are supported. They can talk with a real person and they can access support through onboarding or at any stage of their user journey easily.
-
A single-column layout and consistent placement of input fields were used in the design of the contact form. This is to achieve a straight line to create an easy user experience to fill in the form.
Intuitively create an account to quickly become a part of the community.
-
Branding is now consistent to remove user hesitancy to sign up and confusion.
-
The account creation form is included on this webpage. This can make the sign-up process quicker and easier for the user. This will ultimately improve member sign-up rates for ATM.
-
Account login option is also included on the account creation form to allow easy login for people who are already signed up.
-
Account creation using a Google account feature included on the form to provide a one-click sign-up option for Google product users. This streamlines the process and can further improve the user experience when creating an account.
A new feature introduced to allow the user to stay updated while generating leads for ATM.
-
This allows lead generation to continue despite no more applications currently being taken for business advice and funding programmes.
-
This can facilitate business goals being achieved faster when more funding becomes available. You have a list of people waiting that you can launch the new round of funding to helping to speed up funding being accessed and the overall success of the programme.
-
Allows the user to take a small action that helps their future despite the funding application being closed. This can nurture a sense of “at least I have done something” rather than being left with only a feeling of frustration.
TITLE OF THE CALLOUT BLOCK
LEARNINGS
Next steps...
With the time constraints on delivering this project, there was no opportunity to undertake any usability testing to validate my design solutions.
If I were allowed to run usability testing this would have helped me gain valuable insights to assess the usability of the overall design. I would have used measurements such as task completion rates, task completion time and Jakob Nielsen UX severity ratings to prioritise what iterations to make for the next version of the prototype.
I would further recommend measuring website analytic metrics to help define the success of the re-design. Comparing the metrics of the original design to the re-design will help quantify the impact of the re-design. Tracking metrics and using tools such as Hotjar will also provide insights in to possible problem areas that are contributing to traffic drop off and suggest future improvements.
I would recommend measuring the following metrics.
- Website Traffic:
-
Page Views
-
Average Time on Page
-
Average Session Duration
-
Pages per Session
-
Exit Rate and Top Exit Pages
- Conversion Rates:
-
Sign up to business community
-
Sign up for notification of future funding scheme availbailites
- Satisfaction Rates:
- Satisfaction Surverys
- Net Promotor Score
Start with empathy.
I learned to embrace empathy with this project. Starting off my design approach with empathy, and putting myself in the user's shoes gave my design decisions more confidence. At the end of the day, I should not be designing for myself, I need to be designing for the users.
Keep honing those UI skills.
A challenge for me was the execution of some of the UI elements for the website. One area I had a challenge with was finding the balance of white space used between sections to make it look simple and uncluttered. I would have liked more time to work on this area more. Another area was finding the right balance of the use of hand drawn elements. Are they useful at guiding the user through the website? Yes! However in hindsight, I feel I went a little heavy in the hero section with the arrows and underlining.