In terms of UX process, we rely on the JJG model of UX design - Start with user needs or site objectives, and work your way up from there to ensure what you build is both needed, and feasible.

Step 1: Establish user needs / site objectives

What does the user need to accomplish their tasks / goals / what are they motivated by?
(ie: I want to help out at the school next door by sharing my robotics and engineering skills)

You can use either the Given When Then format, or user story format as a starting point.

Referring back to personas as a reference point also help at this point

Given When Then
Given (scenario), when (condition occurs), then (do a thing)
Given I want volunteers to help out in my classroom, when I create an activity listing, then volunteers should apply to help me

User Story
As a (role), I want to (action), so that (result)
As a School Principal, I want to invite skilled volunteers into my school, so that they can help teach my kids

Step 2: Functional specifications

What functionality do you need to accomplish your user needs / site objectives?
What “feature set” do you need to help the user accomplish their goal?

ie:
How do you find an opportunity to volunteer?

This excludes user flows - it is just a list of requirements you need to accomplish user needs and should be informed by user research / data from the live system if you have it

Step 3: Interaction design

How does all the functionality fit together in terms of order? Which parts are the most important?
This step excludes layout and visual design.

We use google drawings and low fidelity (grey rectangles devoid of detail) Sketch wireframes for this step, but feel free to use anything. It usually takes the form of a flowchart

ie:
Volunteer clicks signup →
Volunteer selects a signup method (facebook, github, linkedin etc) →
Volunteer confirms account details →
Account created

Step 4: Interface design

How will the layout work? How will the devs start building it?

What components do you need to make the user flow you defined in step 3 work? Do you need a text input? A button? A loading bar? Once you know what components you need, how do they fit together on the page?

We use Sketch, Abstract and Storybook here to make this happen.

At this point your design should be well fleshed out enough for usability testing - scoring anything below a B+ is not ideal

Step 5: Visual design

What does the look and feel of the functionality you’ve designed look like?

Does it flow smoothly? Would it benefit from nicer animations / pseudo states / final touchups?

How consistent is it with the rest of the application?

Final polish would happen here alongside the developer you’re working with

Tooling

We rely on Abstract to manage our pattern library, prototypes and all design assets. It provides version control and file management capabilities.

We publish prototypes to Invision to do usability testing and use OBS for recording participant playthroughs.

Open

Working with Developers

We work with frontend devs through Invision & Storybook. We use invision to present concepts and ideas, and storybook to store UI components that developers can use like lego.
A public link to this is coming soon, but in the interim follow the setup instructions on the repo and type

to see it.

Wireframes

V5 - Last updated 2 June 2019 https://invis.io/CSSBYXEH8JE

Pattern Library

Last updated 31 July 2019

Available for download here - This is temporary as we are migrating to storybook soon at design.voluntarily.nz (Not live yet)

Typography

We rely on two typefaces.

GAOEL for the brand, and Inter UI for the app.
The latest version of the type scale is viewable here https://share.goabstract.com/fb5b611e-7266-41f6-8313-1de43b238228?collectionLayerId=66b8719a-9c17-479d-964e-389b354853a2&mode=build

Colors

Full color scale available here https://share.goabstract.com/e6374d10-5bcf-4968-9238-a8baf44d17ef
Black - #000000
White - #ffffff
Purple for links - #6549AA