Dec 18, 2020
National Park Mockup Case study
Utah is home to 5 large national parks, and I was assigned to create a mock-up of what an app could look like for one of them. It needed to be something that engaged and informed the users and provided a better experience. Having visited some of these parks, I excitedly went to work. With this energy, I ran headfirst and full throttle into my first mistake.
The design process
Every year my wife’s family takes a trip to southern Utah. We spend about a week exploring and relaxing in the winding branches of Lake Powell. Having had experience with this area, I began plotting out ways I could make the experience better. Ideas rushed to my head as I paced around the kitchen table and within two hours I had a complete list of the content and structure of the app. Pleased with my work, I called up my wife to talk about my ideas and show off the work I had done. She informed me that I was an idiot and that I was about 100miles off. In my excitement, I mixed up Bryce Canyon with Glen Canyon (where Lake Powell is). Square one again.
I managed to recuperate and chose an ACTUAL national park; even one that I had been to previously. I settled with Zion National Park and began work again. Fortunately, not all was lost and a lot of my objectives and Ideas carried over. I began with refining my goals, this way I could avoid feature creep and not have to worry about bloating the app with too many pages. It also helped to keep me focused since time was not something I had a large quantity of. I decided that my main goals would be removing some of the hassle and frustration of figuring out what to do while at these parks.
With my objective in mind, I moved on to how I wanted the app to look and feel. Zion is home to some very vibrant and bold colors and I wanted some of that for the app. I pulled up some images of the area and began picking colors from it till I found some that I liked and matched the tone. I wanted the typography to have the same sort of bold, adventurous feel as well so I headed over to google fonts and began to browse. I finally landed on using the display font lobster for headers and Montserrat for legibility.
One of the main things you need while down in these parks is a map. I wanted this to be one of the main portions of the app with a lot of the app based around it. I just couldn’t find one that was super easy to read and understand. So photoshop time it was! I began by removing the elevation and geography from the map. My end goal was to have something that you could look at, and know how to get around the park quickly. This meant making the roads and trails easily visible. I removed a lot of the distracting colors as well so I could add my own to simulate “traffic” and made the font a lighter shade so it wouldn’t draw your attention too much. I was pretty pleased with the end result even if it was only about half of the park, it was still enough to get the idea across.
Another error I made along the way was I wished I had consolidated all of the information beforehand. This would have made it easier to figure out which data was useless for the design beforehand instead of by the end. For instance, on the hiking page of the app, there is a whole line for if the trail is dog friendly. On the Zion website, they have this in their data as well so I assumed that it would be important and thought It was a pretty cool idea to let people know. In my design, I left a space for it underneath each trial. It was only the first trail that was pet friendly.
A challenge I have in my designs is using color. I’m not color blind or anything but I just naturally gravitate back to grayscale. I try to dabble in it but I just always think it doesn’t look right and revert back to black and white with a splash of color here and there. Seeing as how I set out to reflect the bold colors of the area in my design, I tried to push myself into using it more.
I didn’t want the prototype to be just a stiff set of images, I also wanted to play around with the interactivity. XD states are now some of my favorite things. If you’re unfamiliar, in adobe XD you can make an element into a component. By doing this it allows you to copy it over and over again and when you edit the master, you edit all of them. A bonus to the components is that you can assign them different states. Once a new state is designed, you can use the prototyping tool and set interactions to link the two together. This is how I added my hamburger menu and the toggleable buttons in settings. I also played around with XD’s new-to-me feature of scrollable groups. I was able to pull off the map by adding a large image with all of the icons inside a horizontal and vertical scroll group and got it to work like how you think a map would work.
App Walk-through
On the home screen, I wanted the layout to be useful and make the three main pages(map, hiking, and activities) easily accessible. I also wanted some cool, immersive features that would better help with the engagement of the park right front and center. This is where the weather and feed are located. With the live feed, the idea would be that you could receive notifications if there was bad weather incoming, bus delays, some sort of emergency warning system, and even deals with the lodge and other shops in the area. I tried to treat both of these as not being too intrusive. The weather is in a small icon in the top left and the notifications can be swept away and are mostly transparent. The idea was to have the background image and navigation because people are visiting to look at how pretty nature is and this app should help enhance the experience, not get in the way. For the background, The image would change out periodically similar to the Window’s lock screen, and a little icon allowing you to see where in the park the picture was taken.
I divided the pages up into two groups. The main three and the secondary pages. The main three would be the main content that people would be getting on to see and the secondary would receive far less traffic but still be needed. I divided the app into this structure:
Main: Hiking, Map, and Activities
Secondary: About, Places to eat, and settings
I figure the largest reason people would be using this app would be to figure out A.) What to do and B.) How to get there and chose the top 3 to reflect that decision. While designing all of these pages, I really strived to make them feel uniform and part of the same app, while still looking visually different enough that you could tell what page you were on without looking at the title. It was a bit of a challenge but one that I think I accomplished.
discussion:
How would you design the app if you were given this prompt? What would your thought process be compared to mine? You can check out the interactive design here and see what you would do differently and what we would do the same.
