Future Ada

Brent Schneider
Jun 14, 2018 · 5 min read

This project outline focuses on non-profit startup, Futureada.org, and the UX methods I used to develop, brand, and apply user research to create an informed site architecture.

Table of contents of my process:

  1. Research
  2. Personas
  3. Card Sorting
  4. User Flow
  5. Wireframes
  6. High-fidelity prototype
  7. Prototype and Website

Future Ada is a non-profit startup, focusing on securing space for women and non-binary individuals in the STEAM fields. I applied UX methods to develop, branding, an informed decision for site architecture and tested multiple Calls to Action to drive users to make a donation.

I started the project by identifying the following deliverables: user personas, card sorting research, create a user flow, design a wireframe, and produce a high-fidelity prototype.

To develop user personas, I researched STEM and STEAM-related non-profit organizations and interviewed Future Ada’s President to identify the two primary audiences to test content against.

From the card sorting feedback, I created the information architecture identified by users to meet the key objectives defined in the user personas.

I reviewed content from Future Ada’s google’s to content chunk design patterns for a rough wire frame. Next starting with a mobile responsive design approach, I translated the rough wire frame into a high-fidelity prototype.

Once the prototype was created I created task-based interview questions in order to test users using the prototype.

1) RESEARCH

Future Ada sets the standard by supporting women and non-binaries in the STEAM (science, technology, engineering, art, and mathematics) fields.

In a comparative analysis no other competitor is as inclusive supporting diversity for the STEAM fields. If you know of an organization, please let us know–

Stereotype Threat and Implicit Bias: Barriers to Women in STEM
Stereotype threat arises in situations where a negative stereotype is relevant to evaluating performance. A female student taking a math test experiences an extra cognitive and emotional burden of worry related to the stereotype that women are not good at math. A reference to this stereotype, even one as subtle as taking the test in a room of mostly men, can adversely affect her test performance. When the burden is removed, however, her performance will improve. Stereotype threat is one compelling explanation for why women remain underrepresented in STEM fields.

–The American Association of University Women (AAUW)

2) PERSONAS

Persona — Libe Becnofinne | Donor make connections
Persona — Sara Lamarr | Job seeker and make connections

[Back to top]

3) CARD SORTING

In order to make an informed decision, I asked for volunteers to perform card sorting provided by Optimal Workshop (free up to 10 entries).

Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them. — view the raw results

Get Involved vs Ways to Give

Testing the trigger words to see which prompted a donation path, and which fostered community involvement call to action found the following results.

Words associated to Ways to Give vs Get Involved:

Contribute = 5 to 4
Make a Donation = 9 to 1
Volunteer = 1 to 9
Sponsor an Event = 4/4–Tie
Fundraise = 6 to 3

Our Story= 4 to 6
Our Mission= 6 to 4
Board of Directors= 5 to 3
What we are doing= 6 to 3

4) USER FLOW

The User flow is the method you construct for users to convert or reach a goal. Using 37signals Shorthand the format is really simple and communicates the essentials of what needs to happen.

[Back to top]

5) WIREFRAMES

Initial content patterns were developed using good ol’ fashioned pen and paper — and with a little help from my fury friend lil.finnick.

Wireframe layout observations with Finnick his photo color matching is purely coincidence. ❤️

Low-fidelity wireframe:

The next step in the process, converting wireframes to to digital, using Sketch.

View the digital screens on InVision. [Back to top]

6) HIGH-FIDELITY PROTOTYPE

Building a design system to produce a prototype, pulling branding elements color, logo and typography together.

The design system includes; color, logo, and type hierarchy, and wireframes.

Branding elements:

Wireframes:

7) PROTOTYPE

View the React.js app prototype on GitHub Pages:
🔗 https://brentschneider.github.io/futureada

View Live Site

Final outcome 🔗 https://futureada.org/

Thanks for the claps 👏🏻 if you enjoyed this article. Also, leave your valuable feedback, I’d like to hear from you in the comments or connect on LinkedIn.

[Back to top]

Future Ada

We are a 501(c)(3) non-profit based in Spokane, Washington…

Future Ada

We are a 501(c)(3) non-profit based in Spokane, Washington dedicated to creating sustainable diverse and inclusive spaces for all people within science, technology, engineering, art, and mathematics (STEAM).

Brent Schneider

Written by

Maker of fine things that live on the web. Founder of Milkshake Interactive, vice president FutureAda.org, currently working in Higher Ed. with a focus on UX.

Future Ada

We are a 501(c)(3) non-profit based in Spokane, Washington dedicated to creating sustainable diverse and inclusive spaces for all people within science, technology, engineering, art, and mathematics (STEAM).