DESIGNATHON
Hosted by ACM @ CSUF, FullyBeyond is CSUF's first 24-hour beginner-friendly designathon. Participants will explore UX/UI design, network with like-minded peers, and create a portfolio project. Designers will craft an app or website interface based on a given prompt and present it to industry professionals. Held virtually, FullyBeyond connects student designers nationwide for a unique learning and collaboration experience.
PROMPT
Develop a digital platform or app using Figma aimed at promoting environment sustainability by empowering individuals and communities to monitor, reduce, and manage their ecological footprint.
RESEARCH
Our initial takeaway from this prompt was identifying the current environment issues that we face, and we found that there are a number of problems that we can take a closer dive into, such as climate change, pollution, deforestation, ocean acidification, etc. But we recognition these issues are bigger facing problems than an app itself cannot fully resolve. So instead, we decided to take a step back to look at the bigger picture and produce a solution that both informs and brings awareness to the audience while encouraging small opportunities for people to engage in acts of sustainability.
Our solution was to develop a News app/website dedicated for the accumulation of information towards environmental issues. Current news apps push aside the bigger issues and create emphasis on political or negatively perceived topics to garner attention that could be better fit towards more important issues. Creating an entirely new platform to specific address news on the environment and nature can allow the audience to find information more quickly.
CONCEPT
Our app's first goal was to establish a familiar, clean, and impactful news interface. We've designed the landing page to resemble well-known news sites like CNN or Fox News, however, we eliminate the clutter by focusing only on key environmental topics to prevent an overwhelming experience.
CNN is a popular news platform, but it leans Democratic. Politics dominates the homepage, especially post-election. While the navbar offers various topics, there's no immediate focus on the environment. The cluttered layout can overwhelm readers seeking environmental news.
Fox News, a well-known platform, leans Republican and prioritizes politics over environmental issues. Both CNN and Fox use dominant red and blue themes, reinforcing a political focus rather than emphasizing nature with green tones.
A news platform's role is to deliver accurate information as quickly as possible. However, most people prefer receiving news in a more digestible and accessible format. We analyzed well-known brands and their key features to integrate into our design.
Referencing the Apple site, it gives an incentive to readers to continue scrolling by having the upcoming component slightly show.
Referencing Netflix, we're using the layout to follow a more eye catching news platform layout.
The layout of the news platform is designed to resemble Netflix or Twitch, creating a familiar and less overwhelming experience. Targeting a younger audience, the platform prioritizes their preferences to enhance engagement. With the younger generation holding the potential to drive environmental change, the design emphasizes visual storytelling and emotional appeal to effectively communicate key issues.
The design incorporates the color green to symbolize nature, sustainability, and environmental awareness. Green is often associated with growth, renewal, and harmony, making it an ideal choice for a platform focused on environmental issues. Additionally, it provides a calming and approachable aesthetic.
These were a few designs we found on Pinterest to give us inspiration for our final product.
The second goal was to introduce features that elevate the design and accessibility of information. The "Highlights" section offers short videos for quick, digestible updates, perfect for users with limited time or shorter attention spans. The "Moments" allow companies and environmental advocates to share real-time updates. Other elements include real-time weather and air quality tracking, giving users localized environmental information at their fingertips.
Instagram has a great template for stories that we wanted to also incorporate because it allows companies and creators to share what theyre doing real time.
Youtube has a great template for reels/shorts and we wanted to incorporate the ability to share news and information in smaller forms of content for the audience to quickly be able to view.
CONCLUSION
Our final design merges the best features of social media and news platforms into a versatile resource for users. The main focus was highlighting the environmental impact of businesses and how raising awareness can drive change. Moving forward, we aim to expand Spruce News with features that enhance transparency, accountability, and engagement—such as corporate sustainability tracking and personalized eco-news subscriptions—making it an essential tool for those passionate about our planet.
The final design of SpruceNews. These designs show the main page of the website as well as diving into a specific topic page listed in the navbar.
This is the final design for the "Highlights" feature that was based on the Youtube shorts design.
The is the final design for the "Moments" feature that was based on Instagram stories in desktop mode.