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

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.

➤ What steps you should take before you design and build your website ➤ Learn more about user Goals of Presentation personas, sitemaps, user flows, and content guides, ➤ Feel more confident defining your website design needs 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.

User personas

“ 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.

➤ Should focus on the details of who your WHAT intended audience 
 (if your targeting everyone MAKES A your not really targeting anyone) 
 GOOD USER ➤ Should be based on actual research and/or analytics. 
 PERSONA? ➤ 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 e ff ective 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

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.

how do we use personas?


 SMALL GROCERY STORE ADDING AN ONLINE DELIVERY OPTION TO THEIR WEBSITE NAME: JOYCE WEBBER AGE: 75 NAME: LAURA SMITH AGE: 39 TECH LEVEL: NOVICE TECH LEVEL: INTERMEDIATE DEVICE: DESKTOP COMPUTER DEVICE: IPHONE 6S Joyce is retired and lives by herself in an Laura lives in a residential neighborhood with 3 apartment downtown. She does not drive and children between the ages of 7 and 12. She spends a lot of time driving them to after school struggles with lugging groceries home. Her activities and sports. She prefers to shop local and goal is to get basic supplies easily without will pay more for organic brands Her goal is to relying on outside help. save time without sacrificing quality. “It’s not worth the hassle” “My time is important to me” 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

Site Maps

“ 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.

➤ a lot of people start with something easy to move such as post it notes each HOW DO YOU note should represent one page MAKE A ➤ after consolidating and re-arranging a more SITEMAP? 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.

SAMPLE SITE MAP FOR A LANDSCAPE BUSINESS HOME Starting Page Main Nav ABOUT US OUR SERVICES GALLERY CONTACT US sub- pages MOWING SNOW REMOVAL 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.

➤ A site map represents your pages and navigation SITE MAP VS. ➤ A user flow or task USER FLOW/ flow represents all the steps, buttons, TASK FLOW 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 di ff erence 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. 


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.

“ 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. -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.

➤ User flows are useful on large sites that rely on a user completing a WHEN DO specific task ➤ User flows work well to YOU NEED A illustrate how complex tasks work like adding USER FLOW? 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 di ff erent 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. Di ff erent user personas are going to prefer di ff erent 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.