At a Glance
LeafLife is a community-centric website and mobile application dedicated to promoting environmental sustainability.
Our platform is committed to preserving the environment through the implementation of eco-friendly practices.
Click to visit the LeafLife app case study
As a student at UXland, After delivering the LeafLife app, we were assigned to design an informative website to familiarize users with this platform with these details:
Duration
Team
Role
Tools
1 month- part time
Figma, Zoom, Photoshop
UX/UI Designer
Group of 4
Stakeholder Needs
We started by defining a hypothetical stakeholder and determined its requirements and limitations in the first stage.
As "LeafLife" is still beginning its journey, it needed a website that could introduce its application features to green living individuals.
Because this is the first website created for "LeafLife", developing a motivational user-friendly website will allow it to grow over time.
Goal
Develop a hub where concerned users can familiarize themselves with an app that can unite with eco-enthusiasts to incorporate green practices into daily cultural habits.
Boosting user engagement by raising environmental understanding.
Task
Design an informative website to motivate users to download the LeafLife eco-friendly application.
Click to visit the LeafLife app case study
We took help from the design thinking method. It wasn't a linear path, we went back and forth between stages as the project progressed.
1
5
4
3
2
____________
____________
____________
____________
Competitive Analyses
Interview
Survey
Persona
Sitemap
Challenge & Solution
Sketching
Wireframing
Mood Board
UI kit
High fidelity prototype
Clickable Prototype
Usability Testing
A-B Testing
To understand the users' pain points and develop effective solutions, we employed a comprehensive research approach that consisted of the following methods:
Competitive Analysis
Re-analysis of App interviews
Online Survey
Competitive Analyses
What capabilities do our competitors have?
During our analysis, we noticed features and workflows that fit the needs of our stakeholders. By doing this, we were able to design a more effective information architecture and discover what questions we needed to ask in the survey to more accurately capture our user needs.
Top Takeaways
How to present business values and their sustainable impact.
Identified categories of the navigation bar.
Easy access to download the application at first glance.
Introduce visually the key features of the application and explain how to use it easily.
The importance of users' awareness of sustainable living.
Lack of awareness about environmental activities and their impact.
Feeling a sense of futility and discontinuity in past experiences.
Unfamiliarity with the structure of platforms designed to support sustainable living.
Interview & Affinity Diagram
Learning about users' perspective
Since we designed our interview questions based on user interaction with a sustainable platform, after re-analyzing the collected data, we reached; the following remarkable three top takeaways,
Top Takeaways
Using these three takeaways helped us better identify users' pain points and focus on resolving them through the website to improve their next step experience within the application.
Click to visit the LeafLife app case study
Survey
Understanding users' preferences
In the next step, we asked our target users the questionable points that we got from the second research with a small survey of 3 questions.
The results cleared 3 points that helped us how better introduce the LeafLife application.
Surprisingly, more than 80% of the participants were almost unfamiliar with ways to apply a sustainable concept in their daily lives.
These were respectively the most important reasons for increasing the user's motivation to continue an eco-friendly lifestyle.
Of the application's informative features, these three were the most helpful, so we highlighted them in different sections of the website.
Takeaway
So it became clear that we should present smoothly how this platform's concepts increase user awareness by focusing on displaying the eco-impacts and helping to make and stick to a sustainable lifestyle.
Persona
Who is the user of LeafLife website?
At this stage, summarizing the results of the research in a persona that was representative of our target users, helped us to get closer to our user's needs during the design process.
We often referred to our persona to ensure a user-centered focus throughout the project.
Sitemap
How did we design the information architecture?
Based on our research findings, card sorting results, and multiple usability tests and iterations with target users, we developed the site map.
Challenges & Solutions
What design decisions did we make?
After analyzing all of our research, we began to understand our project’s challenges and tried to find a solution to our design.
Sketches
How did we start our ideation?
We began by conducting brainstorming sessions with the team, using both paper and digital sketching tools to quickly capture and iterate on ideas.
UI Design Direction
Mood board
What can help us to be consistent?
Considering that LeafLife is a united platform, we used the same Mood board we made for the application design.
UI Kit
To design high-fidelity interfaces, we upgraded the LeafLife UI Kit, which includes colors, fonts, and element dimensions. These components were refined to ensure consistency across all screens, align with the website's requirements, and meet user needs.
High Fidelity Prototype
Now it's time to take a quick look at our final high-fidelity designs, which are complete with colors and images!
We created Low-fidelity wireframes on Figma to map out page layouts and design vision.
The wireframes went through a couple of rounds of iteration before the final content was developed.
Usability & Iteration
What did our stockholders & users think?
To reach the final version, in addition to numerous iterations within the team and stakeholders, we tested our expert and target users in three phases. Based on their feedback, we made changes to the designed pages, which are summarized below.
Phase 1: Heuristic evaluation (Mid-fidelity)
Phase 2: A/B Testing & Cognitive walkthrough
Phase 3: Assign Tasks
Phase 1
We conducted a heuristic evaluation of our mid-fidelity prototype to identify usability issues early in the design process. Evaluators used established principles to help us identify problems and areas for improvement. This feedback enabled us to refine the design before moving to the high-fidelity stage.
"Home Page"
"Green Action" Page
"What is Leaflife" Page
Phase 2
In this series of tests, we reached the following results by examining user behavior with the initial version of the high-fidelity design.
"Hero Area"
We went through multiple iterations to discover a hero image that instantly communicates our community-oriented platform’s core message: LeafLife helps concerned people turn green actions into lasting habits.
"Home Page"
A/B Testing
After multiple ideations, a 13-participant A/B test was conducted to evaluate user satisfaction and functionality between two Community introduction section designs. We then incorporated the feedback and recommendations into our final prototype.
Phase 3
We tested our prototype with a total of 12 participants:
9 enthusiastic about eco-activities,
3 either unaware or uninterested in sustainability.
We assigned them 2 tasks to complete.
First Task Result
(Explore the Website)
Second Task Result
(Download process)
Final Prototype
In this section, you can check out the complete final prototype .
What did I learn?
Being part of the team taught me the value of constant communication, especially in the early stages of a project.
Listening to users' feedback from the beginning can save significant time and effort.
I also gained insights into research techniques and methods for effectively presenting a product on a website.
What can we do next?
Develop a mobile-responsive version of the website for better accessibility on phones.
Focus on better introducing the Leafboard feature to users on the homepage.
Plan to enhance the website's accessibility to make it more user-friendly.
