Redesigning YMCA’s website

YMCA

The YMCA of Greater Vancouver was founded in 1886 with the purpose of providing a place to care for the welfare of young men in the community. Over the years, the organization evolved and expanded their reach and scope of support to serve the community at large. The YMCA now has a myriad of comprehensive community programs to meet the needs of women, men, children, and families across the Lower Mainland.

Key Goals:

Increase existing and prospective members satisfaction while using the website by enhancing its utility and usability.

Improve navigation and information architecture to make information more discoverable.

Identify opportunities for improvement with regards to features and functionality.

My Roles + Responsibilities:

UX designer and researcher. Solo project.

Tools:

Google Forms, Sketch

 

 

Discovery

To better evaluate the existence of usability issues on the YMCA site, I interviewed current members about their experience using the site. I also carried out some usability tests to gather behavioral data. Altogether, I planned and conducted 18 interviews with stakeholders, current members, and potential members in Vancouver. 

 

  2   Stakeholder Interviews

11   Member Interviews

5   Potential member Interviews

 

Task Scenarios for usability tests

• Imagine you want to sign up for a gym membership at the YMCA downtown, how would you do this?
• You are a mother of a 5-year-old boy. Imagine you want to go take a Zumba class while leaving your child in the capable hands of YMCA staff for the duration of your workout, can you do this?
• Imagine you want to learn about the different group workout classes available at the YMCA? How would you do this?
• Imagine you can only budget $60 a month for a gym membership. Is the YMCA an option for you?

 

Affinity Mapping

 After reviewing my notes and usability test data, I created an affinity diagram to give me a bird’s eye-view of all my findings. I was then able to organize similar ideas and pain points into different groups based on their relationships.

 

1  Interviewees reported being confused about some of the category names in the universal navigation. What was the difference between child care vs. child & family development, all programs vs. find a program, and what were global initiatives and youth engagement? They felt that some of the categories were not self-explanatory. When I probed further about what they meant, they mentioned that  labels were not intuitive and that they did not want to “check all the pages to figure out what was and wasn’t there.”

Solution: Instead of the existing dropdown, I used a mega menu. The YMCA site is quite deep and the current menu does not emphasize clear relationships among items. Mega menus support groupings and subcategories that help users see their options at a glance, making it easier for them to decide whether a path will help them achieve their goal. Mega menus also allow for the use of icons and pictures to further convey meaning.

As a part of my research, I looked at how YMCA sites around the world were grouping similar content.  Having also decided on a mega menu, I was interested to find whether any other YMCA’s had adopted this type of navigation. I was pleasantly surprised to find this in a YMCA  based in San Francisco. I used them as my model and applied the same information architecture (IA) so I could test whether users would find the menu easier to scan and the IA more intuitive.  Post-tests showed that users were indeed more satisfied with the new model, and had a clearer understanding of where to find the information they wanted. 

2  I maintained the option for users to access schedule and program information below the fold and replaced the “welcome to the YMCA” section (that no interviewees clicked on) with the option to learn more about YMCA causes for giving.

3  Here I emphasized YMCA’s charity status along with their mission and included stats with additional information. I also added a contextual link for users to access more about specific projects. 

4  Provided easy access to locations search on the homepage. 

 

1  Only 1 interviewee had previously donated to the YMCA.  The rest reported that they were not willing to donate based on the information they were given on the website. Interviewees felt the menu options were uninformative and page contents were vague, often missing important information they expected. 

When interviewees were asked what information they required to help them make their decision, 90% mentioned wanting specific information about projects related to the organization’s mission. They also wanted to know how their donations would be used.

1  A common pain point I discovered during my interviews with YMCA members.

Users wanted to know the hours of operation for their local YMCA and often did not find this information quickly. They did not scroll too far below the fold (where the hours were displayed) and instead chose to continue their search by navigating away from the homepage. They gave up on their 3rd try and started googling for answers. 

Many mentioned they would resort to calling for the information, but were not happy about it because they felt calling was reserved for more complex questions. 3 interviewees completed the call and heard the hours information via a recorded message. They mentioned only a slight decrease in annoyance even after achieving their goal.

*A usability study of customers interactions with organizations using various channels by Neilson Norman Group, found most customer service calls result because online channels fail to meet user needs. They report that customers’ user experience is degraded when they have to interrupt their task to contact an organization through another channel. Over time, customer satisfaction and loyalty also degrade as a result. 

My Solution: Display the daily hours above the fold, and allow users to use the drop-down to access further information.

2  90% of non-members and 70% of members interviewed did not know what the YMCA really did. “It has kids programs”, “It’s a gym”, “It’s a religious organization” were some of the comments shared.

I observed users quickly scrolling past the carousel of images with the organization’s messaging, noting that only one message and picture had been visible in the frame before they had moved on. It’s difficult to form an accurate impression of what an organization does when users only see a fragment of the whole.

My Solution: Use a hero image instead of a carousel. Apply an inverted pyramid  design and include a tagline that tells a more complete story about the organization.

 

 

 

 

1  The current homepage for Robert Lee YMCA shows the sites universal navigation in a prominent red colour and the subsites navigation in a light grey colour. I observed users hopping back and forth between the two navigations, admitting to being confused over which to use. Some people only used the universal navigation missing the subsites navigation bar altogether.  Not finding needed information on the subsites menu also resulted in users returning to the universal site. (*Picture in colour shows existing site)

Solution 1: To ensure a sense of hierarchy while maintaining both nav bars, I initially chose to emphasize the subsite’s navigation bar by making it bigger and darker in colour, moving the now lighter coloured universal navigation bar to the top of the page. After testing, I found that while all users now noticed the subsite’s navigation, the common labels in the nav bars resulted in a few wondering whether the information would be different between the two. (*1st wireframe shown on the right)

Solution 2: To give users an easy way back to the main site but reduce cognitive load due to multiple navigation options, I included the universal sites logo (YMCA of Greater Vancouver) at the top left corner of the page. This resolved the problem of competing navigations, while still providing an exit sign for users who wanted it. (*wireframe shown below)

 

1  Hours information slides in from the right after users have clicked to view hours.

2  Both existing and non-members said they wanted the option to register for programs and classes online. Non-members looking for registration information on the website could not find it on the subsite nor the universal site. They typically clicked on JOIN THE YMCA link in the universal navigation bar and after scanning the information 2 to 3 times, reported that they still did not know how to register. “I guess I have to call them to find out” was a comment I heard from interviewees. They also pointed out that there was too much information on these pages and that they cared most about rates and registration info. ( Current ‘Join the YMCA’ page does not provide registration info and rate info shown below the fold).

 

Solution: Include a membership link in the subsites navigation and populate with relevant scannable information, so users don’t have to navigate to the universal site and click 3 times to get to membership information. I would change the hierarchy of information,  highlighting rates and describe registration process above the fold with broken text if need be to ensure that users know there is more information further down. Below the fold is where I would highlight membership benefits and include a video tour of the facility. 

3  Online registration would give users the freedom to customize their calendars and allow them to save classes and receive notifications/alerts for their saved items.  Customization can enhance users’ experience by giving them control over their interactions.

4  a) Currently, the daily schedule page shows all classes and class descriptions on the page forcing users to scroll long pages to view more entries.

b) When asked what additional features they wanted to have on the website, members mentioned wanting to know which trainers were teaching group classes. Members reported having favourite instructors and wanting to take more classes with them. The problem was that unless they remembered the instructor’s schedule by memory, they had no way of finding this information online. 

a) Solution: Improve readability with pagination, allowing users to choose navigation options and decide on how much information they were viewing at one time.  A simpler view of classes with a ‘view details’ link gives users the option to explore further without overwhelming them with too much information that may not be of interest to them.

b) Solution: A modal shows class, trainer, and location information when the ‘view details link’ is clicked. Ratings help distinguish popularity of classes. A picture of where classes are held assists users with wayfinding.   2 interviewees new to the YMCA  reported that they had difficulty finding classes with only room names to lead them for example, Hume Family Studio.