ROLE
Digital Communications Assistant
COMPANY
Magnet
TEAM
1 Designer / 1 Software Developer /
1 English-French Translator / 1 Project Manager
Problem
PROBLEM STATEMENT
During the initial review of Magnet's partner organization website, several key UX issues were identified that significantly impacted user experience and overall site performance.
The main problems included a complex navigation structure, lack of essential accessibility features, and inconsistent design elements.
BUSINESS GOAL
Our objective is to simplify access to grants, streamline the application process, enhance user experience with a clear website design, and support effective digital transformation for small and medium-sized businesses across Canada.
Overview
COMPANY BRIEF
The Canada Digital Adoption Program (CDAP), managed by Magnet, is a government program that helps small businesses in Canada grow by adopting digital tools, building e-commerce, and developing digital skills.
MY ROLE IN THIS FEATURE
This case study covers my work on a key project for the Canada Digital Adoption Program (CDAP), where I independently led the website redesign based on user research, analytics, and usability principles.
Solution Preview
Simplified Access to Grants
Clear and Intuitive Navigation
Enhanced User Engagement
Results
SUCCESS METRICS
Our success metrics are aligned with our business goal of enhancing user experience and overall site performance for the Canada Digital Adoption Program (CDAP) website. These are the key metrics we aim to use to measure our success:
Homepage Engagement
A key metric to understand if users are quickly finding the information they need, helping to improve navigation and accessibility.
Click-Through Rate (CTR)
Tracking clicks on key buttons like “Apply Now” or “Learn More” will highlight how effectively the site is driving user interaction.
Overall User Engagement
Higher session durations and page views per session will show that users are exploring more and engaging deeply with the content.
REFLECTION
The project focused on user experience research (UXR) and data-driven decisions. This pushed me out of my comfort zone, enhancing my agility and adaptability. It also deepened my understanding of user needs, enabling me to deliver more impactful, research-backed design solutions.
Process
.png)
Research
WEBSITE REVIEW PROCESS
USER INTERVIEWS KEY INSIGHTS
Visual and Information Hierarchy
01
Users expressed that the current layout lacks an effective visual and information hierarchy, making it difficult to identify important content quickly.
Many users noted that there is too much white space, which detracts from the overall aesthetic and usability of the website.
Excessive White Space
02
The color scheme and visuals were described as lacking appeal, leading to a perception of the website as outdated or unattractive.
Visual Appeal
03
Important information is not clearly highlighted, making it challenging for users to locate relevant content.
Content Clarity
04
Users indicated that the flow of information could be improved, with centered text being particularly unappealing and hard to read.
Flow and Readability
05
The website lacks an intuitive navigation system, with users struggling to find tools like eligibility forms, which are buried at the bottom of the page.
Navigation Issues
06
ANALYTIC RESEARCH
KEY INSIGHTS
Short Average Time Spent
01
Users typically spend just under two minutes on the homepage, suggesting they struggle to find information quickly due to an overwhelming number of links.
A significant number of users exit the site from the homepage, indicating that it does not engage them enough to explore further.
High Exit Rate
02
Certain buttons are not being clicked, implying they are not noticeable or accessible enough. Event tracking data highlights user pain points and behaviors that need to be addressed in the redesign.
Event Tracking Insights
03
COMPETITIVE ANALYSIS
I found several websites that effectively cater to similar users and goals, including the Small Business Administration (SBA), OpenGrants, Verizon's Digital Inclusion Program, NerdWallet, and Grants.gov. I investigated these platforms for patterns, weaknesses/opportunities, and how they overall solved the problem. Some features that stood out were:
.png)
Define
WEBSITE REVIEW PROCESS
Personas
_edited.jpg)
BUSINESS OBJECTIVES
01.
Simplify navigation and improve accessibility
02.
Streamline the grant application process
03.
Enhance user engagement with clear design
USE STATEMENTS
Redesign the homepage to reduce clutter and emphasize the most critical links and information.
Use Case 1
Features:
-
Prioritize content based on user needs and frequency of use.
-
Limit the number of links on the homepage to essential ones.
-
Use visual cues like icons and imagery to guide users to important sections.
-
Create a featured section for top resources and updates to draw attention.
Redesign buttons and other interactive elements to be more prominent and user-friendly.
Use Case 2
Features:
-
Increase button size and use contrasting colors to make them stand out.
-
Place buttons in intuitive locations, such as above the fold or near relevant content.
-
Use clear, actionable text on buttons (e.g., "Apply Now," "Learn More").
-
Conduct usability testing to ensure buttons are easily clickable on mobile devices
Develop an interactive navigation menu that categorizes content logically, reducing the complexity for users to find relevant information.
Use Case 3
Features:
-
Implement drop-down menus and a clear path for each user segment (e.g., SMEs, applicants, partners).
-
Highlight key sections prominently on the homepage.
-
Use clear headings and subheadings to break down information into digestible parts.
-
Incorporate a search bar with predictive text to help users find specific content quickly.
Ideation
WEBSITE REVIEW PROCESS
EARLY WIREFRAMES
I began by identifying key areas where the current user flow could be improved to better align with the program’s goals. Using low-fidelity wireframes, I sketched out ideas on my drawing board to illustrate potential solutions for enhancing navigation and accessibility. These early concepts provided a clear foundation for evaluating and iterating on designs to ensure they addressed user pain points effectively.
.png)
Design
WEBSITE REVIEW PROCESS
USER FLOW
Using the existing site map as a reference, I mapped out the user flow for the redesign to better understand how users would navigate the platform. This helped me identify key steps, streamline the process, and create a clear list of screens and interactions to design.
Redesign
.png)
USABILITY TEST KEY INSIGHTS
Overloaded Grant Pages
01
What we learned: Users felt overwhelmed by too much information on grant pages, making it hard to focus on what mattered most.
What we did: We simplified the content to highlight essential details—grant information, eligibility, and the “Apply Now” button—while moving FAQs to a secondary position.
What we learned: Users struggled with navigating between multiple pages to find what they needed.
What we did: We streamlined the process by reducing steps and making the two grant options on the homepage lead directly to their respective information pages with a prominent “Apply Now” button.
Complicated Navigation
02
What we learned: Users had trouble finding and understanding the eligibility criteria.
What we did: We combined the grant details and eligibility information into one easy-to-access section on the homepage, removing unnecessary navigation to make it clearer and more user-friendly.
Difficulty Finding Eligibility Criteria
03
USER FLOW UPDATE
After conducting usability testing and gaining deeper insights into user needs, I updated the user flow to prioritize simplicity and direct access to key features. The revised flow streamlined navigation, ensuring users could quickly find what they were looking for. This iteration set the foundation for multiple rounds of design, feedback, and further usability testing to refine the experience.
FINALIZE FEATURES
After finalizing my design iterations, I collaborated with the developer to review and refine the implemented features. This step ensured the designs translated seamlessly into functional components. We addressed any discrepancies and made adjustments to enhance usability and maintain alignment with the project goals.
Design Breakdown
Streamlined Access to
Grant Information and Applications
I simplified the process of finding grant-related information by consolidating everything users need—eligibility criteria, application steps, and FAQs—onto dedicated pages for each grant.
A prominently placed "Apply Now" button ensures users can seamlessly transition from learning about a grant to starting their application.
Clear and User-Friendly
Navigation Structure
The navigation menu was redesigned to be more intuitive, with logical groupings and clear labels for each section. This makes it easier for users to locate key resources like grants, FAQs, and support pages without unnecessary clicks, improving the overall user experience and efficiency.
Increased User Engagement Through Targeted Resources and Features
I enhanced engagement by introducing categorized resources, step-by-step guides, and accessible contact options.
The homepage now features highlights such as news updates and key links, drawing users into exploring more opportunities and keeping them actively engaged throughout their visit.