Skip to main content Skip to secondary navigation
Person drawing wireframes of user flow in mobile

Get Started

Main content start

Welcome to the Stanford Web Services UX Guide!

This UX Guide is a collection of tools, templates, and articles that we (at Stanford Web Services) use internally in our UX work. Most were created by us or other SWS colleagues past and present and some were created by third parties. They can all be helpful to UX work.

Where to begin...

It can be daunting to start a website project if you don’t have any experience with this process (or even if you have!). Where do you start? Who should be part of the process? How do you create and organize the content?

Your starting point will depend on where you are in your project:

  • If you are just getting started, this guide will help you approach any project; starting with defining your goals and strategies
  • If your web strategy has been defined, the Research or UX Design pages have some items that should help you discover what problems and/or content needs you are trying to design for. 
  • If you already understand your requirements pretty well and you are ready to start your visual or UI design, the Visual Design section can guide you with components and brand guidelines to speed up your design process.
  • It is never too early to think about Accessibility and start planning for how to ensure your service is truly available for everyone
  • Writing for the Web section covers writing and organizing your content to make it easy to understand and actionable for your users.

 

Here is a simple guide that can help you as you approach your project:

Define Goals

What is the purpose of your website? Who are you hoping to reach? Do you have goals for your website and/or your users?

Construct a website strategy

Understand Your Users

Learn more about your users and/or of the performance of your current site before you leap into execution on your new site

Evaluate User Needs

Identify Content Needs

Creating a content audit of your existing website and and identifying content needs is very useful for any project. 

Create a Content Audit

Build a Sitemap

Sitemaps are hierarchical tree structures typically starting with your homepage, branching out into each succeeding level of navigation.

Develop a Sitemap

Define Page Goals

Draft content sketches for pages in your sitemap and define the user tasks that will hit these pages concurrently.

Draft content sketches

Construct a website strategy

1. Start with a simple statement of intent 

  • What is the purpose of your website? Do you have goals and objectives for your website?
  • Who are you hoping to reach? (It’s expected to have one group or many.) Do you have goals for your users?
  • Do you have an idea of the scope of the project?

2. Decide who needs to participate in your project and how 

You will want to identify:

  • Decision Makers: individual(s) that need to approve the content and site
  • Stakeholders: individual(s) that need to be informed about the project and its progress
  • Doers: individual(s) that will write content, design the UI, build or rebuild in the website content management system,
  • Project Manager(s): individual(s) that will own the project and facilitate its progress etc.),

Also, think about how you think you could successfully communicate with all of these people.

Template

How to: construct a web strategy

Click on the link below for a template you can use to help design an informed website strategy. 

Constructing a Website Strategy
Example

Case Study: Importance of an Informed Website Strategy

Click on the link below to learn about the importance of an informed website strategy from from our projects.  

Importance of an Informed Website Strategy

Conduct an audit of your design needs

3. Evaluate what information is needed to build your website

User research

Are you hoping to learn more about your users and/or of the performance of your current site before you leap into execution on your new site? If so, you’re a great candidate for conducting user experience research. SWS often partners with teams at Stanford to help uncover and conduct the research that would be beneficial to your project. 

Review analytics 

If you are working from an existing site, you’ll certainly want to review your website analytics if they exist. This will help you learn about how your site has been performing up to this point. Just bear in mind that analytics will tell you what is happening, but they will not tell you why. Our team at SWS can help you with this analysis if that is useful to you.

Create a content audit

For those of you with an existing website, creating a content audit of your existing website is very useful, particularly if you plan to work with any of your existing content. (If you plan to scratch your existing site entirely, you could consider skipping this step, but often it can be easier to start from something, rather than nothing.)

Create a site outline

If you are starting anew, you may want to begin by outlining your website like you might a table of contents — this will be the beginning of the navigation for your website. If you are working from an existing website, you could start in a similar place by evaluating your current navigation to determine if it continues to be the right structure for your content (if you are working with an existing site, you can use this guide to automatically generate a map of your current site). In both cases, this will be the beginning of your sitemap. 

Draft your sitemap

Something to keep in mind as you work through this process, is that likely there will be many chicken before egg questions that arise. Should you look at your analytics before you develop your user tasks? Or should you start with your website goals? These are valid questions that are addressed in all projects. We recommend starting with information that is available and/or information can be efficiently gathered.

4. Develop a sitemap

Developing business goals and user tasks will start with the high level goals for your site, while you’ll want to keep your analytics analysis in mind as well. Each piece of the puzzle should be informed by one another.

Sitemap

With your site outline as a beginning point, you can now build out your sitemap draft. The navigation of your website, or the architecture of all of the pages on your website makeup your sitemap. Sitemaps are tree structures with the hierarchy typically starting with your homepage. Then each level of navigation includes its own branches.

Test site map 

Now that you’ve identified a potential sitemap, take your sitemap on the road and get feedback from potential users. Take your findings and iterate until you have a sitemap that works for your audience. 

If time and resources are limited this can be implemented once you’ve begun building out your live site.

5. Define page goals and draft content sketches

In step one you identified your high level goals and intent, now it’s time to define specific user tasks that help you meet your business and user needs. We find a method to make this work feel tangible is to draft content sketches for pages in your sitemap and define the user tasks that will hit these pages concurrently. For example, if your site goals ask you to increase online application by 20%, and you’ve identified an “Apply” page on your sitemap, you might begin drafting your content sketch for this apply page and the “user can apply easily” task will be a part of this sketch. You can also use our user goals and task analysis worksheet if you would like to start by creating a list of tasks detached from individual pages.

Design and Develop your Content

All websites are no more, and no less than the content they are made of. This can be the most daunting part of creating or recreating a website. Having lots to say, and having no idea how to input that content into the format of a website.

6. Create your content

Two big types of content

Today, we tend to see content broken down into two types. Content teasers and content details. Similar to the way you may have experienced holding a newspaper in your hands, teasers are the brief summaries of articles splayed on the front page with little notes to find the remainder of the articles inside the folded pages. Websites work like this. Content teasers summarize their content detail parents. Teasers include links to support users wanting to get to content details. Like this: 

Write for all audiences

When creating your content, you’ll want to think about the variety of audiences that will be using your site. For example, someone using a screen reader navigates pages by visiting all the focusable elements such as links and buttons; or by navigating the structure such as by headings, tables, and lists. In this case you want headings, links, and other elements to be descriptive enough to stand alone and still be easy to comprehend. 

For another example, a person with cognitive difficulties may have trouble processing the words on the page and benefit from having an initial summary of the content (sometimes known as a TL;DR)

Having well-structured and informative content will go a long way in making your site accessible for all audiences.

 

Next Steps 

Now that you’ve designed your web strategy and content, it’s time to put it to work. Here are some options for your next steps:

Additional tools, templates, and resources to support your UX workflow

Know what you don't know

If you are just getting started, the Research pages have some items that should help you discover what problems your users and service actually have.

Make it Accessible

It is never too early to think about Accessibility and plan how to ensure your service is truly available for everyone.

Design an experience to help your users

Know what problems your service has, the UX Design section has tools and resources to help you solve them in ways that make sense to your service's users.

Create visual hierarchies to support user needs

If you understand your requirements and are ready to start your visual or UI design, the Visual Design section can guide you to components and brand guidelines to speed up your design process.

Actionable content helps people get stuff done

The Writing for the Web section covers writing and organizing your content to make it easy to understand and actionable for your users.