Customize League page.
Easy content sharing.
My League Online (MyLO)
by The League of Women Voters
"Even the greatest website can have improvements."
Susan, 65, Volunteer Webmaster
League of Women Voters is a non-profit organization that works to increase understanding of major public policy issues and influences public policy through education and advocacy. My League Online (MyLO) is a content management system (CMS) built off of Drupal 7 used by LWV. The League can standardize the look and feel of chapter websites as well as leverage shared content across the organization. However, MyLO has proven to be both a difficult and restricted service for its users, the webmasters.
Role: Project Manager, UX/UI
Project Team: Iris Minji, Heidi Chow, Gilly Moon, and Jessica Gehring
Tools Used: Sketch, Photoshop, InVision
Timeline: 3 weeks
The greatest pain points voiced by users were that the website’s current flow requires too many steps to accomplish their tasks and the wording isn’t naturally intuitive (too jargon heavy). They shared that there are a lot of functions that they don’t frequent or are intimidated to use. If they do try them, they struggle to get re-acclimated depending on the frequency of their visits and regular activities.
The Design Thinking Process
How might we make the portal more inviting and easier to use so that all leagues are encouraged to join?
Discovery & Research
Information Architecture / Content Audit / Heuristic Evaluation / Competitive & Comparative Analysis / Card
Sorting / Site Mapping / Personas & Journey Maps / User Flows
From our evaluative and generative research, we wanted to explore the attitudes, hesitations, concerns, and behaviors that MyLO’s users have around MyLO and technology.
With non-LWV members, we wanted to see how fresh eyes would react to the redesign’s usability.
Across the entire backend admin interface of MyLO, there were a number of heuristic violations that we ranked on a scale of 1-4 with 4 requiring immediate attention. The most common themes found were:
Lack of clarity around (a) terminology, (b) fields, (c) sections to edit (d) layout hierarchy
Inconsistent UI patterns
Color contrast, particularly for buttons is weak
Lack of visual feedback or cues when you’ve selected something
We used this information as areas of focus for ADA compliance and overall design convention compliance.
Peeling back the layers from what users struggle with, we deduced that addressing the navigation’s layout and structure would promote an easier and more accessible flow. We discovered various design opportunities throughout the website, but chose to focus our efforts on the flow that most users go through and at the greatest frequency: add/edit a page.
76% of webmaster users tested were of the baby boomer generation. They’re volunteers who often are the only ones in their chapter willing to undertake the unfamiliar task of managing the chapter website.
The current site map has arguably either two sets of primary navigation or a secondary level that skips a primary navigation item. In other words, the site map’s organization is not clear at all. The ambiguity of knowing which front end page you’re editing or how to find other website controls is very confusing for the user.
Undoubtedly, the site map is an obstacle for new and returning users because it provides little indication of where to go or what to do and therefore makes it a difficult site to learn.
Why it was used:
Our demographic consisted of mostly senior citizens, so we researched elements that would allow them to navigate through the site with relative ease since many might not be proficient at using technology. We also considered visual impairments as something we might have to accommodate for, given the age of our users.
Font should not be smaller than 16 pt.
Sans-Serif fonts display better on computers and mobile devices
Good contrast is imperative
Clear hierarchy (clearly visible elements, sufficient contrast, and size, key discernible information at a glance.)
Similar items can be grouped together to improve readability
For Visually Impaired
Tend to keep flows of websites they regularly visit written down.
Visual cues, such as text field stroke, to indicate tasks.
Need clear feedback on progress and completion
Don’t divide screens into multiple actions
Provide reminders and alerts for actions
Current State Usability Testing
*Back end admin page of the current website
*Quotes from MyLO users
How might we make the portal more inviting & easier to use
so that all leagues are encouraged to join?
Card Sorting / Design Studio / Wireframes / Paper
Prototypes / Survey / Style Guide / Mockup
We tested a redesign of the navigation and layout based on our Current State Usability Testing findings and the Competitive & Comparative Analysis with users who have used created websites using a CMS before.
Conducted open card sort by printing out the navigation & contents of add/edit elements & had our users recategorize them.
Gave them an option to omit any elements.
Most users spent 20 minutes of
Up to 30% of the elements were set aside out of uncertainty.
Low Fidelity Prototype
Many users did not realize that the left navigation housed site pages
There are many unclear sections for the users
“Alternate hero image” was misunderstood by every user
"Sticky to the top” was confusing for many users
Create a “My Site Pages” label above the site pages (Home, About, anything they put under their menu)
A feedback banner that is color-coded to provide affirmation on what they’re doing (viewing, editing, saving, publishing)
Remove the pencil icon as it confused users what they were editing
Medium Fidelity Prototype
It is not obvious to the user where the page they’ve just created is.
Users responded positively to having a dashboard splash page
It was easier to understand the entire Page Excerpt section, but certain things need to be renamed
Change the +Add Page link
Per our client, the stars along the site pages need to stay in addition to left aligning it
Per our client, move the MyLO Home button to the bottom left instead of the top right
Create a toggle underneath the right side navigation for Advanced Settings
High Fidelity Prototype
Clickable Prototype: https://invis.io/XYS43SBFA5S
High-Fi Test Implementations
Add additional copy for regarding Advanced Settings elements
Advanced Setting element have blue headers instead of purple/burgundy
Rearranged the side buttons on the right navigation
Incorporate “Congratulations” into the feedback banner on the “View Published” page