A Web Design Process

Project Initiation

A potential client has a problem they want to solve. Before the project starts, find out about budget etc, along with the following:

Project Overview

• How will solving this problem help our business?
• Why is our business capable of making this solution a success?
• What are the Unique Selling Points of the client's idea?
• What is the overall goal of the project?
• What are the moral implications of working with the client? Will we be able to sleep at night?
• Who from the client's side will be the one contact person with "the final word" during the project?
• What are the deadlines? Are there any milestones?

Project Diagram

• Use a mindmapping tool to create a diagram of the project for yourself.
• Nodes can be known parts of the design problem or questions to bring to initial client meeting.
• Type out what you know, what you are still guessing about and what you want to know.
• Create nodes for end-users and their needs, client and their needs.

Framing the problem

Meet with the client, preferably in person, and interview them around the following questions.

Questions for client

Marketing Overview

• What types of marketing are you currently involved in or practice on a regular basis?
• Do you have a tag line?
• What is your elevator pitch?
• Do you have a mission statement?

Marketing Goals and Objectives

• When it comes to marketing (in general), what are your biggest challenges?
• When it comes to obtaining qualified leads, what are your biggest challenges?
• When it comes to closing leads, what are your biggest challenges?
• Are there any short-term or long-term corporate goals that need to be considered in the website redesign?

Product and Service Overview

• How would you briefly define your product or service offering?
• Do certain products and/or services speak to different type of clients?

End Users

• Who is the end user? What do they know? How tech savvy are they? Do they use old versions of browsers?
• Can the end users be classified into clear “personas” with varying degrees of needs and selection criteria?
• Which user needs are we trying to address? For existing products, what are the shortcomings we need to fix?
• What are the 3 most important tasks for the end user?
• What customer insights do we have available to inform the solution (customer support, analytics, market research, user research, competitive analysis, etc.)?
• At the end of a project or sale or even website visit, how do you qualify it as a success?
• In which context will the service/app be used? How important is responsive design?

Competitive Overview

• List a few competitors that you’d consider benchmark companies?
• What differentiates your company and product from your competitors?
• What about these companies makes then stand apart from others?
• What elements of these companies and/or their online activity would you like to model after in your redesign?

Search Overview

• Based on what you know right now, what keywords or phrases would “you” use to search for your products and/or service offering?
• What search terms are your competitors targeting?
• Of the words you just listed, which ones would you like to target with the new website?
• Do you have existing content that can support these keywords or phrases?
• Does your existing website and content rank for these phrases?

Website Current State

• What does your website currently do well?
• What does your website currently do poorly?
• Are there any aspects of your website that you love?
• Are there any aspects of your website that you hate?
• Is there anything on the current website that needs to be removed entirely?
• Is there anything on the current website that must absolutely stay?

Website Future State

• What is the most important factor of your new website?
• What functional requirements are needed within the new website?
• What visual elements are needed within the new website?
• Are there any brand colors that should be used for the new website?
• What social media elements would you like integrated?
• Do you have a proposed sitemap prepared?
• Do you need a subscription option or other offer?
• Will you be blogging?
• Will you require responsive design (adapts automatically to mobile devices)?
• Is there anything that you would like to have included in the new website that you lack currently?

Project Constraints

• What is proposed date for kicking off your web design project?
• What is you desired date for going live?

Content to Assemble

• High resolution logo
• Content for pages
• Blog posts
• Literature or brochures
• Sales presentations
• Case studies
• Press releases
• Videos or podcasts
• Images
• Testimonials
• Articles
• Events
• Other marketing collateral
• Set up Dropbox or equivalent for quick sharing of files

The Client and the designer

• The client should work closely with the designer and developer. Answer their questions quickly to prevent road blocks.
• Focus on problems, not solutions. If a problem is stated, the designer can suggest a solution. Everyone needs to know why something should change so always explain why something is bad.
• Never ask a client what they think of the design. Ask them instead how they believe their users will react to the design or whether it meets their business objectives.
• When giving or receiving feedback via email, think of these rules.

The framing of the problem

• Strip down number of tasks as much as possible to focus on a minimally viable product (MVP)
• Summarize the task and see if client agrees.
• This product is like "..." but with a "..." Try finding similarities to other products but point to the Unique Selling Point.

Research & Learning

Getting on the same page as the client, learning about end users, understanding the context for the product, understanding why the product is important and how it should work.

Product walkthrough

Preferable product walkthrough

• Have end users explain how they work to solve the problem at hand.
• Where are they when they use the tool(s)? At home? At work? On the go?

Second best product walkthrough

• Have client show the product, step by step how it's used.
• If possible, record the walkthrough on video.

Mapping

• What do different areas/parts of the existing design do? E.g. "Provide information", "Allow for entries" etc.
• Where in the system does the user get information? Where does the user enter information. i/o.
• Are there areas for interacting with settings and general site specific issues?
• How are these things reflected in the current layout?

Journey Maps

• "The relationship that unfolds over time between an individual and a system."
• Grounded in research (interviews, ethnographic observation, contextual inquiry, surveys).
• Good for workshops with clients.
• Content of map: Original user story: Along the timeline, plot out how the system works today.
• Content of map: How it could be. Next to original story, plot out ideas for how it could be.
• Content of map: Questions a user might have at a certain point. “Can I trust this retailer?” or “When will my stuff arrive?”
• Try using something like Trello when sharing journey maps with long-distance team members.
• Examples of journey maps:

Feature list

• Which features (maps, search, filters, product gallery, navigation, etc) need to be in the product? Bear MVP (minimal viable product) in mind.
• Which features are "nice to have" but not essential for the product?
• Avoid making layouts or coming up with solutions at this stage. Focus on creating an "inventory" for the product.

Design Sprint

Most of this material is taken from Design Staff's posts on the Design Sprint.

Preparation before the sprint

Tools and materials needed

• Get sticky notes, thick pens, whiteboards, markers, dot stickers, paper, timer clock, snacks.
• Print-outs of the existing product, all screens.
• If you are doing Team Interviews in step 1, see if you need to schedule time with the teams.

What to do

• Invite 4-8 people. At least: CEO, Designer, Product Manager, User Expert.
• Schedule 4-6 participants for User Study on day 5.
• Decide on a facilitator, who will lead the sprint.
• Clear people's calendars and book a conference room for 5 consecutive days.

Day 1: Understand and learn

What to do

10 minute each for the following exercises. Everybody should write down "how might we..." on sticky notes and put them on a wall.

• CEO gives a talk on the market and the business opportunity.
• Competitor's products or similar products walkthrough.
• Walkthrough of existing product or potential user journey.
• Success metrics. How will success be measured?
• Go over existing user research.
• Team interviews. Talk to e.g. customer service about user's problems.
• Analytics. If there is website analytics, where do people drop off etc?
• Draw the user journey on a whiteboard.

Day 2: Diverge and generate ideas

What to do

• Divide the user journey if needed. Work on one part at a time.
• 5 minutes: Let people take notes off of the post-it notes on the wall.
• 10 minutes: Let people gather their thoughts in a mind map.
• Crazy Eights: Each person folds a paper three times to get eight panels. You then get 40 seconds per panel to jot down eight sketches. Repeat if needed. Time this carefully. This is to get people going. (5 min)
• Each person creates a storyboard. One paper with three post-its on it "first this, then this, then that", explaining an idea. Make them anonymously, make them speak for themselves, name each storyboard. Hang them up. (10-20 min)
• Silent critique: People put dots on the ideas they like. This creates a heat map. (5-10 min)
• Critique: One person at a time tells the rest what they liked and people can ask if something was missed. Considered better than to let everyone present their ideas. (3 min per idea)
• Super votes: Each person puts an X on a dot sticky and votes on his/her favorite idea. If someone has a greater say than others, give them three votes instead of one. (5 min)
• Repeat all steps 1-2 times if this section is done during one day. If user journey is divided, move on to the next step.

Day 3: Decide

What to do

• It's important to have the final decision-maker come with their honest opinion here.
• Search for conflicts, which ideas will not work with which ideas. This visualizes possible paths to take.
• Write down assumptions. These are the things you are going to find out with the test.
• Whiteboard the user journey to be implemented in the prototype.
• Decide if you are going to try out one or more ideas in prototypes.

Day 4: Prototype

What to do

• Use Keynotopia or Google Presentation and build from the storyboard.
• Use real text in prototpe.
• Keep it as simple as possible, don't focus on styling.

Day 5: Validate

What to do

• One interviewer, the rest of the team members are observers.
• Interviewer in one room with the user and a laptop, observers in another room with live video of the test (WebEx, GoToMeeting, Apple Airplay, and Google Hangouts etc, try out well in time).
• Mute the mic in the observer's room
• Observers are not allowed to diss the user.
• All observers take notes, preferably on paper for better focus.
• One person tries to transcript the test on a laptop. Switch this person between tests.
• If one part of the prototype is very hard for users to understand, guide them around it.
• After tests: make one column per test on a whiteboard and write down people's notes. Color code with red for issues, green for positive things.
• Make two columns on a whiteboard: "Things that seem to work" and "Problems to solve". Decision-maker should be ok with this list before the sprint is over.

Concept work for UI

If a design sprint is not conducted, or a smaller feature needs to be developed in mid-project, start working on a concept level, finding metaphors, similarities to other interfaces and systems, move quickly between concepts, don't get stuck on one solution. Explore, don't refine.

Brainstorming

Structure and basic rules

• Main purpose is to get as many ideas as possible. Not as good ideas as possible.
• No criticizing of ideas during the brainstorm. All ideas are valid no matter how crazy. Criticizing comes later.
• Idea Generation Brainstorm: Type out 3 main questions that needs to be answered, e.g. "How can we allow for a good system overview considering we have data X, Y and Z that needs to be in it?". Ask yourself: "What problem do we need so solve?".
• Problem Exploration Brainstorm: Ask "what problems do you encounter in the kitchen?" Rather than "What new products for the kitchen can you come up with?" Break topics down if needed (cooking, cleaning, staorage).
• No more than 4-5 people in a brainstorming group.
• Use post-it notes to prevent interrupting each other.
• Use thick markers on post-its so the text/sketches are seen from across the room.

During brainstorm

• If stuck on a question, jump to the next.
• Don't "stand still" or linger too long. Ideas should be born from the existing ones and from the main questions.

Categorizing after brainstorm session

• Try to see what overall categories have emerged, e.g. "Navigation", "CMS",
• Cluster redundant or similar notes
• Take photos of post-its at the end of the brainstorm.

Sketching

• Pen and paper: Diagrams or screenshots. Draw arrows and text showing what things are and which action leads to what.
• Take photos of sketches and email/post them to the team for feedback.

Wireframes

• Black and white, maybe grayscale
• Make miniature wireframes for quick and holistic explorations that let you go through possible layout and style solutions.

Card Sorting

• When you know which sections the system will have but need to find out how they should be hierarchically ordered and sorted.

Usability Testing

• Recommended: Once a month with a group of three participants.
• Start earlier than you think makes sense, even if all you have are sketches or wireframes.

Recruiting

• Recruit loosely. It’s ideal to get participants who are similar to the intended users of the site, but it’s not a requirement.
• Recruit participants via craigslist or a recruiting firm.
• Call the participants to make sure they are qualified.
• A few days before the session, follow up with a reminder email.

Preparation of tests

• Come up with tasks for people to try, turn these into scenarios e.g. "Book an appointment online".
• You’ll determine the tasks/scenarios to test by figuring out what the most critical tasks on your site are, the ones that people should definitely be able to do well when using your site.

During the test

• The moderator presents the company, explains that the test is voluntary, the site that will be tested, and what we’ll be doing during the test.
• The moderator has the participant sign a release form.
• The moderator asks the tester a few pre-test questions and records their answers.
• Use a tool such as Silverback to record the session.
• The entire team working on the project should try to watch the sessions in real time via screen sharing.

After the test

• After the sessions, the moderator and observers will make a list of the 10 most important problems that the testing revealed. They will be prioritized and a plan made for how to fix them before the next round of usability testing.
• When fixing problems, always do the least you can do. Think about what the smallest thing you can do to fix the problem is and do that.

Project Management

Use a tool like Trello to document stories on cards.

Listing Ideas

• State the problem in the title of the card. State who has the problem.
• Post sketches.
• Get client feedback on the card.

Tasks

• Mark each story with the type of task it is (for developer? for designer? for client to answer?)
• Prioritize stories. This is an ongoing task for the client to make sure the most important things are implemented first.

Potential topics/categories for todos

• Ideas
• Discussions
• On Hold
• Up Next
• Done
• Up for review
• Feature Creep (Items added after agreed set of todos)

General Style

Develop the general look and feeling for the style.

Brand Manuals

• Does the brand/client/product have a brand style manual? How strict does it have to be followed?

Come up with keywords that fit the product

• Describing the feeling the product should express
• e.g. Strong vs Delicate, Friendly vs Exclusive, Playful vs Serious, Quirky vs Strict, Modern vs Timeless, Simple vs Complex, Clean vs Active/Busy.
• Take screenshots/photos of other sites/objects/products that express this according to you.
• Always get sign-off from client. Make sure one person from the client's side can have the final word to avoid conflicting messages down the road.

Color swatches

• Select colors that correspond to the keywords
• Use something like Color Scheme Designer.

Style Tile or Element Collages

• Create a Style Tile (template below) or an Element Collage and communicate with clients.
• Show a range of elements rather than a full layout to save time. Client gets a feeling for the look and feel and style, not the details or the ixd. Prevents client from focusing on the wrong things.
• Everything will change so don't believe in there being a "final sketch" in FW/PS.

Typography

More on typography [here](http://magnus-g.github.io/Process/type-treatments)

• Find a typeface for body type that fits the keywords
• Use a tool such as Modular Scale to set sizes of type and elements.

Overall Layout & Styling

• Always start with the overall layout. Disregard details at first. Boxes, negative space, hierarchy, user flows.
• "…the design will look the same until you’ve made changes the structural gestalt." source.
• Consider: The clarity of individual interface elements
• Consider: The relationship of every element to every other element
• Consider: The effect of the composition as a combined whole