Google Dev Student Club: Develop a platform for a mobile app that enables individuals to collaborate with others in their neighborhood to organize, direct, and participate in social justice marches, service projects, and support local businesses with the shared goal of making a difference.
Methods: Wireframes, Responsive design, Prototype
Role: Design Lead
Duration: 7 months (Jun 2021 - Jan 2022)
Tools: Figma, Adobe Photoshop, Jira
OVERVIEW
First Things First!
The goal of the Google Developer Student Clubs Solution Challenge is to use Google technology to accomplish one of the 17 Sustainable Development Goals of the United Nations. The 193 member states of the United Nations adopted 17 Sustainable Development Goals (SDGs) in 2015 with the intention of eradicating poverty, promoting prosperity, and safeguarding the environment. The goal of the competition is to encourage student developers to work together as a global community to learn about and create practical solutions to pressing problems while also facilitating hands-on learning.
CHALLENGE
Which SDG hits home the closest?
In university areas, there may be a sizable gap between the students and its long-term residents as a result of the steady stream of gentrifiers. Forced eviction, the encouragement of discriminatory behavior by individuals in positions of authority, and a focus on venues that exclude people of color and low-income residents are just a few of the unfavorable effects of gentrification that are common. Communities must support and rely on one another.
WHERE IT ALL BEGAN!
How did we land on our UN SDG?
Our club had an all hands on deck meeting with the goal of choosing something that would benefit the community that brought us all together in the first place.
How can we leverage our resources and technology to benefit the community?
Our Marketing lead Sarah researched and outlined the best way for our local neighborhood to gain better visibility and support. We decided on building a social media application as our vehicle for change.
“1. I think we should partner with non-profit organizations in the area, I happen to know a few, and host events with them so we can promote our app and their campaigns. 2. I think the app should be targeted/marketed towards people living in low-income areas to encourage them to not only learn about projects and programs in their area but also to motivate them to take part in developing their own communities.”
Field work and research
One of the first steps our club took was to scout possible pillars of the community we should consider partnering up with for our submission. On-field canvassing was really important in order to properly map out what issues locals, mom & pop shops, and local orgos need solving.
GETTING OUT AND ABOUT
Speaking to Double Js owner Mr. Jun we realized increasing rent has driven up prices.
Very few can resist a double Js classic #8, try it out while you’re there! :p
Max & Mina’s is a pillar for fresh meadows residents and its jewish population.
Chang Xin has been serving the asian diaspora community for years, but SJU students rather opt for chains.
What main features should we sketch out before we start iterating?
Before we coded 💻, we drew 🖍️️ ! we created a simple prototype with paper, before any progress could be made our design team needed to outline a basic frame to work with for the back-end devs to follow.
PAPER PROTOTYPING
This is where we started our early screen designs and started work with flutter!
At this stage our screens had a basic layout our developers could follow and we had mapped out some main features; however, they were lacking in character, uniformity, and overall key design principles.
ITERATING
These are our 2nd gen screens!
Compared to the previous iteration our team had dialed back on placing too many icons at the top of the screen and took a more conservative approach with the main colors, although at this point the navigation bar and icons were still too crude and misshapen.
Our 3rd and final iteration of screen mockups
At this point our team had better become acquainted with figma and scrapped our clunky icons for high quality vector based ones, we also took a more classic social media approach to the “home” or feed page with the ability to create posts and follow other people or businesses. Specific news, messaging, and map icons were added, but for the purpose of meeting deadlines we focused development on the crucial screens like the user profile, feed, news section, and messaging. Scrolling below you can examine the base code for a user profile with the use of dart and flutter.
User base code and demo 💻
Our devs were hard coding something that would retrieve your name and email from your google account.
we worked on using a custom method to change variables in user.dart and inserting it into the db.
After many iterations, here’s where we landed!
After initially fixing our UI flaws and being constrained by tight deadlines, we arrived at a lot more minimalist and easy-on-the-eyes homepage; Colors were chosen to mimic platforms such as Facebook, where there are only a few color options that remain consistent across the app. Following that, we chose a combination of Montserrat for the main UI and Inter for the body text. Overall, my team and I were able to successfully replicate other, much more successful, and proven-to-work UIs while incorporating some of the original layout.
FINAL DESIGN
If only there was more time on this project…
Being a part of GDSC and The Google Solution Challenge exposed me not only to the research and design process that goes into creating a mobile app but also to working in a team environment where my group had collaborated closely with the back-end developers to bring this product to fruition.
Unfortunately, due to uncontrollable and unexpected developments within the club, our project was unable to be fully coded and submitted for the 2021 solution challenge deadline; however, this experience sparked my interest in UX and led to me interacting with and learning about the wonderful people who make up my community.