Web-app version
What is GetGreen?
GetGreen is a platform that enables individuals and organizations—like cities, universities, and companies—to achieve their sustainability goals through actionable habits. Although GetGreen already had a mobile app, their new client, Falls Church School, needed a web-based version to incorporate the app into their sustainability class curriculum, in line with the school’s no-phone policy.
Team
Me (UI/UX Designer)
Product Owner
Developers and CTO
My Role
UI Design, Wireframing, Prototyping, Usability Testing
Time
3 months
* Images of the mobile app
Problem 🧐
Mobile usage was restrictive during class, limiting students' ability to engage with the sustainability app in class. A web-based companion app was needed to allow students to use the app's functionality alongside their curriculum in class while keeping the mobile app as the primary platform outside class.
"How might we create a seamless web companion for GetGreen that enhances accessibility while balancing design consistency, feature prioritization, and technical constraints?"
Solution & Outcomes 🥁
Successfully designed and prototyped the web-app v1.0, ensuring feature prioritization aligned with user and business needs, and technical and time constraints.
The process I followed ...
Requirement Definition 🔬
The product owner defined the requirements using the MOSCOW (Must, Should, Could, Won't) method. Once the requirements were established, we collaborated to determine the MVP scope, considering time constraints and technical feasibility. We prioritized the Must-have features for the initial release.
Must-Have Requirements
01. User Sign In / Sign Up (Email and Google)
Allow students to login using school credentials and access their content effectively across platforms.
03. Access Saved actions
Refer to saved actions during class
05. See All actions
Ability to view actions in a list format for all categories (Saved, Goal actions, Category specific actions, etc.)
07. Active Projects
To allow students to view the project they are contributing to, view leaderboard, and see progress.
02. Action of the day
It was necessary to show the 'Action of the day' because daily actions would be in-class activities.
04. Categories
Explore different categories, category specific actions, learn about them, and how they contribute to making impact.
06. Save & Complete actions
Allow users to save actions and mark them as complete while doing them in class.
08. Profile (view only)
Allow users to view their profile settings, badges earned, saved actions, and categories they are contributing to.
Design through Iterations ✏️
I started the design iteration process by collaborating with product owner and developers to gather feedback and understand technical feasibility of the design solutions.
I progressed from low-fidelity wireframes to high-fidelity prototype by incorporating feedback in each iteration.
Iterations of Login and Sign-up
Feedback:
✘ Sign up process implementation not possible due to technical constraints and time limitation.
Design Decisions:
→ Removed Sign Up flow
→ Added a note guiding users to create an account on the mobile app, along with a link to ensure they knew the next steps
Iterations of Home
The home page serves as a landing page, displaying daily actions, saved actions, active goals, and recommended actions
Feedback:
✔ Left-side navigation made the design accessible - easy access to different pages and Logout.
✔ Clean design layout.
✘ Pop-up didn’t translate well to the web app in terms of visual appeal and had technical constraints that impacted feasibility.
Design Decisions:
→ Dashboard layout for easy navigation and improved readability.
→ Pop-up action details card design to match the mobile app implementation.
→ Replaced the pop-up with a third-column layout, allowing users to access and view other components without disruption, improving usability and maintaining context within the web app.
Iterations of Explore
The Explore page showcases action categories, recommended actions, partner-specific actions, and category-based actions' lists.
Feedback:
✔ The mobile-web consistency enhanced usability and reduced cognitive load.
✘ Showcase Partner featured actions.
Design Decisions:
→ Use of similar design visuals and assets as on mobile app to ensure consistency, reduce learning curve, and create smooth transitions between different platform.
→ Maintained consistent action-card structure across page.
→ The third-column layout displayed supplementary information, such as category-specific action lists or expanded action card details.
Iterations of Projects
Users can join and contribute to partner-specific or general projects, which function as teams working toward shared goals. They can view in-project and cross-project leaderboards, as well as track their individual contributions.
Feedback:
✔ The project card design offered a clear and concise visual overview of key details..
✔ The leaderboard on the project screen offers an intuitive visual comparison without requiring users to open project details.
✘ The full list of projects and the ability to switch between projects couldn’t be implemented on the web app version due to time limitations.
✘ Users should be able to view project details.
Design Decisions:
→ Designed the project card to focus on providing an overview by maintaining visual hierarchy and highlighting the most important metrics.
→ Displayed the leaderboard on the project page to provide an overview and reduce the need for extra clicks to access it.
→ Incorporated a project details section in the third-column layout, aligning it with the details section from the mobile app.
Final Design 🥁
Lastly, Reflections and Learnings ✍🏼
01
I learned how to adjust design patterns from mobile to web, considering platform-specific needs like screen size and interaction methods, while maintaining consistency.
03
Iterating on the third-column layout and project card designs highlighted the importance of flexibility and how refining designs based on feedback can significantly improve the user experience.
02
The use of the MOSCOW method taught me how to prioritize key features effectively and focus on delivering the most essential functionalities within tight time constraints.
04
Working closely with cross-functional teams reinforced the value of communication in navigating technical limitations and ensuring that the design aligns with both user needs and project goals.