1 of 28

Subtitle

Add speaker name here

Title slide

2 of 28

Our Process for Building User-centered Websites

Valerie Neumark & Andrew Goldsworthy

Co-founders, Rootid

Design Strategies

Subtitle

Add speaker name here

Title slide

3 of 28

TODAY’S SESSION

Research

Developing Personas �& Testing Assumptions

Wireframing, Hierarchy & Workflows

Dev Hand-off Tips

bit.ly/design-strategies

4 of 28

bit.ly/design-strategies @GetRootid | #DrupalCon #DesignStrategies

Andrew Goldsworthy

Co-Founder at Rootid
Worked in Nonprofit Marketing and Fundraising
Background in Front-End Development
Focus on Marketing Strategy & Marketing Technology with Rootid’s Clients��Andrew@rootid.com

5 of 28

Valerie Neumark Mickela

Co-Founder at Rootid
Brand Strategist & Art Director�20 years experience in the corporate, education & nonprofit sectors
Focus on Communications Strategy & Community Building for Rootid’s Clients

Valerie@rootid.com

bit.ly/design-strategies @GetRootid | #DrupalCon #DesignStrategies

6 of 28

What is User-Centered Design?

VS.

7 of 28

CASE STUDY

Pacific Environment

8 of 28

ID/ Review Target Audiences

9 of 28

Group Target Audiences Based on Motivations

How does their environmental work help move the needle on human rights issues? where is overlap with rights issues the foundation funds? how do they navigate challenging political circumstances? what do they offer that my current grantees don't offer, their unique value-add; will my investment make a difference on the issue I care about?

what specific issues is PE working on? what makes their approach unique compared to other grantees in my portfolio? does PE play with others? do I know the others? are they reputable? who is on their board? who do they work with on the ground?

10 of 28

Using Google Analytics & Digital Tools For Research

Work Backwards from Conversions/Goal Completions
Use GA Segments to Learn Behaviors & Trends
Use FB Pixel and GA Demographic & Audience Info
Analyze Data by Marketing Channel

Audience Research

11 of 28

What Am I Looking For?

Compare the data points and look for trends or anomalies.

Audience Research

12 of 28

“Sell the hole, not the drill.”

Focus on Audience Motivations

Developing Personas

13 of 28

Create Personas with

Common Motivations

Solving a Common Problem or Fear
Finding Community or Common Ground with Others Like Me
Prestige & Status - “People like me do X”

14 of 28

Scott works in finance and is deeply involved with multiple non-profit organizations both financially and in advisory roles.

Rafael is a professor and leading Arctic policy expert—well known in the field and �a paid consultant in the public sector.

Developing Personas: Creating Consumer Profiles

Professional Giver

Influencers

Connection Seekers

Denise is the Executive Director of a large Foundation—spent many years in a Development and/or Communications role at varying levels.

15 of 28

Developing Personas: Creating Consumer Profiles

The Professional Giver

Val:

URL Samples: https://docs.google.com/spreadsheets/d/1xw7Fj1CgJ0j6JoliRPszSslOBdKiXZEhyYcHHE06EWs/edit?usp=sharing

Once you have defined your persona, it is time to dig into what they more tactically want from you and what you want from them.

Here you can see our Professional Giver Denise now let’s take a quick look through what she is looking for when she arrives at your website.

Next, we move onto what you want Denise the executive to do or understand and how you want them to become or stay involved. Here you can see we want them to follow on social media and subscribe to your email list, maybe she is also connected to a foundation or some other large donor pool and you want her to request a proposal from you or even partner/consult with you to help you be more attractive to those organizations.

So now, just to review...we have identified our audience members, what motivates them and then used our handy worksheet to create a profile...which we will to build out more effective information architecture and workflows. But first, we must test our assumptions through surveys and interviews.

16 of 28

Test Assumptions: Survey/Interview Audiences

URL Samples: https://docs.google.com/spreadsheets/d/1xw7Fj1CgJ0j6JoliRPszSslOBdKiXZEhyYcHHE06EWs/edit?usp=sharing

Val:

Now that we had done our internal assessment and identified our personas, we helped Pacific Environment build out a survey to send out to their email list and post to social media. The purpose was to again test our assumptions and gain greater insight into who was using their site and what they were looking for when they arrived. Since we were also helping Pacific Environment revitalize their branding, we included questions around what audience members felt were Pacific Environments strengths, key areas of focus and their larger value add to the climate work as a whole.

Alongside the survey, we also conducted interviews with key stakeholders who were aligned with our 3 personas. That way we could ask more directed questions and test if our assumptions about their motivations were correct.

Here you can see our standard survey spreadsheet that we use to develop our questions...usually placed into surveymonkey.

17 of 28

Persona-based Hierarchies

18 of 28

Persona-based Hierarchies

19 of 28

Persona-based Hierarchies

20 of 28

Design & Development Communications Can Be Challenging

Optimizing for Drupal

Don’t rely on assumption.
Check in early and often.
Don’t ask “is it possible.” Ask “is it hard.”
Try and establish design guardrails

21 of 28

Project Processes That Help

Optimizing for Drupal

Developer “sniff test” early in the prototype process
Component based design and development can be helpful in establishing guardrails
When transitioning from design -> dev have a meeting with all team members present & full tech spec review. Frequent stand-ups after that.

22 of 28

Stakeholder Interviews & Workflow Testing

23 of 28

Tips for the Dev Hand-off

(how to pass materials effectively to your dev team)

Transitioning from Design to Development

Audit your design files and get another set of eyes to go through, clean them up, and check for inconsistencies.

Headers (what will translate to H1-H6)
Body text including line-heights and weights
Color palette HEX codes

Build out/ update your style guide

24 of 28

Sketch + Zeplin

25 of 28

Valerie Neumark | Andrew Goldsworthy�valerie@rootid.com | andrew@rootid.com

Resources From This Session: �http://bit.ly/design-strategies

�Connect With Rootid:�@GetRootid �facebook.com/rootid�pinterest.com/rootid

26 of 28

Join us for

contribution opportunities

Friday, April 12, 2019

9:00-18:00

Room: 602

Mentored

Contribution

First Time

Contributor Workshop

General

Contribution

#DrupalContributions

9:00-12:00

Room: 606

9:00-18:00

Room: 6A

Subtitle

Add speaker name here

Title slide

27 of 28

What did you think?

Locate this session at the DrupalCon Seattle website:

https://events.drupal.org/seattle2019/sessions

Take the Survey!

https://www.surveymonkey.com/r/DrupalConSeattle

Subtitle

Add speaker name here

Title slide

28 of 28

Valerie Neumark | Andrew Goldsworthy�valerie@rootid.com | andrew@rootid.com

Resources From This Session: �http://bit.ly/design-strategies

�Connect With Rootid:�@GetRootid �facebook.com/rootid�pinterest.com/rootid