Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 (big grin)

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.

...