Description

Design a travel planner dashboard for a digital experience. The client can be a travel provider (airline, rail line, bus company), booking agency, or an independent organization. Include layouts for a specific device or screen, whether it be a laptop, tablet, or smartphone.

Research and Methodology

Consider functionality first. What’s important to you when traveling? Use this question to decide what to include and how prominently to display that content. What kinds of tasks would you want to accomplish? This will inform any actions that would link to other areas with the travel planner. Download a few travel apps and visit a few websites for inspiration to try to find a niche or useful feature that might be yet unexplored.

Intent

What do you think would motivate a client to create such an experience? There needs to be some sort of functionality to serve this need, and the goal is to incorporate it in a way that looks and feels consistent with the rest of the content. For instance, a credit card company might sponsor such a dashboard if it allowed users to see how their reward points might be used for travel.

Content

This can be borrowed to get started, but resist the urge to use generic placeholder text. Some headlines, sub-headlines, general copy, and instructive text for action items and menus will get you started.

Sketch

Draw some basic layouts based on what you’ve defined as important content and functionality. Spend some time making notes to label action items like buttons and anticipating the length of headlines and such.

Wireframe

Using your sketches as a guide, create wireframes that are sized for various end devices. Consider how much real estate you might have for content on different screens and prioritize content and actions for each. This will let you figure out the proper size of menus, buttons, and important call-to action items. Add increased space for media (photos, illustration, video) as you move up in size. It’s important to use the wireframes to glean insight before continuing. Input from someone who understands the process is ideal, but you can self-critique if needed. Walk through the experience by engaging with the visual content. Try to mentally complete actions that lead to new screens or processes.

Imagery

Find royalty-free stock photos or illustration to use for mock-ups: unsplash.com, gratisography.com, pexels.com, creative commons, public domain, etc. Alternatively, you can create this content yourself, but try not to spend so much time that it becomes a project itself.

Mock-Ups

Create digital mock-ups based on feedback from the wireframes, adding real media, color, typefaces, and fine-grain visual details. Repeat the walkthrough you did at the wireframe stage to confirm hierarchy, visual
flow, and consistency are in place. Make sure that commonly used items (logos and menu icons, for instance) are locked in place where they’re expected. Finally, make sure that whatever business goal you’ve incorporated as part of the intent works with the visual aesthetic.

Prototype

Link the static screens together using prototyping software. Add functionality to menus, make buttons tappable or clickable, and allow content to scroll when necessary. Test this across the actual devices you’ll be
using for the end product.

Analysis and Testing

Use prototyping tools to create an experience, starting with the smallest screen. Design two options, and have friends or family give it a try. Take notes. Let them use it straight away without too much explanation, because this could skew their feedback. Record their unsolicited comments and observe how they see and
interact with important bits of content.

Reflection and Revision

Were there any instances where the call-to-action for any screen or layout might have been overlooked? If so, how can the contrast be increased, and the focal point emphasized? Are there too many actions on a particular screen? Decluttering the interface might provide clarity towards visual goals. Does the visual intent from the perspective of a potential client make sense? Compare it to the products you researched at the beginning. Does it look real? Are there any obvious differences in terms of it being perceived as professional work?

Bonus Step

Export visual assets using development handoff software. Experiment with presets and the steps needed to package the project for final production.

Goals and Outcomes

A successful outcome of this exercise should be revealed by the reflection and revision stage. It should be obvious as to whether this visually communicates the importance of the functions you deemed
significant through your research and conceptual steps. It should be portfolio quality, meaning it should have the same visual finesse of the products you researched it against. The user interface should highlight actionable content, embrace consistency, and have a pleasing visual flow. The tie-in that you imagined during the intent step should represent a realistic business outcome from a client’s perspective. It should
also fit the visual needs of that client, meaning the branding should be on par with a client that’s tangentially related to this product. Have you imposed a visual style that seems at odds with the entire
experience? Use your holistic design lens to make sure it meets your own gut check.