Case Study: Bitica
Project duration:
8 weeks
Tools used:
Figma
Paper & Pencil
ChatGPT
My role:
End-to-end UX designer
Device:
IOS
Bitica is an app designed to involve young politically active adults in local politics.
Have you ever gone to the polls and saw names or bills you’ve never hear of? No more. Did you ever turn on the news to hear your local government passed a bill without getting to share your voice on the matter? Never again.
Have you ever wanted to have a finger on the pulse of what your community's values and interests are? It has never been easier.
Bitica is an all-in-one platform for revisioning a town meeting in a digital space. While federal elections happen on a timeline that is continuous with the country, every local voting district holds elections and meetings at a different place. Bitica helps navigate this complex institution of society and puts you on pace.
Click to skip to the prototype
Methodology
Design Thinking Process
In order to develop Bitica, I utilized the Design thinking Process to come up with my solution. The Design Thinking Process is a non linear, iterative process that is centered around the target audience at every step of the way. The Design thinking process is made of five steps: empathize, define, ideate, prototype, and test. Each step is used, revisited, and regularly refined throughout the course of a project.
Problem Statement
Young Americans do not trust today’s institutional and governing bodies. Many feel that the lack of information dissemination starts all the way from the polls to legislative activity.
Problem Space
In a 2022 study, only two-in-ten Americans say they trust the government in Washington to do what is right “just about always” (2%) or “most of the time” (19%).
the 2020 presidential election has increased the number of young adults voting to an extent never seen before. Voter turnout projections estimated about a 10 percent increase from 2016 to 2020 for young Americans.
52% of young people in the U.S. believe that the country's democracy is either "in trouble" or "a failed democracy."
Assumptions
Young Americans feel like the policies passed by their governing bodies don’t properly reflect their values as a while.
Young Americans don’t have the time to learn about the candidates and policies affecting their area.
Young Americans do not rely on mainstream TV for their news and political updates.
Young Americans still want to find concise ways that don’t disrupt their lives to be politically involved in their community.
Young Americans do not know the roles of local Government such as a city commissioner and property appraiser.
Hypothesis
Gen Z doesn’t know where to go to get information about local current and future elected officials I will know I’m right after I collect data from the interviews.
Initial How Might We
How might we inform young American adults about their current and future elected officials so that they feel more confident in their government?
Interviews
Isaias Fernandez | 24 | Behavior Technician
Pain point doesn’t want to waste time going to town meeting.
Motivation - likes to see comments where there is good communication between republicans and democrats
Behavior - subscribes to local politicians
Carla Mavares | 25 | Government Relations Specialist
Pain point - has a hard time getting updated on politician newsletters
Motivation - seeing the policies they care about get passed
Behavior - subscribes to local politicians
Noah Hertz | 27 | Small Town Journalist
Pain point -has a hard time finding information on local politicians
Motivation - looks for local newspapers to get local election voter guide
Behavior - uses advanced social media features to find out more information about candidates
Definitions:
Pain points: Where experience can be improved
Motivations: The thing that pushes user to pursue goal.
Behaviors: The actions and steps taken toward goal.
Define
What is in this section:
Affinity Map
Ultimate Theme & Insight
How Might We
Persona
User Story & Epic
Affinity Map
What is in this section:
Affinity mapping is writing a bunch of thoughts or ideas down and then grouping them based on their similarities (affinities). These groupings can help you extract insights and themes to help you build effectively toward next steps.
The goal is to develop a How Might We statement that will direct the rest of the project. The Affinity Map for this project is structured by first grouping the thoughts and ideas by interview subject, and then dividing them into sub groups of pain points, motivations, and behaviors.
Flo
Link to full Affinity Map
Chosen Theme + Insight
Three main themes arose from the affinity maps: Transparency, Issues with Local Government, and use of Social Media.
All interviewees relied on social media and Internet forums over news outlets to get information on candidates. Subjects had low levels of trust towards mainstream news outlets. On the other side of the spectrum, subjects appreciated the comment and forum features of social media. For them it gave them a sense of democracy and the ability to learn of possible counterarguments.
Interviewees wanted more readily information about their government such as how their tax payer dollars were being spent, when political officials “made errors” on the job, who sponsored a candidate’s campaign, and what stocks a politician was investing in.
Across all three interviews, each subject had their own grievances regarding collecting information to make informed decisions when voting in government elections. They had stated that it was hard to find and keep up with bills that actually affected them, as well as finding the political opinions about lesser known candidates.
Revised How Might We
How might we help young voters efficiently gain more information about what is happening in their local government in order for them to gain more confidence in the American political system?
Persona
A UX persona is a fictional character which represents your target users. Personas are an extremely valuable UX tool, allowing you to better understand your target audience and make design decisions accordingly.
After gathering data from interviews and secondary research, I am able to curate a persona to represent who the intended audience for the product is. A persona puts a face to the data and statistics that
User Stories + Insights
SOCIAL MEDIA AS PUBLIC FORUM
As a politically active young adult I want to constructively debate about legislation being promoted by current and future elected officials with other locals.
As a politically active young adult I want to be informed of agendas covered in city government meetings in a concise manner so I can be informed of what is happening politically in my community.
Click here to see all User Stories
Task Flow
Data becomes a goal for the user to complete
Now that I have data, interviews, user story, epic, I can develop a task flow.
Wireframing
This is where ideas move from pencil to pixel. My next step was to create a first iteration wireframe of my sketches. This iteration of the prototype will not be in color, in order to best test the functionality of the design. This greyscale wireframe will allow users to simply engage with elements needed to start and finish the task.
Click here to try out the first Greyscale Wireframe
Prototype
Prototype
Test
Usability Testing
This is where I send my prototype off to be put to the test. In two rounds, a group of 5 users will test the base functions of the app and whether they can navigate through their given task on their own. The only information I was allowed to give was minimal info about who the app is design for preceding the usability test. I was not allowed to help, prompt or reassure.
Round 1
Overall, Users will successful in most completing most tasks. However, the screens that had the most issues were the curated article hub, and the individual article screen.
Prioritization Map 1
Revisions
Get rid of static Done reading button on individual article screen.
Change Article Title Hierarchy,
Clean up topic button grid.
Change Nav bar + Add Table of Contents.
Add UX writing explaining the AI function and articles.
Round 2
Prioritization Map 2
Revisions
1.Make AI Herald UX Writing more understandable and concise.
2. Add “Write a comment” in comment section of Article screen
3. Upgrade bookmark icon.
4. Make the Article Table of Contents Smaller.
5. Make AI generated content tabs look more like news articles to users.
Refine
What is in this section:
Brand Development
Wordmark Development
App Icon
Accessibility
Brand Development
Now it’s time for the fun part, the research and development phase has concluded, and now it's now time to explore aesthetics.
Believe it or not, the blue green teal brand color and the name Bitica were not a part of the picture until I entered this phase of the design process. Many UI elements of the app were incepted from the research involved in the User Interface phase of the design process.
Many may think that brand development starts with exploring colors, but it was quite the opposite. Brand development includes several steps: a list of adjectives that would describe the feel or “vibe” of my app, curate a mood board of colors and textures that embody those adjectives, extract color from the mood board and group them into neighborhoods, and color contrast the colors of the app for accessibility considerations. This is the appropriate process for picking color and how I came up with the brand colors of this case study.
Name Generation
When it came to coming up with brand names, I utilized ChatGPT,
an online app name generator, and my imagination
to come up with these names:
After some deliberation, my top choices were:
The Data Club, Conocer, The Town Herald, and Bitica.
I ended up choosing Bitica because
the “Bit” reminded me of technology, whereas A.I
is a focal point of the product, and the “ica” ending reminds me of Wikipedia
which boosts brand credibility.
Adjectives
Here are the adjectives I came up with to describe the feel of using the app:
MoodBoard
After putting together the appropriate brand names for Bitica, it was time for the mood board process. The ideation behind the photos of palm trees, geometric architecture, and somber figures may seem unrelated; However, when juxtaposed together it paints a picture of serious young adults envisioning a brighter future of improved infrastructure and increased efforts towards climate change.
From there I extracted greens, blues, some earth tones, and neutrals so that I can make my neighborhoods.
After making my mood board, I extracted colors using the eyedropper tool in Figma and organized them into groups.
Lastly, after careful calibration, these are the official colors for the app.
Extracting color
For the icon development, I wanted the graphic to remind users of the overall idea of AI formatted political news. Thus, the design to the left is what I came up with. The lines across the B represent
computer chip wires, and the swirls around the letters are reminiscent of Chat GPTs iconic geometric flower.
App Icon
Wordmark
To develop my word mark, I played with adding a star and computer wires to the logo.
Atomic Design Theory
To create a UI library, I used atomic design theory to group my elements. Atomic design is the grouping of atoms, molecules, organisms, templates, and pages and exploring the ways in which they work together to create effective interface design systems.
Click here to see the full UI Library
Tarot Cards of Tech: Best Friends
If two best friends used Bitica, it would enhance their relationship. The best friends would bond over talking about the policies they’ve been updated on through the app.
Future Thinking: Marketing and Code Development
Next Steps for the Bitica App include developing and launching a responsive marketing site across desktop and mobile. For future iterations of the prototype, new task flows would need to be built to send important articles as text messages to non members, navigating a personal saved articles tab, and interacting on a user comment first forum feed to compliment the curated article feed. After the other task flows come into fruition, the prototype can be handed off to developers so that they can code all functionalities.
