My Role: UX Researcher | UX/UI Designer
Group: Madi Albers & TJ Jesrai
Duration: 2.5-Week Sprint
Tools: Sketch, Figma, Google Suite, Adobe Illustrator, Screencastify

The Client
In partnership with UCLA and Los Angeles Public Library, Professor Marissa Lopez’s mission was to create an impactful mobile experience that educated people on the Mexican history of Los Angeles.

The Challenge
The presence of Mexico in the United States has often been ignored and glossed over in traditional learning environments. The challenge was to create a product that allows users to move through and reimagine their space through the lens of Mexican America. How might we design an experience that fulfills these goals that is both educational and interactive?

The UX Process

Research
We attended a focus group that was hosted by the PMA team. From this session, we took away some key insights from stakeholders in attendance including librarians, students, and teachers. Attendees were interested in interactive maps, face matching quizzes, AR and gamification.

Through our initial research we wanted to understand how people like to learn and what exactly makes learning interesting. We conducted a user survey and came to the following valuable conclusions:

The Mobile Experience
We had to decide on which mobile experience to design for. Our options were a native app, hybrid app, or a responsive web app. Upon weighing the pros and cons of each option with the stakeholders and developers, we decided to move forward with a responsive web app. The primary reason for this choice was that it eliminates the hurdle of needing the user to download from the app store.

Meet Vivan, Johnny, & Raymond
Now that we had market research done, we created our proto personas to keep us accountable in designing for our user. These personas were created based on assumptions and market research.

Design Studio
After empathizing with our users, we conducted a design studio to put pen to paper and sketch out some ideas. Initially, we wanted to make the site as interactive as possible. We did so by creating large highly interactive cards on the home screen with swipeable content from the four different features, Mi Nombre, Mi Tierra, LA Selfie, and Mi Viaje

Testing Our Sketches
To test our initial concepts we conducted paper usability tests. Paper testing is used to test users' interaction with the prototype in order to better understand their mental models and behaviors. Conducting paper usability tests first helps to quickly and effectively solve user friction.

The Pivot
After testing with users, however, we decided to pivot towards a more straightforward home screen because the users were getting lost in the interactive cards and unsure what to do when landing on the home screen. This also would allow for more features and content to be added at a later time as the product grew.

Clickable Usability Tests
We continued user testing digitally with a medium-fidelity prototype. Digital testing insights were valuable because the interactivity of the prototype could be assessed more effectively. We made the following iterations:

Logo Creation
After validating with users we developed branding and style guidelines for the site.  The logo that we formed was created with the intention of symbolically representing that the southwest United States was Mexican land up until the Mexican cessian in the mid-1800’s. With the overlay of the two countries, we hope to allow the users to perceive Los Angeles as a Mexican city that it was and still is.

Style Guide & Branding
We wanted to create bright and festive colors that were representative of Mexican culture. In keeping to the shades of orange and yellow we hoped to represent the festive culture in addition to accenting the archival material from the Los Angeles Public Library. We also incorporated friendly illustrations during on the onboarding slides.

Take A Look Around - High Fidelity Prototype

Next Steps
Creating a product that was educational yet entertaining was definitely a challenge. But, It was very rewarding to work on a project that aimed to cause an entire paradigm shift and made a social impact.

We created a product based on the content that was available from the client but we recommended adding video content through the educational flows. Through our user research, we discovered this element in learning was very valuable. We also hope to develop and test more features that could still be implemented.

I continued to work with the client to nail down the logo. You can check out the final logo created here: