Vered Rekanati

UX/UI DESIGN PROCESS

Something Good - The Place Where Volunteering Events Happen

It’s not about ideas. It’s about making ideas happen / Scott Belsky

Idea

idea

We wanted to build a web application that would promote community engagement by creating a platform where people can share volunteering events in Israel. The volunteering events would be based on a one time participation with no commitment, in a variety of activity-types and locations. Users would vote for the volunteering event they like, and each week, the selected event would happen.

To find ideas, find problems. To find problems, talk to people / Julie Zhou

Problem

problem

We defined these problems in our initial research process:

problems statement
One accurate measurement is worth more than a thousand expert opinions / Grace Hopper

Research

research

We chose the informal research method; we checked the alternatives apps and found out that other application do not offer private people the opportunity to post their own ideas, and that organizations are looking for commitment rather than a one time event. Other alternatives:

volunteering website - Nefesh B'Nefesh volunteering website - skilled Volunteers volunteering website - Ruach Tova
Want your users to fall in love with your designs? Fall in love with your users / Dana Chisnells

User Persona

user persona - Johnny

We defined a main user personas at the age range of 20-65, residents of Northern Israel, care about their community, and would like to make a positive impact. Our main user persona is Johnny:

  • Age: 45
  • Residency: Northern Israel
  • Family Status: married + 3
  • Profession: banker
  • Hobbies: books, basketball, community events
  • Cares about: his family, his community
user notes
Notes about our persona
Very often design is the most immediate way of defining what products become in people's minds / Jony Ive

Wireframe

color

The initial sketches include a login page, voting page for upcoming events, a page for the main event of the coming week, ways to help through donations and participation, form to add an event, thank you page, and a page to share the event with others:

sketch
If a picture is worth 1000 words, a prototype is worth 1000 meetings / Tom & David Kelley

Prototype

desktop

We created prototypes in both Figma and InVision. We wanted to understand what the users would think of the app flow and design, with a simple prototype that would be quick to create and adjust according to the feedback. Screenshots from the Figma prototype:

prototype - home page
Home page
prototype - event page
Event page
prototype - create page
Create your event
Pay attention to what users do, not what they say / Jakob Nielsen

User Testing

user testing

We conducted user testing with people that matched the audience we were aiming the app for. We interviewed potential users and gave them the opportunity to interact with the app. We took notes and made significant changes according to the results.

user testing
user testing
User testing with the prototype
You’ve got to start with the customer experience & work backwards to the technology / Steve Jobs

Code - MVP

code

Following the UX design process we created the app, taking into consideration all the steps we went through and the meaningful feedback we received from our potential users. Screenshots from the app:

events page event page form page
Not everyone notices the flowers you plant, but everyone will notice the fire you start / Unknown

Product

paper plane

You are welcome to check the full web app. We recommend browsing the application on a mobile device, as the application is made mainly for mobile.

You are also welcome to take a look at the code on GitHub.

The UX design process and the application were designed with Sajeda Zoabi at Founders and Coders, Nazareth, Israel, September 2017.

We used the following technologies to develop the application:

JavaScript

Node.js

Express

MongoDB

Git

Github

HTML5

CSS3