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?
Do you need an account / signup functionality?
Do you need a real name?
Do you need police vetting? if so how?
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: Interaction 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?
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.
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
npm run storybook
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
0 Comments