Eliza Bush's profile

Design for Screens: Oregon Travel Guide

Designing for Screens
The ask: to design a travel guide prototype with at least 10 clickable screens, featuring six significant locations and three state-specific activities. 
For this project, we were tasked with creating an app for users to discover the attractions, go-to spots, and best-known features of a specific state. I was assigned to cover Oregon and started with a mood board to define my visual direction for the project. I wanted my design to be guided by Oregon's natural beauty through photographs. In my research, I found that many of Oregon's draws had to do with it's abundant nature, so I chose an earthy color palette, and rough, texturized type to pair with Oregon's outdoorsy vibe. 
Before starting to design in Figma, we created wireframes to work through the movement of the app. This was a part of the design process I had never done before. We created a rough outline for where each button would lead, how users would navigate between pages, and exposed issues in our app's usability. For example, users needed a way to get back to the home page from any screen in our app. We were able to work out the practical function of our app in our wireframes so that, using this template, we could insert our design elements to make a beautiful and usable app.
Next, we began designing in Figma. Once I started inputting my information, my wireframes became much more complex. With the amount of information I wanted to include in my app, I realized I would need much more than 10 screens. Thinking about the apps that I used most, I took note of some important assets to consider including in my own app prototype. 
With that in mind I wanted to create some kind of image carousel so that users could see an overview of their options before clicking around. I found a Figma tutorial to help me figure out how to make this kind of feature. This image carousel became the "locations home page." Here, users could see the most popular locations in Oregon and further explore the ones that interested them, rather than having to scroll through each location to get to the one they wanted. 
To make the app easy to navigate, I decided to give users the option to navigate between screens from each individual location page. Using this grid, they could click in-between locations, rather than having to go back to the "locations home page" to find the next screen.
When working in interaction design, it's important not to cut corners, for you will always end up sacrificing user experience. Users want apps and websites that are easy to navigate and help them get to the information they need, quickly and conveniently. Some design features can be difficult to work out, but add great value to your program in terms of usability.
After building the majority of our apps, we did "product testing" as a class to expose issues in our prototypes. As a classmate clicked through my app, I took note of features they struggled to navigate, buttons that did not achieve their intended purpose, and elements that may have been confusing. 
In the end, I had created a fully clickable travel guide app that could help users plan a trip to Oregon! I learned a lot about interaction design and by the end of the project, knew how to use Figma to make beautiful and practical digital prototypes. 
Explore the entire travel guide using the prototype below!
Design for Screens: Oregon Travel Guide
Published:

Design for Screens: Oregon Travel Guide

Published: