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:
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 siteEvaluate 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
All websites are no more, and no less than the content they are made of.Design and develop content
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.
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
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
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.
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.
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.
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:
- Have you tested out your sitemap?
- Do the sitemap and content sketches help accomplish your goals set forth earlier? See our tips for building a sitemap
- Do you need stakeholder approval? See our tips for identifying project participants
- Create and build out your Stanford site. Get Started with Stanford Sites
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.