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.
- 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.
- Homepage, How it works, and Contact.
- Ads for the results and result pages
- 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”.
- The app should adhere to the style guide.
- 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 — https://code.google.com/archive/p/sitemap-generators/wikis/SitemapGenerators.wiki
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.