Before Design Karalyn Thayer @KARALYNTHAYER KCLOSSON@MECA.EDU - - PowerPoint PPT Presentation

▶

Jan 02, 2024 416 likes •704 views

Before Design Karalyn Thayer @KARALYNTHAYER KCLOSSON@MECA.EDU Kara Thayer, Currently a freelance designer based in Scarborough Maine. The Majority of my current work is designing websites for WordPress, some past experience in web app design.

SLIDE 1

Before Design

SLIDE 2

Karalyn Thayer

@KARALYNTHAYER KCLOSSON@MECA.EDU

Kara Thayer, Currently a freelance designer based in Scarborough Maine. The Majority of my current work is designing websites for WordPress, some past experience in web app design.

SLIDE 3 ➤ What steps you should take

before you design and build your website

➤ Learn more about user

personas, sitemaps, user flows, and content guides,

➤ Feel more confident defining

your website design needs

Goals of Presentation

Goals/overview of talk Before you jump into building a site you need a plan. The goal of this talk is to give you the tools to create a road map for your website. Whether you are building your own site or you are working with a designer or an agency this talk should give you a launching point to building a successful website. You may not need to use all of these methods, but knowing what they are and having them in your tool box in case you need them is always helpful.

SLIDE 4

User personas

SLIDE 5

“

A persona is a written representation of your website's intended users.

USABILITY.GOV

A user persona is like a snapshot of a fictional person who represents a research done on a major user group of your website. This gives you a useful metric to design and critique your site with. Rather than having to remember the details of many users, you are looking at your site through the lens of three to five fictional characters. This tool is really useful when you want to make sure a user accomplishes a certain goal such as buy a product, call a number, find directions.

SLIDE 6

WHAT MAKES A GOOD USER PERSONA?

➤ Should focus on the

details of who your intended audience   (if your targeting everyone your not really targeting anyone) 

➤Should be based on actual

research and/or analytics.  

➤ Should be realistic

➤ A good persona focus on your intended audience. It is possible to have multiple audiences. However, if you are asked the question “who is your business targeting” and your answer is “everyone” your not actually targeting anyone. Really knowing your users and their needs is going to help you make effective design decisions.  ➤ As much as possible your persona should be based on actual research and/or analytics. Without research it is possible to make false assumptions about your users and therefore make faulty design

decisions.

➤ A good user persona should be realistic. While it is okay to be aspirational, you do want to keep your decisions based in reality. For example if you are creating a persona for a non-profit that typically receives many $25-100 donations, you would not want your persona to be a millionaire looking to give away all their worldly goods. Not only is this unlikely to happen, you could risk making design decisions that cause you to loose your current audience

SLIDE 7

SAMPLE USER PERSONA TEMPLATE

From creativecompanion.wordpress.com This is a free resource from creativecompanion.wordpress.com (I will link to this at the end of the presentation) and gives you a boiler plate for creating your own user persona. It prompts you with important questions such as what are your persons goals and motivations.

SLIDE 8

how do we use personas?

SLIDE 9

SMALL GROCERY STORE ADDING AN ONLINE DELIVERY OPTION TO THEIR WEBSITE

NAME: JOYCE WEBBER AGE: 75

Joyce is retired and lives by herself in an apartment downtown. She does not drive and struggles with lugging groceries home. Her goal is to get basic supplies easily without relying on outside help.

TECH LEVEL: NOVICE DEVICE: DESKTOP COMPUTER

“It’s not worth the hassle”

NAME: LAURA SMITH AGE: 39 TECH LEVEL: INTERMEDIATE DEVICE: IPHONE 6S

“My time is important to me” Laura lives in a residential neighborhood with 3 children between the ages of 7 and 12. She spends a lot of time driving them to after school activities and sports. She prefers to shop local and will pay more for organic brands Her goal is to save time without sacrificing quality. Design decisions that might be made based on Joyce ➤ larger font that is easier to read ➤ not too many pages to click through to order ➤ Joyce may want to call in her order to speak to a live person rather than fill out an online form, so make sure the phone number is easily found.     Design decisions that might be made based on Laura ➤ Needs to be mobile friendly ➤ probably want a design that looks high quality vs discount ➤ Laura may also want a click to call button located in a primary position on the site vs a form A beautiful designed multi page form even if designed well will probably not work for either of these users

SLIDE 10

Site Maps

SLIDE 11

“

Sitemaps are a hierarchical diagram showing the structure of a website or application.

THEUXREVIEW.CO.UK

Site maps are a way to organize the information and navigation of your website. After creating a site map you should have a complete map of all the pages and sub pages in your site.

SLIDE 12

HOW DO YOU MAKE A SITEMAP?

➤ a lot of people start with

something easy to move such as post it notes each note should represent

ne page

➤after consolidating and

re-arranging a more refined digital version can be made and referred to by all designers and developers.

you can start your site map by writing down the names of all the pages you will need on post it notes and stacking them in rows under the home page of how you feel they should be organized. Redundant information can be consolidated at this point and information out of place can be reorganized. Your first row will end up becoming your main navigation and generally should not be more than 7-8 pages.

SLIDE 13

SAMPLE SITE MAP FOR A LANDSCAPE BUSINESS

HOME

ABOUT US OUR SERVICES

GALLERY CONTACT US MOWING

SNOW REMOVAL Starting Page Main Nav sub- pages From this site map we can tell that we need to design 7 pages total. The main Nav will have 4 options. Our Services will drop down to 2 sub pages.

SLIDE 14

SITE MAP VS. USER FLOW/ TASK FLOW

➤ A site map

represents your pages and navigation

➤ A user flow or task

flow represents all the steps, buttons, and modules a user must hit to get from point A to point B

User flows and task flows are often confused with site maps as they can both take the form of flow charts. The difference is in what they represent. A site map is about your pages and navigation. A user flow is about how a user gets from point A to Point B. An example from uxmovement.com is that a Site map is like looking at a map of a territory from a birds eye view, with all major landmarks visible on the map. A user flow is like putting in coordinates for directions in Google maps. You can see which route to take, where to turn, and the miles it takes to get there.  

SLIDE 15

user flows

User flows are useful for apps and larger e commerce sites for instance to show how many steps someone takes to put an item in their cart or onboard to create an account.

SLIDE 16

“

Also known as a blueprint, journey, narrative

r map, a user flow is a deliverable that

demonstrates the step-by-step elements required to allow the user and the business to accomplish their objectives.

EFFECTIVEUI.COM/

Also known as a blueprint, journey, narrative or map, a user flow is a deliverable that demonstrates the step-by-step elements required to allow the user and the business to accomplish their objectives. Site maps are a way to organize the information and navigation of your website. After creating a site map you should have a complete map of all the pages and sub pages in your site.

SLIDE 17

WHEN DO YOU NEED A USER FLOW?

➤ User flows are useful

n large sites that rely
n a user completing a

specific task

➤ User flows work well to

illustrate how complex tasks work like adding an event to a calendar, checking out, or creating an account.

User flows are really use full on sites that require its users to complete a task to be successful. Examples can be creating an account/on boarding, adding an event to a calendar, putting a product in a cart and checking out, filling out a form to download an ebook. Your user flow should help you to see how long and straight forward the process is to completing the task you want your users to take. If the task is too long, complicated, or confusing you can loose users on the journey not fulfilling the goal of your site.   One exercise in thinking about user flows is to compare different ways to buy laundry detergent. Compare the user journey in creating an online account and purchasing a detergent online, running to the grocery store, and using a tool such as the Amazon dash button. Different user personas are going to prefer different methods depending on their comfort with technology, access to transportation, and their timeline for how soon they need the item. That is why a lot of these tools work better complimenting each other rather than in a bubble.

SLIDE 18

SAMPLE SITE USER FLOW FOR A CHECKOUT PROCESS

ADD ITEM TO CART

VIEW CART

“PROCEED TO CHECKOUT”

GUEST CHECKOUT SIGN IN WITH SOCIAL MEDIA

CREATE USERNAME AND PASSWORD

ADD BILLING INFO

ORDER CONFIRMATION

ADD SHIPPING IF DIFFERENT FROM BILLING

SHIPPING TYPE ADD BILLING INFO

CHECKOUT!

As you can see when drawing out all the steps of even a simple checkout process, there are more steps than you would first guess. Looking at this user flow we can tell that the longest path to checkout is creating a new user account before checking out. This is why having a guest checkout option for users in a hurry is an option. Other options we could consider to offer a shorter checkout process: having social sign in as an option, default shipping address to same as billing, having one page checkout with billing info, billing address, shipping address, and shipping info all on same page. A user flow shows you barriers to users completing a goal on your site. After you create your user flow, you would want to go back to your user personas and see if they would be able or want to complete the goal.

SLIDE 19

Content Guide documents

nce you have a site map you can move on to your content guideline

SLIDE 20

MANY FORMS OF CONTENT DOCUMENTS

➤ If your working with an agency

they will often provide you with a preferred format to complete with the information they would like.

➤This document can be a simple as

a multipage word document. Each page should correspond to an item on your site map. A simple Content Document will contain your headlines and text

➤A more complex content guide

can contain the names of photos to include, SEO information, CTA’s, and more

SLIDE 21

Why use a content Guide?

SLIDE 22

CONTENT GUIDE BENEFITS

➤ Your designer will have an idea

f the size of your content and

can design for it rather than trying to smush your content into a template

➤You will have an idea of all the

images and assets you will need to provide.

➤This step can often hold up the

launch of your website as a site cant launch without content. Working on this step early will help ensure you launch on time

SLIDE 23

SAMPLE CONTENT GUIDE

PAGE TITLE: About Us CONTENT:

Acme Inc. has been serving our customers needs for over 10 years. We source all of our products locally right here in Maine. We are a family

wned business that strives to meet your needs.

Who We Are Tom Smith, CEO  Jane Smith, COO  Mark Smith, Manager

CTA:

NEED ACME SERVICES? Contact us for a quote today!

IMAGES:

Teamphoto17.jpg, Tom_headshot.jpg, Jane_headshot.jpg, Mark_headshot.jpg This is a very bare bones example but can give you an idea of where to start. Doing this work before your design will make a much stronger design as it puts your content at the forefront. Content guides are less about layout and more about what information must be included on each page.

SLIDE 24

What if I am working with an Agency?

SLIDE 25

BENEFITS STARTING THE LEGWORK ON YOUR SITE BEFORE WORKING WITH AN AGENCY

➤ Get a more accurate quote

and time estimate 

➤ You have first hand knowledge

f your users and audience

➤Make sure your site is built

quickly 

➤The agency can spend more

time making recommendations to refine your site based on their experience vs trying to figure

ut what you want.

Yes you can probably hire someone to do this all for you but there are benefits to giving it a go first yourself.

SLIDE 26

RESOURCES

➤ Articles ➤ https://www.usability.gov/how-to-and-tools/methods/personas.html ➤ https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/ ➤ http://theuxreview.co.uk/sitemaps-the-beginners-guide/ ➤ http://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/ ➤ https://alistapart.com/article/content-templates-to-the-rescue ➤ http://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which ➤ https://oscwebdesign.biz/wp-content/uploads/2017/06/osc-buyer-persona-guide.pdf ➤ https://oscwebdesign.biz/web-marketing/blogging-small-businesses/ ➤ Templates ➤ https://creativecompanion.wordpress.com/2011/05/05/the-persona-core-

poster/

SLIDE 27

Questions?

@KARALYNTHAYER KCLOSSON@MECA.EDU WWW.KARALYNANN.COM