City of Kingston Website Redesign
The City of Kingston has made a commitment to supporting local businesses. The problem they provided us was to determine how we might redesign the business section of the website to be more valuable to existing businesses.
This website design was a class project that was completed in 3 months. I was on a team of 3 and we collaborated in the research and design of the website.
Product Deliverables
Research
User Research
Personas
Comparative Analysis
Content Audit
Design
Wireframes (Adobe XD)
Analysis
Usability Testing
Journey Mapping
Prototyping
High-Fidelity Mockups (Adobe XD)
Research
We went through a thorough process for our research, as we wanted to gather as much information about the comparable websites, user needs, and what the City of Kingston was missing on their website to meet those needs.
Competitive Analysis
In order to understand what other websites are offering to businesses, we looked at 11 websites, both from municipalities as well as independent organizations that cater to small businesses. We found that there was a lot of similarities in terms design and content across the websites. The key findings are as follow:
Key Findings
All of the websites use a card format for content as part of their information hierarchy
Many of the websites have industry-specific content for businesses
Many of the websites have wizards or other guides to bring users to content
Many of the websites highlight popular content in their navigation or on specific pages
There is common labelling on the websites for easy navigation (i.e. permits, licensing, etc.)
COVID 19 content and news specific for businesses is available on the websites
User Research
We interviewed 6 small business owners from Kingston to determine what they use the City’s website for and what information they need to support their businesses.
Key Findings
4/6 participants never use the City of Kingston’s website for business purposes.
Those participants in the real estate industry use the website daily.
100% of participants want up-to-date COVID-19 information.
Participants want an easy way to get ahold of the city directly.
Users who visited the City’s website found the content to be text-heavy and difficult to read
We learned quickly that most of the users didn’t use the city of Kingston’s website for their businesses, which changed the direction of our project. We needed to focus on designing the website to include content that would give them reason to visit the website.
Main Persona
Content Audit
Once we understood the main pain points for our users, we did a content audit on the City of Kingston’s business section on their website to identify key areas of concern that we could address with our design. One area of concern that were not present on the website is COVID-19 specific content for businesses.
The sidebar on the webpage is size 13 pt. font and is difficult to read. It should be bigger for accessibility purposes.
Business news appears at the very bottom of the page and is difficult to read.
The information hierarchy is poorly designed and it is difficult to differentiate between different levels of content. Users are unable to easily scan the page to get the content they need.
Low-Fidelity Wireframes
We designed our wireframes in Adobe XD, focusing on the business landing page, a new COVID-19 page for businesses, and updating the news page.
New information hierarchy has been created for the website through the use of font size, bolding and spacing.
The content on the page is presented in a card format to break up content. The business news section has been redesigned to make it easier for users to read content. Contextual links were included in the page to allow for easy navigation. The 'contact us' section has been updated with a 'Need help' label to make it easier for users to know where they should go.
A COVID-19 specific page has been created with important content highlighted with a coloured box.
The news page now has the new information hierarchy applied, and the social media options were moved from the top of the page to the bottom of the page to allow users to access the content they want first.
Usability Testing
We recruited the same business owners to complete usability testing for the new design, which had them navigate through different pages and content. We got a lot of great insights from our participants and the key insights are as follows:
Key Findings
“Business News should be moved to the top of the page and updated frequently”
“The navigation is easy because everything is right in front of you"
"I often want to talk to someone directly. The "Need help" label is obvious, and the contact information is easy to find at the top of the page"
"I like that there are multiple ways (three options) to get to the COVID page"
Journey Map
We decided to map the journey for our users based on their responses during the usability test, as well as our findings from our quantitative metrics when we measured ease of use and time on task. The journey is as follows:
High-Fidelity Mockups
The high-fidelity mock-ups were created using Adobe XD, with photos edited in Adobe Photoshop. Photos are sourced from Unsplash and Pexels.
COVID-19 for businesses page has updated colour and updated labelling for content.
News page has a shorter line length for easier reading as well as additional news cards to minimized the amount of back and forth navigation for the user.
Business news was moved to the top of the page and the card format was changed into a smaller grid. Colour was added to highlight key content, such as the COVID-19 for Business.
Conclusion
This project was a challenge from the very start, but it was also very rewarding. As everything is online due to the COVID-19 pandemic, it was very difficult for us to find participants for our interviews and usability testing. We relied heavily on our personal network to find local business owners, as the City of Kingston was unable to provide us with potential contacts. Throughout the project our scope changed three times, and we struggled with delays in receiving information from the client and timely responses for recruitment for interviews and testing. This led us to be stuck with short turnaround times to meet our client expectations.
This was a great lesson in patience, working with limitations, and managing the expectations of the client when your scope needs to change to accommodate a project. The team that I worked with was phenomenal and our level of communication and collaboration on every aspect of the project was incredible as it was all done remotely over Slack and Microsoft Teams.