This project was an academic case study for a user interface design course at University of Toronto School of Continuing Studies. I was assigned to research the UI pain points that users experience while interacting with a Canadian Space Agency government website homepage and solve the design problem. I worked on this project with 2 other group members, which lasted about 4 weeks. User research, usability & heuristic evaluation were done with my research partners, while information architecture and design decisions were made individually.
Research, Wireframing,
User testing, Prototyping
4 weeks
Adobe XD, Miro, Trello,
Artboard Studio
The existing CSA website lacks visual identity and hierarchy with counterintuitive information architecture, so that users have trouble navigating the website with a very low returning visitor rate.
Redesigning a responsive CSA homepage for desktop and mobile with an intuitive navigation system and visual hierarchy would improve user experience while navigating the website with more engagement, which eventually helps draw public attention to the CSA and promote Canadian government’s contribution to the space sector.
Once our team decided to redesign the CSA website, we then created a proto persona for a typical user of the CSA website based on our assumptions about the user's goal, need and possible pain point while using the website.
We conducted a usability & heuristic evaluation of the navigation system (utilities, navigation bar, and footers) and thoroughly annotated any issues to understand what it lacks in and validate the purposes of the redesign. Through evaluation, we synthesized a few key insights to drive the project.
Key Insights
•
Lack of visual identity; more space-related images expected from users
•
Too many clickable areas for users
•
Navigation bar breakdown needs to be reconsidered and cleaned up
•
Overall layout and flow of the website need to be tidied up for better navigation flow
We conducted 4 1:1 usability tests (2 tests on the desktop and other 2 tests on the mobile setting) to identify usability problems and pain points while navigating an existing CSA website. We analyzed user feedback with affinities and commonalities to identify emerging themes. Once we were satisfied with our connections, we prioritized items by frequency and importance with a 2x2 prioritization matrix to pinpoint a few major pain points that we could work on for this project.
Main Pain Points
•
Misleading headings of the navigation bar options
•
Aesthetically not pleasing design of the website both in desktop and mobile setting
•
Inconsistent footer layout
•
Search results not limited to the CSA website, unnecessarily covering the entire contents of the canada.ca website
After identifying the user's pain points, we then started working on the project individually from that point. I conducted a card sorting to evaluate the IA of the existing CSA website before redesigning the process.
First, I created cards for all primary and secondary navigation menus in a navigation bar, utilities, and footers. I placed them that belong together into the same group, named each group, and then broke them again into smaller groups within each group if necessary. Lastly, I changed their orders according to relevance. During the card sorting process, any redundant cards were discarded and each were relabeled if necessary for better navigation.
I then created a sitemap using the card sorting results as my roadmap. Each navigation option is preferentially organized by importance or relevance, if not, by alphabetical orders. Some of secondary and tertiary menus are categorized together with other menus of similar contents.
UI components, such as header with utilities, navigation bar, and footer, were created for desktop.
•
Combined and rearranged navigation options of the Government of Canada and the CSA website, leaving canada.ca link available as utility, as the CSA is under Innovation, Science and Economic Development department of the Government of Canada
•
Français (French) option available as utility to support both of the official languages of Canada
•
"Aeronautica Online Store" under "Resources" repositioned to the top of the website as utility, as it redirects users to external website
•
Rearranged footers in uniform layout with universal and intuitive headings ("Transparency" to "Privacy Policy")
•
Broken links to social media removed and repositioned
•
Combined and rearranged footers of the Government of Canada and the CSA website, leaving canada.ca link available as footer, as the CSA is under Innovation, Science and Economic Development department of the Government of Canada
•
Copyright added at the bottom
Header includes hamburger menu, CSA logo, and search icon as shown below. Primary menus are unfolded if users tap on the hamburger menu icon on the header. Utilities are placed at the bottom, except French language option in a toggle button on top. Secondary menus are unfolded with a back button available on top, if users tap on any of the primary menus. In this case, users click on the “About CSA” primary menu.
Homepage wireframe for desktop was created using a UI grid system of 12 127px-width columns with 16px gutters and 110px side margins, while wireframe for mobile was created using a UI grid system of 4 68px-width columns with 10px gutters and 36px side margins.
A total of 15 5-sec usability testing were conducted through UsabilityHub (14) and Zoom (1) with three questions; what are the main elements you can recall?, who do you think the intended audience is?, and what was your impression of the design?
All people who participated in the 5-sec usability test on a desktop through UsabilityHub were successfully able to recall the main elements and identify a target audience for the CSA website, which would be general audiences who are interested in space and want to know how the Canadian government contributes to the space sector. All participants liked the astronaut image as a background of the homepage with a brand statement, which validated my design decisions to set the tone for the CSA website. On the other hand, one 5-sec usability test was conducted through Zoom, which I gave more than a minute to look through the CSA homepage. Based on user feedback, I made some iterations on V1 wireframe as the following.
•
Bigger heading font size for "Mission" and "Latest News" with a little brand colour red stroke under for cohesive design pattern
•
Larger next/back buttons on a "Mission" carousel vertically aligned middle with a image
•
Timestamps added to each news card
•
"Upcoming Events" added where users could hover over and tab on each card to view details
Through 3 remote 1:1 user testing on a mobile conducted to validate the IA and design decisions, I was able to discover two main pain points while conducting usability tests.
Main Pain Points
•
All test participants thought that "About CSA" would be a standalone page with some texts introducing the CSA to users, so that they all first tapped on Resources, not "About CSA" to find available job positions in CSA using the hamburger menu.
•
One participant pointed out that the position of the next button in "Latest News" and "Upcoming Events" carousels got pushed to the right from a second option and so forth, which bothered him a little.
•
3 main missions laid out upfront on the homepage, rather hidden in a carousel, to better represent what the CSA does and focuses its activities and resources onto users
•
Next button made visible in a first option in a carousel, but in an inactivated state
•
Timestamps added to each news card
•
"Upcoming Events" added in a carousel
•
"About CSA" renamed to "CSA", which implies that it nests more secondary menus related to CSA under it
•
CSA logo added under "CSA" menu text to make it share a common theme with other menu options
•
Language toggle button changed to regular button, since it is not meant for on/off actions, rather than English or French
This was my first experience redesigning an existing website. I had to spend a long time rebuilding the information architecture with card sorting after going through every single page, so that I could single out old, outdated or even repetitive, redundant pages that hinder users from accomplishing their goal. I will keep moving forward with this project, conducting more testing, iterating, and even creating some of the content pages in near future.
