Arches Access App

Kenadee Telford
9 min readMay 6, 2021

Here is a recap of the creation of my Arches Access app design.

I started out this project by looking through each of the different parks of Utah and deciding which one resonated with me the most. I absolutely love Arches National Park and have frequently visited it, so I decided to do my project based on it. After deciding on the park I wanted to base my project on, I decided to make a game plan of what I needed to do.

  • Decide on park
  • Brainstorm/decide what the contents of the app should be and what it’s purpose is
  • Research the park and the content that was decided on.
  • Sketch out rough ideas of what pages would look like
  • Make a style guide
  • Start building in Sketch
  • Import pictures and information
  • Start prototyping pages together through Sketch
  • Proofread and double check my work
  • Test final product

After I decided on my park, I brainstormed about what I wanted the app to consist of. There are so many different things that you could make an app on, so I decided to make it contain information that would be useful to hikers or people wanting to do activities in the park. I wanted the main contents to be trails and sights throughout the park as well as the different activities you could do throughout the park. The goal would be to have a page dedicated to each arch or notable feature of the park and a page dedicated to each different activity you could participate in with an option to book it or contact the company that takes care of the activity. It would also contain a contact page as well as an Arches Pass where you could scan your national park pass without having to carry the physical copy around. The pass would also contain any bookings you schedule on the app for activities. It would eliminate the need for paper, which is great for a national park and the environment.

Some of the original brainstorming I did before starting to design the app.

I started to research the park and the different sites to start off. I decided to choose 6 of the arches that were most notable throughout. They were Delicate Arch, Devil’s Garden, the Windows, Broken Arch, Park Avenue, and Balancing Rock. After that, I researched basic descriptions of each sight and then made a list of the different trails located around that location. I made note of the difficulty, length and time it would take to complete it. I thought that would be great information for hikers looking to choose different hikes, so I made sure to include it. I also made sure to include if it was accessible for people with wheelchairs or disabilities because it is also really important to be inclusive to everyone.

Some of the information I looked at for research.

I found a map of each location that included the surrounding hikes that I was able to include in the app. For activities, I chose 6 main activities that could be done throughout the park. I made sure to note a brief description, if you needed a permit or not, the different locations you could participate in it in and possible contact information for different activity companies if needed to book. Most activities around the park needed to be booked through a company or need a permit to climb/hike. I also researched contact information for the park itself and what a pass for a national park consists of.

The site map for the Arches App

After getting a better idea of what I wanted the content of the app would be, I sketched out a site plan. I then sketched an idea of what each page could potentially look like and what I wanted to include. This gave me a good idea of how I wanted to start building my app in Sketch.

Activity and Sight page sketchings
Booking and Pass sketches
Style guide for Arches App

I took my drawings and started creating the app. Before I started designing, I created a simple style guide with colors I wanted to include and the fonts I wanted to use. After deciding on the style guide, I was totally ready to go.

Each page before I started filling it with information.

I started by creating a header and then inserting pictures and titles that I wanted each page to consist of. This gave me a framework to work with so I could stay organized through the process of this project. I made a page for each activity and landmark within the park. I then started filling each page with the appropriate information and designing as I went. I put a picture with the title of the famous arch and then proceeded with the trail names and information. I made a box with the important information about the hike so readers could easily access it. I then included a map for each page so that the hiker could also find the landmark. When you click on the map, it takes you to a full map so you can see more details if needed.

I made it so you can choose what landmark you wanted to look at from a menu of pictures. The park is very visual so I wanted to keep it that way. I also made it so the activity page was similar. You can click from a grid of activities and it will take you to a page about the chosen activity.

The menu selection for Activities and Sights
The page for Hiking and then the page it goes to when you click “Buy Now”

The activities included information about the activity as well as options to purchase a permit. When you choose to book a tour/buy a permit, it takes you to a page where you can buy it. I designed the purchase pages using the National Parks website and recreation.gov. I used the information they asked for when making purchases and edited it to match whatever permit/pass I was designing it for. Having that resource was really helpful when writing out specifics of the permit pass, such as location and how much the passes cost.

Because the passes are such a crucial part to the experience at Arches National Park, I decided to make a feature where you could scan a barcode on your phone and automatically be let in to the park. The barcode would also contain your permits or bookings. This keeps everything organized and paperless. I love to hike and visit the national parks so I would absolutely love to have this feature on my phone. It would make keeping track of my information really easy!

Confirmation page example and the Arches Pass itself

When you finish buying the permit, it takes you to a receipt page. You can access your pass after purchasing it, it allows you to go directly from the confirmation page to the Pass page. This makes it easy for the user to access their passes and information right after the buy it in case they need it immediately!

Because the passes are important, personal information, I decided to also make a login feature. When you first purchase a pass through the menu page, it makes you create an account to keep your information secure. It then takes you to a login page after you make your account. Logging in will let you access your Arches Pass! I thought this was super important since so many people value their internet security and this is just an extra step.

The login pages I decided on. Simple and to the point!
Contact page with the social media icons I decided on.

After I finished designing each Activity and Sight page, I worked on the contact page. I included the phone numbers of the park rangers as well as the mailing address. I found social media icons that fit my style guide and added those to really tie the look of the contact page together. They are linked to the actual social media accounts, but it definitely works for my prototype.

After I finished putting all the information into the pages and designing the bulk of it, I started to add small details. I changed font colors, added background images and then some silhouettes that match the different themes. I thought adding the silhouettes was a really nice aesthetic touch and added a lot of character to the pages. I perfected the style guidelines and made sure it looked really good from an aesthetic viewpoint.

Examples of some of the silhouettes I put throughout the app

Finally, once I was done with the design aspect of this project, I started to prototype my pages together. I made sure the transitions were consistent and the pages flowed correctly. I started with the sights and then concluded with the activities. Prototyping page by page allowed me to keep track of my progress and make sure I covered all my ground. After I finished prototyping all the correct pages, I proofread my pages and double checked the prototype to make sure it ran smoothly.

A picture of all the prototyping done for one section. I double checked it by pulling up the movements for each page all at once.
Jacob (my husband) going through the app and talking as he goes.

Once I was confident that my prototype was complete and perfected to my liking, I tested it out on my husband. He had not seen my prototype before, so I asked him to go through it and talk out loud. I made notes of what he said, and then went back and changed anything that He only made comments about design preferences and not any big problems, so I only made font changes.

This project was extremely enjoyable for me, I loved being able to come up with concepts from scratch on my own. It really tested out my own brainstorming and design process; it gave me total confidence in how I go forward with designs. I took control and took the necessary steps to make a really successful project. Looking at my project now, I would absolutely love to hand this off to a web developer. I think it would be so useful for people who go to the park regularly as well as people who are new to the park. It includes everything you need, without paper, which I think is especially awesome. I learned that practice makes perfect and the time you put into projects really shows. I was able to successfully go through the process of building this design because I made a plan and executed it step by step. The problems I did come across were if I tried to jump forward in the process. Before I created a style guide, I was winging the color scheme, so coming up with a style guide really helped guide my design in the right direction. Having a set plan gave me a lot of confidence so I definitely learned the importance of having one and not winging it.

I really hope one day that we can have immersive guides for all the National Parks on our phones. It eliminate the use of paper which is better for the environment in the long run. Life is better when you have everything you need in the palm of your hand and are benefiting the environment while you’re at it!

--

--

Kenadee Telford
0 Followers

UVU college student, web design major