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
Platform: Desktop
Timeline: 5 weeks
The Challenge
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.
Heuristic Evaluation
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.
Synthesis/Project Scope
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.
MyLO Users
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.
Current Sitemap
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.
Secondary Research
Accessibility
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.
For Elderly
-
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
“If you weren’t here, I would have quit 3 minutes ago.”
Anonymous, 72, Webmaster
“I call Marilu and she does it for me.”
Sandra, 70, Webmaster
“I am lost because
I don't see everything I need to create all on one page.." Marilu, 35, Executive Director
*Quotes from MyLO users
How might we make the portal more inviting & easier to use
so that all leagues are encouraged to join?
Feature Prioritization
Must
-
Redesign the navigation
-
Create consistency
-
Simplify features
-
Design clearer indications of where the user is on the site
-
Make the back-end UI distinguishable from the front-end UI
Should
-
Add/Edit pages usability and design
-
Redesign webforms
-
Cater to the wants of tech savvy webmasters
Could
-
Propose navigation consolidation
-
Clearer flow of adding or managing new members
Won't
-
Change the branding
-
Make the back-end mobile compatible
Design Process
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.
Card Sorting
-
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
card sorting.
-
Up to 30% of the elements were set aside out of uncertainty.
Low Fidelity Prototype
Key Insights
-
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
Implementations
-
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
Key Insights
-
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
Implementations
-
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
Style Guide
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
Next Steps for MyLO
Continue to test the current high fidelity prototype: ie. terminology
Applying patterns from this design to other parts of site
Design a new flow for creating and adding: i.e. Webforms, New Members
Create Error Management states
More Work
The Boring Company
