Eco-Sphere
In my role as both researcher and designer, I immersed myself in the mindset of non-profit supporters, empathizing deeply to create a meaningful connection between them and the design. Utilizing various ideation methods, I developed a responsive website design using Adobe XD, aimed at effectively meeting the needs and values of the supporters.
What was my goal?
A deep dive into researching the needs of non-profit supporters for a new donation flow and utilizing that research to ideate a responsive website design.
Understanding the Supporters
Qualitative Research
User Interviews and Surveys
I created Aggregated Empathy Maps by synthesizing the data, identifying common themes, and patterns within the research.
Quantitative Research
Competitive Audit
I validated the Empathy maps through a comprehensive competitive audit.
Defining the Target Audience
What do they Need ?
Persona Development
I crafted three distinct Personas tailored to the unique needs of each group.
Refined User Stories
After that, I used these Personas to craft User Stories, refining them down to just three to really dive into during product brainstorming.
User Journey Maps
Finally, I created a journey map for each user story to determine what that supporters experience might be like, what touch points they will have and what pain points they might come across. So that these can all be addressed in the first round of ideation.
Problem-Solving Brainstorms
I conducted diverse ideation sessions, using HMW exercises, Storyboarding, and Crazy 8’s to generate solutions for my unique user stories. Following ideation and paper wireframes, I conducted a card sorting exercise, resulting in the final site map design prior to digital wireframing. You can find more ideation, cord sorting results, and site map in the archives below.
How Might We (HMW)
Focusing on user-centric principles, I considered tailored solutions to address each personas’ unique needs.
Responsive Design
Designing with a mobile-first approach was essential as most users donate via mobile devices. The site needed to be responsive across desktop, tablet, and mobile platforms.
Design Iteration
Digital wireframes were initially developed in low-fidelity and then refined based on insights from usability studies to enhance accessibility, before being transformed into high-fidelity wireframes.
Home Page
Low-Fidelity Wireframe
Home Page
High-Fidelity Wireframe
Donation Page
Low-Fidelity Wireframe
Donation Page
High-Fidelity Wireframe
Confimation Page
Low-Fidelity Wireframe
Confirmation Page
High-Fidelity Wireframe
What's Next For Eco-Sphere
Since completing this project, Adobe XD is gradually being phased out by Adobe. Looking ahead, I’m excited about the prospect of rebuilding this project on Figma, leveraging Auto Layout to craft a responsive design.
Final Thoughts
Through this project, I gained invaluable insights into non-profit supporters, which I have applied to various other endeavors. Diving deep into research and exploring diverse ideation techniques has enabled me to refine these skills and has given me the ability to discern the most effective techniques for specific situations and apply them effectively.
Still want to see more? Check out research, ideation, and other deliverables from this project.
See Other UI/UX projects
Want to work together?
I'm currently available for freelance, contracts, and fulltime work.
Explore my services page to discover available packages, or contact me today for 15 min free consultation to begin discussing your project.
A multidisciplinary designer with two decades of product design experience, ready to assist you in creating meaningful connections with your customers.
Contact
Connect
© copyright Denese Vicky Manley 2024
Site Designed and Developed by Denese