My Role

User Research, information architecture, interaction design, and UI Design.

Project Goals

My goal is to provide the stakeholders with an MVP website design that will drive the next rollout of Constellation.earth website. My research, design and test results will provide information to drive conversations about non-profit market place, user needs, content strategy and social engagement.

Background

The Constellation Foundation is a startup non-profit organization founded by four astronauts in 2017. They want to share their unique perspective is known as the “overview effect.” The POV that we’re all living on one planet without borders and differences. The foundation aims to create a better future through science innovation and education. The website is one of many out reach programs.

A secondary project goal is to test a social engagement program for visitors to share website content. My stakeholder wanted me to reference GlobalCitizen.org.

Go to their current place holder website here. Or watch the video on the right.

Research

User Interviews
Survey
Persona
Empathy Map
Storyboard

Define

Sitemap
User flow
Task flow

Design

Responsive wireframes
Prototypes
Key website screens
UI Kit

Testing and iteration

A/B test
Usability testing
Affinity map

Interview research findings

People want to help but are caught up in life and balancing priorities.
Giving money is easy to do and the first choice of action, but donors are cautious about trusting a new organization.
Donation is similar to any e-commerce transactions, the delivery of goods and services are just slightly different. People want to know mission and results of an organization.

Survey findings

I used a survey as an experiment to see if my interview findings were different. The results validated my interview findings!

Ways of donating

71% gave financial donations
42% gave by volunteering
29% gave by letting friends know about the cause or organization

How donors find out about causes

57% find out through friends and family (word of mouth, email, text or social media).
43% had causes they kept in mind or had donated to before.

Donation causes

29% donated to special relief efforts, events or fundraisers.

Donation methods

57% used their computers
14% used an app
14% mailed in a check

How users respond to non-profit

Persona

From my interviews and storyboard I created a persona to represent who might interact with Constellation.earth. The persona is a caring but busy professional who wants to help but he is careful about how he spends his money.
‍

Defining

I made another storyboard to look at the user journey. In this scenario Chris visits Constellation and shares an article from the website to social media and earns reward points.

Defining the key user flow

Although my wire flow is mobile, my interview findings showed that most users preferred donating on desktop websites.

Design

Crazy 8 and How Might We brainstorm exercises in addition to generating sitemap, competitive site UI and wireframes before building a high fidelity design for the prototype. I also built a black and white wireframe prototype with Marvel to work out the flow and conducted a quick user test. My test foreshadowed a common user reaction...

I built a black and white wireframe prototype on Marvel to work out the flow and conducted a quick user test. My test foreshadowed a common user reaction.

I analyzed the current placeholder website and created a very basic landing page. I applied this process to carry some consistency for the redesign.

Building the prototype

These are some of the elements I used to build the prototype.

Testing the prototype

The InVision prototype is here. Video of the prototype below.
‍

Testing and iteration

I asked my interviewees to perform the following tasks:
1. Give me their landing page impressions and find more information about the organization.
2. Go to an article page and share the content on Facebook.
3. Donate to the organization.

Usability test findings

Overall impression of the pages was familiar and consistent with the Constellation Foundation message.
Users about what the foundation is about and do. Why should they donate? What are the rewards if they enrolled in the social sharing program?

Landing page findings

Success

The prototype conveys the appropriate feel and tone of Constellation.earth

Frictions

Users wondered about the mission of the foundation and needed more information

Patterns

Users relies on the navigation bar to find information about the organization
‍
Users were attracted to video content

Article page findings

Success

The page looks legit.

Frictions

The call to actions look like ads

Users felt the content was long that requires time to read and digest.

Patterns

Users were uncertain if they would share the page content immediately.

Next steps

“Is this site about space missions? I'm not sure what this is?”

What I learned

Using a Design Thinking methodology to approach design and starting a conversation with stakeholders
Word of mouth or social media is an additional way to contribute to a worthy cause
The top navigation bar is really important for website visitors
I got the opportunity to combine different research techniques for gathering insights