The Elements of User Experience

In this post, I’ll give a brief overview of the key elements of user experience using a simple, theoretical application, called VeloSpark. My process is based on ‘The Elements of User Experience’ by Jesse James Garrett.

  1. Strategy — Define the business objectives and user needs.

VeloSpark is an application that helps users find the best running and biking trails in Colorado based on their personal preferences. The business objective is to build a minimally viable product that can generate ad revenue.

2. Scope — Define the specific requirements for content and functionality.

Content requirements:

  • Homepage, How it works, and Contact.
  • Ads for the results and result pages
  • Sitemap

Functional requirements:

  • Build an algorithm that can recommend trails for running and biking based on distance, elevation and Colorado city.
  • Create a form where the user can input distance, elevation, and Colorado city.
  • Display a list of results that includes trail name, distance, and elevation for each result.
  • Allow the user to click on a result to get more information including a trail map and link for directions.
  • Include a link on the result page, called ‘Back to results”.

Branding requirements

  • The app should adhere to the style guide.

Technical requirements

  • The app should be cross-browser compatible.
  • The user should be able to open the app in the browser and have the option of saving the app to their mobile desktop.
  • The app should base its recommendations on data gathered from Strava.
  • The ‘get directions’ link should open up Google maps auto-populated with the selected trail.

Projected release date

  • This is a minimally viable product, so all content and functional requirements should be completed by the first release date on …

3. Structure — define the basic structure of the application

For this step, I brainstormed a simple a diagram with paper and pencil. It’s a very simple application, only 1-click deep to get to every page.

4. Skeleton — Design the interface, including buttons, components and navigation. Design an optimal way to present the content. Group and arrange content so that users can understand it more easily. Include a sitemap.

For this step, I sketched out a rough interface with pencil and paper. This a great way to save time and vet ideas before committing to a detailed design. For the sitemap, you can do it yourself or use a third party solution —

paper and pencil wireframe
main navigation

5. Surface — Make sure the design is consistent, has recurring elements, follows the style guide, and is based on a grid.

For this step, I created a detailed design prototype in Sketch.

form, results, result, main navigation
Like what you read? Give Jessica Owens a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.