PROJECT TYPE
UX Design
(School project)
ROLE
Lead Designer,
Lead Researcher
TEAM
Kayleigh Malik
(Solo)
TIMELINE
Sep 2023
(3 weeks)
The Design Process
01
Research
02
Ideate
03
Design
04
Test
05
Reflect
01 | Research
Usability Test
I conducting guerrilla usability testing of the current Wikipedia design.
Testing scenarios included:
-
Interactions with the article pages
-
Finding specific information throughout an article
-
Finding information only located in the info summary
-
-
The main home page
-
Finding information about historical events
-
Finding information about current events
-
-
Search results page
-
Searching for and locating a specific article
-
Participants felt the design was too crowded and overwhelming. Although users they said they found information easily, they all hesitated when asked to quickly scan for specific headings or sections. The search results page was called difficult to navigate. Users had a fast bounce rate from the main page during testing, stating they felt overwhelmed by the page. Users all took advantage of the navigation and quick facts of the article pages.
A screenshot of the Wikipedia home page design at the time of this project.
How might we increase the readability and scannability of Wikipedia while minimizing user disorientation?
02 | Ideate
Sketches
With the usability feedback in mind, I sketched some redesign ideas for Wikipedia's article, search, and home pages with the intentions of increasing readability and scannability. For each of the three pages I tried sketching three different possible layouts, resulting in a total of nine sketches.
I focused on restructuring into familiar feature, search, and browse patterns; separating information and increasing hierarchy with white space, font size, and font weight; and reducing overwhelm by shrinking text width and adding features to reduce the amount of information shown at once.
View the slides of my class presentation about why I made these design decisions.
A series of nine sketches (scrollable) of different home, search, and article page layouts.
03 | Design
Low Fidelity
I combined my favorite elements from the sketches and created low fidelity wireframes to get an idea of how the pages would look and function digitally. I combined the search hero and carousel layout for the main page, was inspired by Google when reworking the search results page layout, and focused on reducing the width of the main content on the article page.
Three low fidelity wireframes: one home page, one search page, and one article page.
Class Feedback
I submitted my annotated sketches and low fidelity wireframes for class feedback, specifically asking for feedback about the quality of the page flow, readability, and amount of overwhelm.
Feedback for improvement:
-
The separate widths of the search results and article pages were confusing
-
Home page carousels felt repetitive and uninformative
-
Featured search result looked more like an ad than an article
-
The double search bars on home page could be confusing
Positive feedback:
-
Good use of feature, search, and browse patterns
-
New article edit button was an improvement
Screenshot of class feedback (on a Miro board) for sketches, wireframes, and basic wireflow.
Mid Fidelity
I re-worked my wireframes and added copy text, drawing inspiration from both class feedback and the designs of my fellow classmates.
Global changes:
-
Breadcrumbs (super necessary!)
-
Simplified content to all fit within a single page width
Home page changes:
-
Increased the size of the hero search bar to differentiate from the header search
-
Changed card layouts for each section to reduce monotony and best display each section's content
Search page changes:
-
Changed the featured result to a horizontal card
-
Added pagination instead of an infinite scroll
-
Option to adjust # of results per page
Article page changes:
-
Added view tabs and more function buttons
-
Inserted vertical lines for subsections
-
Reduced the article references (at the bottom) to one column instead of two
Three mid fidelity wireframes: one home page, one search page, and one article page.
04 | Test
Usability Test (Round 2)
I conducted another round of guerrilla usability testing on my redesigned pages. I focused on scenarios emphasizing speed. I wanted to see how overwhelmed users felt in these test scenarios with the redesigns.
Testing scenarios:
-
Editing an article with incorrect information
-
Finding specific information within an article page
-
Double checking information in an article using the article resources
Screenshot of the basic framework used for usability testing.
Findings:
-
Participants found the designs less confusing
-
Participants were faster at finding information
-
The breadcrumbs, left hand article menu, and article quick facts were frequently utilized for fast navigation
-
Participants viewed the search results page more positively
-
Participants found search results more quickly
Screenshot of a usability test Zoom meeting.
05 | Reflect
What I Learned
Guerrilla Usability Testing
This project was my first introduction to structured usability testing. By the end of this project I was a lot more comfortable with the process and found it extremely useful. Without this testing, I would have missed out on some valuable insights (both from the user's verbal explanations as well as noticing where they hesitated or showed confusion).
Psychological Design Patterns
I learned some great psychological patterns of how people see and read in this class and was able to apply some of those patterns to my designs.
-
Smaller text width
-
Grouping objects together through white space
-
Peripheral versus primary content and its effects
-
The use of simple features for recognizability
These patterns really helped refine my designs and increased the readability.
Leading Usability Scenarios
When revisiting this project in hindsight, I realized that a lot of my usability scenarios were leading. Namely, several scenarios contained words or phrases that existed in my design, so participants may have just word matched instead of thinking about how they would complete the scenario. This likely biased my results.
Next Steps
This project was for an Interaction Design class, so we didn't do much in the way of information architecture. If I continue with this project, I would like to do some inventory of the tools, functionalities, and view modes for all Wikipedia pages and determine the best way to organize and display all of them. Currently my design does not take these into account, and the current Wikipedia design does not always lay these functionalities out logically.
