Gen Why Media

A UX Case Study

Simone Jade Kelly
theuxblog.com

--

Gen Why Media is a female owned and operated creative engagement agency that specialise in new forms of public participation and cross-generational dialogue.

Co founded by Tara Mahoney and Fiona Rayher, Gen Why media was created out of a conversation about how generational shifts correlate with mass consciousness.

They consult, design and create captivating engagement projects that inspire civic engagement across generations. Moving between online and offline spaces in order to create meaningful public interactions and achieve specific goals.

The Problem

How can this small not-for-profit engage with their current users online to increase participants at events.

The Project

The objectives of the site redesign were to optimise interaction on the site, increase engagement with Gen Why the organisation and the conversations they were part of and to combine these to ultimately build trust with end users.

Client Objectives

  • Increase users at Gen Why events
  • Increase users to start a self managed dialogue with other users offline
  • Creating awareness for Gen Why with potential clients to gain event acquisition

Research

As the client did not have access to analytics data through their site we were at a loss for real stats. We did however have access to certain tools that allowed us visibility into the how the site was currently consumed, that being mainly via a desktop.

The current site was lacking engagement, clear navigation, and the content was all over the place. After conducting two contextual inquiries we knew that our first job was a full overhaul of the sites IA.

The site desperately needed a facelift in order to connect with the organisations hip target audience and also needed to introduce analytics so they could manage their engagement moving forward.

Gen Why Previous Site

Collaborator comparison

Gen Why does not have any competitors as such, however they do have many collaborators and like minded public engagement agencies in the Vancouver area. We conducted a competitive comparative analysis on different collaborator website functions in order to see where other organisations were better addressing the needs of their primary users.

User Interviews & Survey Results

After conducting 13 interviews and receiving 36 responses from surveys we were able to establish who our end user was and what made them engage with sites.

Through this analysis we discovered that our user:

  • Lived in Vancouver.
  • Wanted to make a difference and contribute to positive social change.
  • Wanted to find already established organisations to volunteer with.
  • Was concerned that if they were to create a movement themselves it would be overwhelming and time consuming and not actually achieve anything.
  • Focused on the practical outcome, not just talking about the issue.
  • Passionate about global issues, from political to social injustice and environmental concerns and wants to work out ways to innovate and change these circumstances.

They desired a space in which they can network/meet up with like minded people and create a dialogue to create change.

They were:

  • Innovators
  • Creators
  • Designers
  • Thinkers

With this information we developed our two personas.

Planning

The Primary User — Adeline Lee

Adeline is a compassionate young woman who wants to make social change, but just doesn’t know how to get started. She is an idealistic university student who dreams of repairing race relations, and creating affordable housing. She is frustrated by the lack of action from her peers and is looking supports to learn.

Secondary User — The Client Greg

Greg Gatsby works in universities as an administrator. Over the years working different roles at the university, Greg hoped to find ways to better engage his community with the university. He also wanted to bring social change. He attends various events at the university to learn more.

Content Audit

One of the first thing we noticed about the site was its awesome content. Great videos and conversations for others to view and be a part of. But after our contextual inquiry we found evidence that the content was buried and hard to find. The navigation was confusing and content overlapping across categories.

Below is a quote from an end user after conducting a contextual inquiry:

Here I came into Reimage CBC from the short videos. I just wanted to watch short videos but I now find myself under Event production, short video and Campaigns… What is a campaign? Now I am super confused and don’t know how to go further into the content so I am going to leave. This is not what I had signed up for when entering the site. I do not feel comfortable, I am lost and this isn’t building trust with me.

Card Sorting

We started by defining the content and asked users to move the content (events, short video and art projects) into the category that made sense to them. This was particularly hard to do as so many events overlapped across sections.

Building clear IA is the incredibly important when developing trust within a site. Strong navigation through the site content puts the end user at ease. The end user must feel as though they are in control of their path and how they consume the sites content.

Site Map

We realised that to make our users’ experience seamless, we must build clear information architect. However building clear information architect wasn’t easy since there was so much content over lap. This meant our site map took on many iterations.

The Final Site Map

Design

Tone+Voice

The tone of the existing website was academic and authoritative. However one of the comments from the contextual inquiry we conducted was that users found the language was unwelcoming and didn’t help to build trust.

We wanted users to feel welcome and engaged when they entered the site so we changed the copy of the site to be accessible, collaborative and inclusive. Going back to the grass roots of the organisation and connecting with how Gen Why Media started, as a conversation over coffee.

Wire framing

Once the information architecture was complete, we went into the design phase. Since the goal of the project was to design a responsive website we started with mobile first.

Mobile Paper Prototypes

After gathering each team member’s wire frames, we proceeded to merge the best of our wireframes into one cohesive flow. We conducted usability test in the process of choosing the final designs.

After a number of tests were conducted and retested we took the notes from each test to create our final designs.

Mobile high fidelity prototype

Once the mobile design was all set, we started with designing the desktop version. As we had decided on a modular design and infinity scrolling it was easier to design as the basic layout was already created. We chose this style of design as it is modern, easy to navigate, suited our clients brand and can make life a little easier for the web developers when coding a responsive site.

Minimal design changes between mobile and desktop versions to remain on brand yet accessible across both platforms.

Prototype

Mobile

Desktop

Wrap up and further considerations

Lessons learned

Even during development we continued to test and made a number of changes to comply with accessibility. The developed site took on many iterations from its original design.

Unfortunately while we were working on the project we didn’t have he opportunity to meet with the web dev team until the UX process was complete and ready for handover. It would have been mutually beneficial if we had had access to the developers during the design process. In future I will make this a priority.

This was not an easy assignment for the three of us to take on. Obligations outside of school impacted on the group dynamic and a disconnect between the group and our client impacted on our final deliverables.

The clients brief changed drastically after the presentation and went from a site to connect users to Gen Why the organisation, to being a portfolio site for each founding member. This was vastly different to the brief and would have meant we took a totally different direction during our research and planning phases.

However after working closely with the Web Dev team and our client we came to a happy medium where we could deliver on what was promised to the client.

--

--