UI/UX Design
Synergy
Introduction
in November 2020, I competed in the MTV x Adobe Creative Jam, a 70-hour hackathon where teams had to build a working mobile app prototype in Adobe XD. Over 340 teams entered from across the US, Canada, and Australia — and I’m proud to say that my teammate and I earned an Honorable Mention, placing in the top 20. Our app, Synergy, was designed to empower young people to organize, advocate, and take action around causes they care about.What’s the problem?
Provided by MTV: Music, pop culture, and historical events have served as landmarks to our life’s moments and childhood memories. Songs, movies and TV, and popular trends have strong connections to cultural milestones and sharing them helps us tell the stories related to interests and meaningful causes in our lives. Draw on that passion to empower individuals to do good and bring light to their favorite causes, from their mobile phone.The challenge is to design a mobile app that empowers an individual to encourage advocacy among their network by sharing. Tie the sharing to a cultural event or historic movement important to them and give them tools encouraging donations, volunteerism, and action.
Our Approach
Since we only had 70 hours from start to finish, we had to work fast. We wanted to make sure we could deliver a comprehensive app prototype while still considering our users’ needs. We allocated time for brainstorming, wireframing, creating prototypes, and refining. Our process broke down into four rough phases:- Empathize: Develop our core personas that represent our users’ needs and goals
- Ideate: Brainstorm ideas about the app’s functions, and design wireframes with the users’ needs in mind
- Prototype: Create high-fidelity wireframes on XD to make it a real experience
- Polish: Run through the app and make sure it is a complete experience
Empathize - Who Were We Designing For?
Persona Development
We understood the importance of empathizing with our target users, so we identified and developed two proto-personas (personas we created without any research due to the limited timeframe).
Pain Points
What we learned from these personas is that the app should be focused on being a social hub that easily lets users find groups and organize events. Current social media apps, such as Instagram, Twitter, or Facebook, are used already for managing and organizing rallies and events, but this setup can seem disjointed. Users might have to navigate through multiple platforms - maybe they discovered an event through Instagram but had to RSVP through a link on a profile’s bio.There is no method on these platforms fore discovering movements or events based on location and interest; you have to already be following the right groups and people.Platforms such as Discord and Facebook have overwhelming UX - Discord servers have many channels, roles, and long authentication practices, and Facebook is cluttered and notification-heavy.Ideate
Brainstorming
Based on our personas and the pain points we discussed, we began throwing out ideas. We wanted Synergy to be a one-stop shop for finding groups, organizing rallies, and fundraising.
To put it simply, we wanted to create a platform that made it easy to meet with other advocates in movements you care about, find or organize events important to you, and create groups so you can make a difference together.Observations and Research
We took a deep dive into platforms such as Instagram, Kickstarter, and GoFundMe. Instagram’s explore page shows users related posts based on who they’re following and their interests. This would be perfect for Synergy, as we could implement this feature to let users discover new groups and movements. Kickstarter and GoFundMe are crowdfunding sites; from these we drew inspiration on how to encourage donations, through features such as being able to comment or send messages with their donations. However, these platforms lack features that encourage follow-up engagement. Once someone donates, their contribution to the cause is over and they disappear.The key takeaways from observing these platforms were:- Communities need space to discuss, debate, and organize
- People need platforms for organizing that aren’t cluttered and messy
- Fundraising tools are effective, but are rarely connected to community action
User-Flow Diagram
We wanted the user's journey to be intuitive and action-focused—making it easy to go from inspiration to involvement. Starting from login, users land on a central hub where they can explore events, connect with cause-driven crews, or support fundraisers. Whether they’re joining a march, donating to a movement, or chatting with their crew, the flow is built to empower meaningful participation every step of the way.Low-Fidelity Wirefames
Our Solution
