melisa gutierrez
step frwd
This Adobe competition was inspired by MTV, a media outlet well known for their vibrant pop-culture themes and really neon color schemes. In the same way, our theme reflected on the pop-culture and vibrant colors.
Here is the exact prompt presented at the design briefing:
Your 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.
This mixed with MTV's designs for #BlackLivesMatter, Alone Together, and for the LGBTQ Community gives a lot of insight in what design themes we're expected to follow plus us thinking of an innovative way to encourage social advocacy.
Planning a Solution
Our initial ideas were:
-
Stickers to spread the word about a said movement
-
The app should be focused around hosting movements, details about peaceful protest locations, donations, etc.
-
Remove the idea of treating movements as "trends" by keeping the movement going forward with new sticker updates.
Our stickers were our innovation. I knew that you can send stickers from other apps to friends via text, and those are generally popular, but we thought of it as the stickers could be hyperlinks to the movement page.
It was moreso, really vibrant stickers that you could send to friends and when you clicked them you would go directly to the page on the app. This encourages everyone to move forward in an innovate and fun way.
Logistically, we needed to note that the movements had to be verified by the developers (so that users cannot spam and produce their own movements). Also, because of COVID-19, peaceful protests needed to have a COVID-19 Safety Announcement and warn users if that they were attending, to always be wearing a mask.
There were three pages.
-
Search - This searches the ongoing movements and lists their page to learn more information.
-
Feed - This is the home page for users to see the movements that they follow. Like the feed, etc.
-
Profile - This is just the user's profile.
The hardest page was the Search since it led to a lot of other resources on the app and because each movement had a lot of detail, we needed to add that to the Search tab.
The Search Tab
To make the process easier for us, we decided to settle with 5 movements. We knew the time constraint would be too much for us to do more, hence why we only did 5.
-
#BlackLivesMatter
-
Democracy 2020
-
Me Too
-
Alone Together
-
LGBTQ+
Each page would have a banner on the search tab to represent it, and they would be designed representing the vibrant themes. Also, since it would be on an iPhone or phone screen, the tab has to have a scroll option. Adobe XD is slightly finnicky with scrolling.
Since each page has similar information, here is what we had to account for in a content perspective:
-
Information that we would pull from the movement's site to be accurate
-
One sticker (due to the time constraint)
-
Donation to lead to an outside source (i.e. the original movement's donation page)
-
Location of peaceful protests (if applicable)
-
A support button (similar to following)
Information
It would have a brief paragraph from the direct movement site or from our own research. These would be accompanied with an image representing the movement and on the top, the 'Support' button, when clicked/unclicked would support the movement/unsupport it. Additionally on the top is the rest of the tabs to access the rest of the page. To access the rest, you have to drag left or drag right to go backwards.
One Sticker
This would be our 'Spread the Word' page. It gives information about the sticker which I made with little time, and have the option to copy. I would make some simple, minimalistic and graphical elements to speak to the sticker. Additionally, with only 70 hours total to work on the project including classes, designing the stickers were fairly time-consuming and difficult to work around.
Location of Movements
If there were physical movements, the app would list them on the page. Regardless, the page would have a COVID-19 warning speaking to the social distancing.
If there are physical movements, the users can add the physical movement location to their list by clicking the user list.
Donation
There is also a donation page that leads directly to the movement donation page to be secure. It gives a warning about going to a third-party link.
Home Page
This gives a brief insight on updates, and includes the scroll bar similar to the Share Page. It also leads to social media sources.
Profile
A brief profile page with Name, Username, Email, Password and a Profile Picture.
Final Thoughts
We were really cutting it close with this competition. However, we had a good time doing this. We realized we had no time to add accents to each page, so we had to make it minimalist with a white background and black text, but in terms of the time limit, it was good enough to have. If we had enough time, we would add more accents and make each page stand out with its own personality, but for the most part, this was a good project for 70 hours.
