Designing from the middle - how we design at Crunch
47
Designing from the middle integrating design into your tech startup
description
Mark Cossey, Head of Design and UX, runs through the design process we use, and how you can employ a similar approach at your startup.
Transcript of Designing from the middle - how we design at Crunch
Designing from the middle
integrating design into your tech startup
User Experience Design?
Getting the team right
UX Research / testing
UI Design Visual DesignFront End
Development
UX Research / testing
UI Design Visual DesignFront End
Development
Look for versatility “When you can’t change the direction of the wind — adjust your sails”
Photo by Duncan - Flickr
Look for makers and problem solvers “Great talent finds happiness in execution”
Photo by WarmSleepy - Flickr
Look for enthusiasm “The true way to render ourselves happy is to love our work and find it in our pleasure”
Photo by skippyjon - Flickr
Look for ability to challenge“Courage is what it takes to stand up and speak; courage is also what it takes to sit down and listen.”
Photo by Scott Ableman - Flickr
Review CVTelephone
chatPre interview
task
Interview
Coffee sketch activity
Offer
Informal face to face with team lead
Post interview review
Review task
Review portfolio Interview questions
Stage 1
Stage 2
Stage 3
2 weeks
Working with the business
IntegrationCritical to the success of any user experience team is an organization that values its contribution
Start
Early Middle Late
Release
Create a definition statementA concise, concrete declaration of a product, service or features main purpose
and its intended audience
SnapAn app for Crunch customers to add expenses with receipts to their account on the go.
Provide spaceA space for shared note taking, problem solving and cross team vision sharing
Photo by Google Ventures team
Sketching & rapid prototyping
Keep testing your prototypes
Sketch
Prototype
Test
Build
Ingredients for good design
Create a strong foundation
Photo by sarflondondunc - Flickr
Style guides
Atomic design system(for larger applications)
Atoms Molecules Organisms Templates Pages
From: www.patternlab.io
Example of an Atom● Colours● Fonts● Buttons
Example of a Molecule● A group of Atoms that
function together
Example of an organism
● Groups of molecules joined together to form part of the interface
Example of an Atom● Colours● Fonts● Buttons
Example of a Molecule● A group of Atoms that
function together
Example of an organism
● Groups of molecules joined together to form part of the interface
Example of an Atom● Colours● Fonts● Buttons
Example of a Molecule● A group of Atoms that
function together
Example of an organism
● Groups of molecules joined together to form part of the interface
Example of a Page
Example of a Template
Design principles
Photo by bdesham - Flickr
Why use front end style guides, design systems & principles?
Photo by Scottish Government - Flickr
Everyone can get involved
Maintain quality & consistency
Photo by Dyson
Understanding
Good team
Environment
Principles &Systems
Good practice
Understanding
Good team
Environment
Principles &Systems
Good practice
Understanding
Good team
Environment
Principles &Systems
Good practice
Understanding
Good team
Environment
Principles &Systems
Good practice
Understanding
Good team
Environment
Principles &Systems
Good practice
Understanding
Good team
Environment
Principles &Systems
Good practice
Design from the middle
Photo by sean dreilinger - Flickr
Build something amazing
Thank you
Join the Crunch design team www.crunch.co.uk/careers/
