• LinkedIn - Black Circle
  • Instagram

Website Design and Content © 2019 Iris Minji

Customize League page.

Easy content sharing.

Increase engagement.

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: 3 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

undraw_community_8nwl.png

*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 

  •   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   

Must

  •  Add/Edit pages usability and design 
     

  • Redesign webforms
     

  • Cater to the wants of tech savvy webmasters 

Should

  • Propose navigation consolidation
     

  • Clearer flow of adding or managing new members  

Could

  • Change the branding 
     

  • Make the back-end mobile compatible

Won't

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

unnamed.jpg
Eunice-02.jpg
  • 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

IMG_2574.jpg

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

Style Guide.png
 

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
03_Onthefloor  Example_0,5x.png
The Boring Company
A&C Checkout.png
Artist & Craftsman Supply Store
IRIS MINJI LOGO.png