Judi
ASHBURN, VIRGINIA
History Shapers
Overview
My Role
History Shapers is a mobile app dedicated to helping people discover ways they can take action on injustices they care about. The goal is to empower people to shape history in real time + connect them to a local community who cares.
Led all UI / UX: UX Research, Ideation, Visual Design, Prototyping, and Usability Testing
Timeframe
Context
6 months and I have since teamed up with co-founders, developers, and designers to build the app.
Self-initiated
.gif)
Challenge
The solutions that currently exist for discovering ways to take action on injustices are inadequate, difficult, and scattered all over the place, making it very difficult to keep track of. Social media is a major access point but it is filled with misinformation and hate organizing goes uncensored.
Goal
My goal was to create a social network app for activism (since no such hub exists) that could wow users with its aesthetics and best-in-class usability, and remove the frustrations they currently experience while navigating the activism space.
Design process
How 2020 inspired me to think BIG
It was the year 2020, and, every single day, I CRINGED reading one horrifying news story after another. Like many Americans across the U.S., it kept me up at night and made me cry as I reflected on the state of this country and how bad things had gotten.
Refusing to throw my hands up in defeat or to tune out of it, I tuned in. I couldn’t sit idly by so I decided to use my mind, ears, and design skills and to get to work. Inspired by the idea that any problem, even the toughest of them, when understood clearly enough, can illuminate clues to a solution, I was ready to take on a BIG challenge.
The problem is so massive
The U.S. is filled with injustices from racial injustice to mass incarceration to mass shootings to women’s issues to economic inequality among so many more.
Delved deeper into the problem
While there have been so many incredible human rights leaders who have achieved so much and continue to do so, there just isn’t enough change happening.
So, what is the problem? There simply isn’t enough of society taking action. Why is that? I set out on a mission to understand why this was and I discovered the simple answer loud and clear: current solutions are inadequate.
Analyzed existing solutions
I discovered that current solutions are disorganized and scattered all over the place. They are both difficult and messy.
It was surprising to find out that NO comprehensive hub for activism existed and that there was NOT a single social network mobile app dedicated to taking action on social injustices.
While social media is a major access point for users, it is filled with misinformation and hate organizing goes uncensored.
Conducted user interviews
Needing to delve deeper, I interviewed 13 target users from across the country so that I could hear directly from their experience. No matter their age, gender, region, or status, they were all alike in that they cared about social justice and had some previous experience with activism with varying levels of engagement.
Synthesized interviews for insights
After listening attentively, I created affinity maps to extract the most important insights. I discovered that users:
- feel unsure about what to do or whether any of it makes an impact
- feel overwhelmed because navigating this space is difficult and they are doing it all alone
- use social media as an access point to activism but find it to be toxic and distracting
- feel they have very little time and feel very guilty about not doing more because they care a lot
To tap into their heads and hearts, I created empathy maps.
%20(1).png)
.png)
.png)
Turned insights into personas
Target users shared many frustrations and I wanted to make sure to give their voices a seat at the table. I found there were 3 types of users:
Joey
A novice with limited experience taking action on issues. Wants to make a difference but feels dissuaded from seeing things not changing for the better. He doesn't know what to do or how to start.
Michelle
An ally to a cause who is moderately to considerably engaged with activism. Injustices and climate change matter a lot to her but she feels overwhelmed from so much to keep track of.
Brittney
Someone who is directly affected by the injustice and who is moderately to considerably engaged with activism. She is exhausted from feeling unsafe and wants to see more people take action.
While these personas only existed in my software file, Joey, Michelle, and Brittney were entirely real-based. It's important to note that a person could be a mash-up of all 3 personas. For example, a person could be a novice when it comes to one issue while being an ally to another issue, and while also being directly affected by another issue.
.png)
Used personas to frame a design question
So, how could I help Joey, Michelle, and Brittney? I listened to them, and, using their own words, I designed a question from which any future solution would have to answer to.
7 essential needs for an MVP
Users shared A LOT about all their wants and needs so it was time to synthesize this information and do some thought organizing. To figure out what to include in a minimum viable product, I needed to reflect on users’ most essential needs.
Get a customized experience
They want to find what is important for THEM, especially in THEIR local area, and around the issues THEY care most about.
Navigate information easily
They want to effortlessly learn about issues and actions they can take and be able to find it all through the snap of a finger.
Find the time to do more
If they could easily find actions to take, avoid the rabbit hole of social media, and get reminders, they'd save time and do more.
Better understand issues
They want to be informed first and understand the underlying context of the issues before taking action.
Receive direct guidance
Figuring out what to do and how to do it requires way too much effort and time. Time they seldom have!
Know their impact
They want to know if they are making an impact. It's important to them to know if their efforts matter.
Connect to others
They want to connect to others who also care (from organizations to people), especially locally.
Articulated needs into user stories
Now that I had clarified what the most essential user needs were, I created a mental model detailing what users would want to accomplish while on the mobile app. By converting user needs into user stories, I could stay focused on the most critical user goals while designing the app.
Time for ideation!
Built a sitemap
Now that I had developed an inventory of user stories for the MVP, I organized this content in a findable and easily discoverable way for the user. I created a site map detailing how users could access the content on the app with the aim to reduce cognitive load for the user.
Sketched solutions
For quick prototyping and iteration, I needed to turn user stories and their flows into sketches. Every single sketch needed to do one thing: solve users’ pain points.
.gif)
Pain points to sketches
Pain points
Sketches
Put sketches to the test
Before converting my paper prototype into a digital one, it was imperative that I first test out my sketches with users. Were any aspect of these sketches not intuitive, maybe frustrating, unnecessary, or too time-consuming?
Even though my designs were only loosely defined sketches at this point, testing them could uncover usability problems early on and save time. I uncovered 8 usability problems and came up with 10 iterations I would need to incorporate in my future digital designs.
Turned sketches into wireframes
It was now time to incorporate the iterations into wireframes that could in turn serve as a blueprint of the visual representation of the user interface.
.png)
Connected wireframes into wireflows
I then took these low-fidelity designs and developed flows that connected screens into critical paths, which users would need to follow within the app to accomplish their tasks.
Kickstarted visual design with a moodboard
The next step was to turn my wireframes and wireflows into high-fidelity visuals, but first, I created a moodboard to inspire my creativity with the visual aesthetic I wanted to use.
Crafted a brand and visual guidelines
I chose the name History Shapers because I wanted to convey the concepts of change, legacy, and importance. I wanted to convey a multitude of citizens working towards a collective goal, impacting the future now. My logo design was inspired by the idea of superheroes playing an active role. It was designed to stand out with bold colors to inspire an energetic “yes, we can!”
To set a foundation for how users would think about the brand, I created a brand vision to inspire users with its hopeful perspective. What if we could help create the change we want to see? A land of justice for all. A planet that is protected, not destroyed. A multitude of citizens powering that change together using social media as a force for good.
To convey how the brand vision could be fulfilled, I crafted a mission statement. History shapers aims to enable people to stay informed and engaged and turn their compassion into action, thereby collectively contributing to a more just future for the U.S.
To ensure all design decisions would stay on brand, I created a set of brand attributes to build a trustworthy brand personality that users could turn to. History Shapers is empathetic, caring, and hopeful. It walks the talk, it’s honest, non-toxic, and effortless. It’s good-hearted, anti-hate, and people-driven. Like a superhero, it inspires each person who cares about injustices to be the hero they have been waiting for.
I chose the name History Shapers because I wanted to convey the concepts of change, legacy, and importance. I wanted to convey a multitude of citizens working towards a collective goal, impacting the future now.
My logo design was inspired by the idea of superheroes playing an active role. It was designed to stand out with bold colors to inspire an energetic “yes, we can!”
To set a foundation for how users would think about the brand, I created a brand vision to inspire users with its hopeful perspective.
What if we could help create the change we want to see? A land of justice for all. A planet that is protected, not destroyed. A multitude of citizens powering that change together using social media as a force for good.
To convey how the brand vision could be fulfilled, I crafted a mission statement. History shapers aims to enable people to stay informed and engaged and turn their compassion into action, thereby collectively contributing to a more just future for the U.S.
To ensure all design decisions would stay on brand, I created a set of brand attributes to build a trustworthy brand personality that users could turn to. History Shapers is empathetic, caring, and hopeful. It walks the talk, it’s honest, non-toxic, and effortless. It’s good-hearted, anti-hate, and people-driven. Like a superhero, it inspires each person who cares about injustices to be the hero they have been waiting for.
Upon doing extensive research, I selected the font Crique Grotesque Display as the perfect match for the brand. Not only is it very readable, it is also neo-humanist inspired (a humanist philosophy based on the idea that one should strive to make a positive difference in the world through kindness).
Color gives the brand personality as users experience it visually. I selected red, blue, and yellow as the primary colors so as to be bold and vocal as a brand, to remain intentionally consistent with the colors of the logo, and, because the colors signify power of the people, energy, truth, openness, and wisdom. These colors are further supported by a foundation of greys and white.
I decided that imagery needed to be iconic, full of bold color, and convey stories of injustice, voices of the unheard, and history in the making. I chose iconic illustrations as these illustrations can depict not just one story but a story of many. I also chose to include infographics to turn complex information into digestible, easy-to-understand information.
All call to action buttons are high in contrast to draw attention. Buttons during onboarding vary in color but within the app itself, they remain consistently blue for ease of use. Dropdowns are subtle and small so as to require very little space, generating a pop up when tapped. Tabs disclose information progressively to not overwhelm the user when there is a lot of information.
Upon doing extensive research, I selected the font Crique Grotesque Display as the perfect match for the brand. Not only is it very readable, it is also neo-humanist inspired (a humanist philosophy based on the idea that one should strive to make a positive difference in the world through kindness).
Color gives the brand personality as users experience it visually. I selected red, blue, and yellow as the primary colors so as to be bold and vocal as a brand, to remain intentionally consistent with the colors of the logo, and, because the colors signify power of the people, energy, truth, openness, and wisdom. These colors are further supported by a foundation of greys and white.
I decided that imagery needed to be iconic, full of bold color, and convey stories of injustice, voices of the unheard, and history in the making. I chose iconic illustrations as these illustrations can depict not just one story but a story of many. I also chose to include infographics to turn complex information into digestible, easy-to-understand information.
All call to action buttons are high in contrast to draw attention. Buttons during onboarding vary in color but within the app itself, they remain consistently blue for ease of use. Dropdowns are subtle and small so as to require very little space, generating a pop up when tapped. Tabs disclose information progressively to not overwhelm the user when there is a lot of information.
High-fidelity designs
Turned wireframes into high-fidelity designs
To make the user interface visually aesthetic for users, I focused on minimalism, the use of muted colors where possible to make it easier on the eyes, and created emphasis to draw the user’s attention to specific elements in the designs. I intentionally used familiar design patterns that are commonly seen in social media apps so that users would not need to learn from scratch when using this app.
Audited for accessibility
The worse thing would be to create an app that some people would not be able to use. I wanted to ensure that my content (especially important information) could be discernible to all so I ran an accessibility audit of my designs to check for visual accessibility and color contrast. I detected a few accessibility issues during the audit so adjusted some of the color choices until my designs passed the contrast ratio.
Designed for edge cases
To plan for the unexpected, I considered a variety of scenarios that users could possibly encounter. For instance, they may need to enter in long names or long titles while using the app so I created alternative designs to account for those scenarios.
Put the prototype to the test
Usability testing
The first round of testing the prototype brought to light 7 important usability problems for which I made 19 iterations in hopes of optimizing user experience.
Tested the iterations
Did the 19 iterations work? Yes! 90% of the redesign fixed the usability problems and improved user experience, making it a quick and easy app to navigate all the way through. Determined to obtain 100% success, I made a quick redesign and conducted rapid usability testing, which fixed the last problem!
Closing thoughts and takeaways
1. Users want to do more. One user during a user interview even broke down in tears expressing how strongly she wanted to be more engaged and to take more action on injustices.
2. Users care deeply about this cause. It is very important to them.
3. Current solutions are inadequate. The solutions that currently exist are difficult and leave users feeling overwhelmed. There are so many causes that users care about but it is currently very hard for them to keep track of it all.
4. Users are experts on their pain points. All you have to do is listen.
5. You can’t fix what you can’t see. That’s why it’s always best to put it to the test!
6. Last but not least, users couldn’t wait to use this app. They were eager. What that tells me is that this app is on the right track. When you never lose sight of the user, it’s simple, you get the results you hope for.
Logan
CHAPEL HILL, NC
Faud
MIAMI, FLORIDA
Natalie
EL PASO, TEXAS
Walt
MANASSAS, VIRGINIA
I'm a strong believer in supporting the work of artists and crediting others for their work. Some of the illustrations that I used in this project were not my own and I would like to credit the AMAZING illustrators whose artwork wowed me. Art is a form of activism and these illustrators are using their skills to promote awareness in the pursuit of a more kind and just world. These images are linked to their artwork, check it out!
%20(1)%20(1)%20(1)%20(1)%20(1).png)
.jpg)
.png)
.png)
More projects like this
