ABOUT SAGE
SAGE is an innovative mobile application designed to inspire and empower individuals to make sustainable choices in their daily lives.
PROBLEM
Aspiring eco-enthusiasts find it difficult to access information on local events, sustainable products, and educational resources that supports their journey toward a more eco-frienldy lifestyle.
SOLUTION
We believe that by providing a comprehensive platform that streamlines a variety of eco-frienldy topics and activities can enhance and provide convenience to individuals striving to embrace sustainable living.
Design Process
EMPATHIZE & RESEARCH
In the empathize and research phase of the project, our team created a proto-persona named Sky, who is 30 years old, volunteers in community cleaning projects and is passionate about reducing waste and minimizing his carbon footprint. We then conducted 5 user interviews to understand behaviors and habits about living an eco-friendly lifestyle.
After our user interviews, we conducted an online survey to gather more data, receiving 38 responses that helped define our app's direction.
Through our qualitative and quantitative data we learned about current behaviors, habits, and road blocks people have to living a more sustainable lifestyle.
User Research
Proto-Persona
Survey Insights
Interview Notes
Affinity Diagram
Following the survey and user interviews, we synthesized the gathered responses into an affinity diagram. This strategic compilation facilitated the organization of our data, providing us a clearer insight into pain points and needs, thus facilitating a seamless transition into the definition and ideation phases with an enhanced strategic plan.
User Persona
Drawing on a deeper understanding of our target audience derived from a blend of qualitative and quantitative data, we developed our user persona. Stella embodies the combined qualities extracted from our research, with a primary goal centered on acquiring knowledge, promoting education, and actively participating in the community to promote sustainable living.
DEFINE & IDEATE
Problem Definition
Brainstorm
As we continued to the next phase of our project, the brainstorming stage became a pivotal point in our strategic development. During this phase, our goal was to generate innovative ideas and potential solutions. The outcome of our brainstorming session influenced the direction of our project, playing a role in refining our ideas through a more organized approach with the feature prioritization matrix.
Feature Prioritization Matrix
This matrix served as a structured framework for evaluating and ranking features based on predefined criteria. By employing this systematic approach, we aimed to align our development efforts with key priorities and strategic goals.
Value Proposition
​
After prioritizing features through our feature prioritization matrix, we turned our attention to the value proposition. The alignment between prioritized features and our value proposition highlights the distinctive advantages that set our app apart in the market landscape.
Competitor Analysis
In order to gain a comprehensive understanding of the market landscape, we conducted a thorough competitor analysis by researching 5 companies. This analysis explores the features, advantages, strengths, and weaknesses of significant players in our industry. Through a thorough examination of the competitive landscape, our goal is to illuminate both opportunities and challenges, providing valuable insights that guide our strategic decisions and shape our market positioning.
User Task Flow​
As we shifted our focus to the user experience, we mapped the user task flow to understand how eco-friendly enthusiasts would engage with specific features. Aligning the task flow with app features enhanced design and functionality, shedding light on feature integration for improved user satisfaction.
Journey Map
​
Our journey map features Stella, a mom seeking to collaborate with other parents, who is also searching for kid-friendly activities for her family, and wanting to build community by participating in local eco-friendly events. This visual representation outlines Stella's interactions and emotions, providing a comprehensive view of her entire engagement with our app. It actively shapes our design decisions to cater to her search for sustainable and kid-friendly activities.
Wireframe Sketches​
​
As we gained a better understanding and defined our path, we transitioned into sketching. The initial sketches served as a foundation, capturing our ideas and visualizing the user interface. This section showcases the evolution of SAGE connecting the ideation phase to the steps taken in shaping a user-friendly and visually appealing app.
PROTYPE & TEST
Digital Wireframes​
​
Following the ideation captured in our sketches, we progressed to the next stage of development: wireframing and prototyping. Through this collaborative stage we iterated on the original sketches to create wireframes that represent a more detailed and structured visualization of the app's layout and functionality giving our users a more user-centric experience . In this section, we delve into the transition from sketches to wireframes, showcasing how these refined blueprints serve as a pivotal step in translating our ideas into a tangible, user-centric design for the SAGE app.
​
Usability Testing​
​
In the testing phase we conducted usability tests with five participants. During the usability tests, participants were given specific tasks to perform within the app, allowing us to observe their interactions and assess the ease of navigation. Participants navigated through the following features:
1. Log in;
2. Activities;
3. Rewards;
4. Events,
5. Progress,
6. Leaderboard,
7. Sage Board
8. Log out. Through this process, we learned that the initial designs were easy to navigate and revealed minor changes. Through the feedback and observations we discovered that we needed to iterate on the clickable area to ensure that the user has a smoother navigation as well as rethink the order of how our users would share with others on the SAGE board while completing an activity.
​
ITERATE
Iterations
Through observations made during the testing phase, our team incorporated several minor updates to elevate the design of the welcome screen. This involved introducing an extra set of leaves to achieve symmetry and lightening the background for enhanced contrast. Additionally, we refined the color of the buttons to ensure they are more aesthetically pleasing and cohesive with the overall design.
High Fidelity Prototype
Next Steps & Takeaways​
​
Looking ahead, we aim to enhance some features, providing users access to the Eco Map, Eco Shop, and additional educational tools. The Eco Map and Eco Shop will also showcase local and sustainable businesses, contributing to the app's eco-friendly approach.
As the project came to a close, I contemplated the milestones achieved and the lessons learned along the way and I can confidently say that this journey has been immensely rewarding. Collaborating with a team of fellow UX Designers has been a delightful experience. The exchange of ideas and joint efforts to create an app that offers solutions and fosters community engagement have been truly gratifying. The SAGE app not only showcases our commitment to sustainability and user-friendliness but also serves as a testament to our dedication and collaborative spirit in crafting impactful solutions for our community.
​
​
​