UX/UI Design Portfolio

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.

EcoSphere Logo Design
EcoSphere Product Mockups

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.

Jack Empathy Map
Cheyenne Empathy Map
Rosa Empathy Map


Quantitative Research

Competitive Audit

I validated the Empathy maps through a comprehensive competitive audit.

Competitive-audit-EcoSphere-fullreport

Defining the Target Audience

What do they
Need
?

Persona Development

I crafted three distinct Personas tailored to the unique needs of each group.

Jack Persona
Cheyenne Persona
Rosa Persona


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 Stories

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.

User Journey Map Jack
User Journey Map Cheyenne
User Journey Map Rosa


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.

How Might We

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.

ecosphere_mockup

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 Screens Low Fidelity Wireframes

Home Page

High-Fidelity Wireframe

Home Screens High Fidelity Wireframes

Donation Page

Low-Fidelity Wireframe

Donate Screens Low Fidelity Wireframes

Donation Page

High-Fidelity Wireframe

Donate Screens High Fidelity Wireframes

Confimation Page

Low-Fidelity Wireframe

Confirm Screens Low Fidelity Wireframes

Confirmation Page

High-Fidelity Wireframe

Confirm Screens High Fidelity Wireframes

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.

EcoSphere Multi Screen Mockups

Still want to see more?  Check out research, ideation, and other deliverables from this project.

Eco-Sphere Archives

































See Other UI/UX projects

BeeKind Multi Screen Mockups

BeeKind

An international group project where I led the team as PM and Design Lead, demonstrating how teamwork and design iteration enhances usability, resulting in a remarkable 96.8% success rate.


CraftShip Multi Screen Mockups

CraftShip

Personal project where I had the dual role of UX Researcher and Designer to craft innovative solutions to address user pain points and align seamlessly with common overarching business objectives.

Want to work together?

I’m currently available for freelance work.

Explore my services page for more info and contact me today for 15 min free consultation to begin discussing your project.


Services


Contact


Personal Logo for Denese Vicky Manley

About Me

A multidisciplinary designer with two decades of product design experience, ready to assist you in creating meaningful connections with your customers.

Contact
Connect


Linkedin

© copyright Denese Vicky Manley 2025
Site Designed and Developed by Denese