top of page

A PLATFORM WHERE INDIVIDUALS WITH EXCESS FOOD CAN SHARE WITH A CHARITY IN NEED

Purpose

A General Assembly project with randomly chosen peers tasked to design a responsive website, in conjunction with the Web Development team, where individuals were matched with charities in need.

Objective

 We were tasked to solve a hypothetical challenge where Austinites have excess food and want to share the food or items with nonprofits in need.  We were to create a responsive website and hi-fidelity mock ups and hand off deliverables to the Web Development team.

Approach 

Our approach was focused on research, interactions, information hierarchy and content strategy, visual design and user testing while concentrating on user flows, heuristics and material design methods.

Project duration

Two weeks - March 27 - April 7, 2017
This project was in my 4th-5th weeks of a 10 week UX class at General Assembly.

My Team

Cherian Porter, John Thaler, Turner Vickery, and myself

My Roles

Team leader - Research, IA, Content, Interaction, Usability, Form Visuals

Challenge
Two week project with randomly chosen peers tasked to design a responsive website, in conjunction with the Web Development team, where individuals were matched with charities in need.

The problem is that Austinites have excess food and they want to share it. How can technology assist in letting them share with nonprofits in need?

As team leader  and project manager, I created a Trello board with tasks and a time box to keep the team aligned.
Process
Why and how our team made decisions

 

We researched, created user flows and journey maps, information hierarchies, personas, content, wire-frames, prototypes and iterations.  We cycled through multiple iterations to help ensure Charity Wish would be useful, usable, desirable, valuable, findable, credible, and accessible. I created a Trello board for the combined  Web Dev / UX team to prioritize work, stay on time and delineate roles. We were required to adhere to the Scrum process and focused on four main industry standards.

  

Industry standards we adhered to:

Jakob Nielsen's Hueristics for UX Design

Peter Morville's UX Honeycomb

Google's Material Design

Kristina Halvorson's Principles of Content Strategy

Research
Getting to know the users

 

The how and why?

  • Business Analysis – Understand our business model

  • Competitive Analysis – Understand our competitors

  • SWOT – Determine our Strengths, Weaknesses, Opportunities and Threats

  • MoSCoW – Prioritize our MVP goals

  • One-on-one interviews – Grasp people's needs

  • Survey – Learn about general user behaviors

  • Field research - onsite at local food nonprofit at Mobile Loaves and Fishes

A screenshot of one of our surveys we created in Google Forms.
We learned if our site is valuable we would need at least two user flows and journeys. We created and filtered profiles to two personas, an individual and charity volunteer liaison. We wanted to understand how the nonprofit and individual desires could be interlaced.

 

Insight
Because of our research, we designed the framework of a social media matchmaking site pairing people to nonprofits based on mutual interests. Users wanted freedom to go to any nonprofit, and they  didn't want to have to sign up or become a member to donate, so we designed a portal for the unregistered donor.
Information Architecture Organizing our information
An affinity diagram (left) and empathy diagram (above) as part of the process to understand our user needs and desires.
The how and why?
  • Card Sorting – Organize thoughts into words

  • Mind Mapping – Figure out informational needs

  • Affinity Diagram – Organize the informational needs

  • Empathy Diagram – Get a sense of thoughts, feelings, and actions

 

We learned that through content hierarchy, we could make our site findable and usable. We synthesized and categorized information.

Insight
Categorize our information and create a simple hierarchy of information on how users would surf the site. We would design a dashboard with a search function for both donor and charity liaison.
Interaction Design
Maximizing and enhancing our user's experience
Our team whiteboarding the user flow on the wall (above left) and individual donor persona (above right). User journey experience brainstorm (left) with sticky notes and white-board sketching.
The how and why?
  • Usability –  Heuristics driven design

  • Profiles and Persona - Define all users and why they would use our site

  • User Flow – Determine why and how users navigate through the site

  • User Journey – Chart the user's emotions while interacting with the site

  • Balsamiq – Used to draw our prototype because it's simple to lay out

We worked on personas and user journeys with the goal to create a credible and desirable platform for users. Our goals were for users to want to use the site, and be engaged while using the site.

Insight
We created a heuristic-driven design site and created two personas who represent an individual donor and a charity liaison, who have different needs when using the site.
Visual Design and Content
How will our site look and feel?
Iterations of form design from white-boarding to final mock up.
A snapshot of our content management system in excel.
The how and why?
  • Sketching and white-boarding – Unite as a group on visual aspects

  • Mood Board – Set the tone and choose a color scheme for the site.

  • Sketch for mock ups - Show during user testing

  • Material Design - Create a consistent look in layering, colors, and forms

  • Content strategy - Prioritize what pages are important and focus on web writing, clear headers and visual language to convey the points

 

My team worked on white-boarding together to ensure site had a minimalist look and consistent feel. We also created a Content Strategy Worksheet to organize information on each page. We chose blues and green colors and designed call-to-action buttons the same color to help user with easy recognition and recall.

Insight - We chose a minimalist design, Material Design for a sense of consistency, and Sketch for hi-fidelity wire-frames. We also organized content using Kristina Halvorson's methodologies. 
Usability and User Testing
Will our site's design actually work?
User testing at General Assembly Austin
The how and why?
  • User testing – Test five users and each user had same hiccup with search function

  • Invision - Import Sketch wire-frames to create an interactive wire-frame

  • User test questions - Determine if our site was user-centered, we wrote questions based around the five components of Usability and  rated answers 0 to 2 in a Heuristic Analysis

    • Learnability: is it easy to accomplish tasks?

    • Efficiency: is it quick to understand?

    • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?

    • Errors: Are their errors?

    • Satisfaction: is the design pleasing?

  • Iterations - Change our design due to input from user testing and team conversations

Insight
We validated our site and ensured usability by following the ten principles of Nielsen's Heuristics. We rated all responses in a Heuristic Anaylsis 0-2 format. After user testing, we redesigned the search function and other gaps in the flow. 
Retrospective
Our class sprint retrospective on the whiteboard.
  1. Communicate clearly with  the Web Development team throughout process. The WebDev team made changes that impacted the design and we collaborated to ensure design continuity. We did not receive a final interactive prototype for portfolios.

  2. Ensure all deliverables to the Web Development team are crystal clear,  with understandable user flows so the WebDev team can relate to the uses and reasons behind our decisions.

  3. Remain people- and user-focused and return to the question "Why" would our personas visit and continue to return to the site

  4. Focus on accessibility

  5. More usability testing; user testing is critical and I would continually make iterations based on user testing.

  6. Stay focused on the Most Viable Product.

Sample of Final Artifacts
Home Page with two logins
Donor profile after signed in
Donor sign up pop up form.
Donor profile after signed in

© Matt Lankes (Boy Scout photo)

bottom of page