PICTURING MEXICAN AMERICA

Website Redesign

PROJECT OVERVIEW

Project Type: Team project for UXDI Immersive Program through General Assembly. We were tasked to redesign the Picturing Mexican America (PMA) website.

The Objective: To create a website that is accessible for all people to learn and interact with the stories and history of LA’s Mexican past as well as provide a space for educators to access resources for the classroom

Time: Two Weeks, April 2022

Tools: Figma, Octopus.do, Google Workspace, Zoom, Slack

DISCOVER

USER INTERVIEWS

Eleven users were interviewed, and the information collected was synthesized using affinity mapping.

Research Trends

Currently, PMA generates a lot of content through instagram with strong following but Instagram is limited in how much content can be shared.

Through user research, we wanted to learn about how people like to interact with the PMA content beyond instagram. Here are some findings and trends that came from our interviews.

These insights helped us understand how our users digest information, prefer to engage with content and why they return to website.

Image: Research Trends in conversation bubbles

DEFINE

Problem Statements & Personas

Image: Problem statements for General User, Collaborator, and Educator

We have three personas - Isabel being one of them. She is a collaborator interested in getting involved with PMA and needs a way to contact them or a place to submit written materials.

One of her pain points is that she doesn’t like to use form fills and prefers to send an email

Then we have Jessica who is a grade school teacher interested in finding ethnic study resources that she can bring into the classroom. She is someone who needs a way to make her lessons more relatable to the students and would love to incorporate local history.

Then we have Axel who is our Primary Persona and a general user of PMA. He is someone who has a personal connection to the PMA content and wants to learn more so that he can share it with his family. He’s someone that needs lots of visuals to stay engaged as well as updated or new content that will keep him coming back.

Comparative Analysis

After defining our personas, we did a comparative analysis of websites which were obtained mostly through our interviews. Once we understood the user’s needs we sought to learn how other sites successfully or unsuccessfully used and displayed interactive content, as well as how it’s structurally organized. We also looked at the types of visual languages and systems they were using.

Tree Test

Lastly, we decided to run a tree test to see if users could find the content they needed based on the navigation headings alone. It was conducted with 7 tasks, and had a success rate of 92% which means that our proposed site map would appear to be easy to navigate and inform users where to go. However, to know for certain whether the success rate stays in this way further testing would need to be done.

DEVELOP

User Flows

Drawing from the user problem statements, we generated 3 user flows.

For the general public and in line with Axel’s persona, the goal is to bring users from instagram to the PMA website so they can engage with the content further. They can choose to explore other features such as Face Match and Map.

Additionally, they have the opportunity to share the content with family and friends

The second user flow is for a collaborator who wants to learn about PMA’s mission, see current collaborations, and learn how they can get involved and in contact with PMA.

The final user flow is for educators interested in exploring lesson plans and resources that support the ethnic studies curriculum in the classroom.

They need to understand how the PMA content and additional features would support their lessons and be beneficial to the students in the classroom.

With the limited time and overwhelming workload of the educator, we created this flow to be simple and intuitive

Site Map

The final site map informed the structure and design of of the website.

After considering a number of versions - the one seen here showed to be the most streamlined with the success of the tree test - and integrated both the Map and Face Match features - from the mobile app into the desktop website.

From our first meeting we learned that in the classroom, students do not have access to mobile devices - and are more likely to have access to desktops or chrome books which is why we were asked to bring those features into the desktop version as a part of the website redesign.

Sketches

Influenced by our research, we used the design studio method to begin ideating the website design.

We considered how users would interact on desktop with features like the map and face match, as well as how to structurally organize other stories that exist as part of the PMA content.

So many of the stories are connected and there needed to be a way for users to intuitively find the content based on specific categories. We identified common themes within the stories and tried to create an organizational system and framework for the content to live in.

We took into consideration our users needs and pain points with our diverging sketches to create mid-fidelity wireframes

DELIVERY

Wireframes & Lo-Fi Wireframes

Converging our sketches we created mid fidelity wireframes

We referred back to each of our personas and based design choices on their needs and pain points

Going back to our objectives, we wanted to provide our users with clarity about what PMA does and what the content is about at first glance on the home page. Beyond the Map and Face Match features, we put focus on the Education, About, and the Contact page,

The wireframes were used to create a mid-fidelity prototype

Image: Wireframes for PMA Homepage and PMA Story page

Image: Wireframes of additional PMA pages and variations

Usability Testing

Part One: Mid-Fidelity Test

We tested users from all three user groups including the educator, collaborator, and the general public. This is just a small sample of some of our findings.

Image: Mid-fidelity usability test result examples

Pluses

Map is really cool
Thinks the horizontal scroll story is super awesome - feels like a book
Likes person and place of the day

Deltas

Unsure when to keep scrolling (no scroll indicator)
Wanted to click arrow because it looked like a button but it didn’t work
Cannot remove tags once selected from filter
Wants to see side by side of photo take with other matches

These findings informed our next round of iterations

Part Two: High-Fidelity Testing

Image: High-fidelity usability test results examples

Pluses

Loves the old images - it’s cool to see the information presented
Thought site was cool, it’s clear they’re doing a lot of things
Stories Page was exactly as expected to see

Deltas

Might need more clickable arrows in the horizontal story for some users who don’t get that the need to horizontal scroll
Font seems small in some places
Unsure what happens when form is submitted

Style Guide

One of our focus areas for improving the UX of the PMA website was also to think about the overall look and visual language of the website

We adapted the original style guide while improving on what already existed

We expanded on the colors used on the app to add more visual depth to the website

Headings were added to create more visual hierarchy in the way information is presented

The full style guide is more extensive and includes buttons, and other UI components

High-Fidelity Prototype

Video: Screen record of PMA High-fidelity prototype

What’s Next for PMA

Room for expansion with content growth
Outsource content growth by working with Latinx artists
Continue working with educators to optimize usability in the classroom