studio design method by benji haselhurst of parisleaf: a branding & digital studio
TRANSCRIPT
STUDIO DESIGNMETHOD
HEY,I’M BENJI!@lazerhurst
I’m Lead Web Designer at Parisleaf, Artist and Illustrator.
I try and bridge the design process and the web development process
I research user experiences, interview users, watch user patterns.
I try and make sure targeted users are empathised with, so their
needs are understood and designed around.
LET’SHAVEFUN!
What is the Studio Design Method?
When should I use it?
Sketching
Do a couple sample rounds
Feedback?
What did we learn?
DESIGNSTUDIOMETHOD
Developed by Todd Zaki Werfel & Will Evans.
One of many methods you can use to solve problems.
infinitely customizable.
Great solution when there are:
• Lots of stakeholders who aren’t designers.
• Complex goals that need to be solved quickly.
• Multiple teams and partners that need buy-in.
BUT I’M NOT A DESIGNER!
Yes you are!
As cognitive psychologist Herbert Simon says,
“Everyone designs who devises courses of action aimed at
changing existing situations into preferred ones.”
BENEFITSGenerate lots of ideas quickly.
Instill a broad sense of ownership.
Create empathy with the end user.
Create team-wide buy in.
Remove people from their comfort zones.
HOWTOSKETCH
Design Studio Method is based on sketching.
Good news! Everyone can sketch.
But you need to know a few symbols first.
YOU SKETCH!
YOU SKETCH!
Divider
Image
Icon
Button
Text lines
Body text
TEAMWORK Quantity: Aim for 5 people.
Diversity: Find folks with different expertise.
Gather up: Circle around a table.
BUSINESS
BALANCE
DESIGN DEV
THECHALLENGE Parisleaf is partnering up with the Gainesville Dev Academy, the
Gainesville Chamber, and the Gainesville Tech Council to launch a project dubbed Gainesville Inspired.
It will communicate how attractive and vibrant our community is for young professionals and entrepreneurs.
The key tools for the initiative will be a website that serves as the main area for stories and activities, job opportunities, and more.
Our challenge today will be to determine the layout of the homepage of the desktop view of website.
We want to organize our key features and content to create an impression that aligns with our personas’ goals, attributes, attitudes, and aptitudes.
THETOOLS These are some potential components of the site.
Menu and Navigation structure.
Events calendar.
Featured stories & Featured Gainesville personalities.
Job listings.
A blog-style directory of notable Gainesville companies.
An interactive map of the city.
Photography scroll of people and events.
PERSONASBased on real research and data.
Aggregates of themes and analysis from the research phase.
Fictionalized stories to help us with empathy.
They’re not representative of any single user.
Similar to “an audience,” but tailored based on research.
Focusing on personas helps us address a more human
experience rather than a specific, fictional path.
PERSONA #1:GAVINBELSON
Gainesville-based Web Engineer
PERSONA #2:AMANDACREW
San Diego-based Social Media & SEO Manager
SKETCHPITCHCRITIQUE
SKETCHPITCHCRITIQUE
• Sketch > 5 minutes together
• Present > 2 minutes per person
• Critique > 2 minutes per person
• Repeat
Ready? Go!
SKETCH5 MINUTES Based on the challenge, use the symbols to sketch where
you think each tool should be placed on the homepage.
Remember, you’re sketching for the persona.
PITCH2 MINUTES Explain the benefits of your design.
How and why does this hit on the goals of the persona?
REMEMBER : It’s not your personal preference.
(“I’d like...”)
Empathize with the persona.
(“Gavin wants to...”)
CRITIQUE2 MINUTES Did they successfully achieve the goals of the persona?
Share 2-3 ways the design solves the problem.
Share 1-2 opportunities to improve.
No “likes.” Give goal based critique.
LET’S TALK! What’d you think?
What was tough? What was easy?
Did you focus on the persona or your opinion?
How was sketching? Was it clear?
THETAKEAWAYS Some people do this in 1 hour, 3 hours, or 5 hours.
It’s all about:
• Research
• Empathy
• Collaboration
• Critique
LET’SKEEPTALKING!
Benji Haselhurst, Lead Web Designer
[email protected] // @lazerhurst
(352) 377-5560
www.parisleaf.com
@parisleaf // #parisleafgrows