Mock Capitol Reef App
My Process for App Design
Note: I used images from both the National Parks Capitol Reef site, and the Wayne County Capitol Reef website for this mock up. This mock up is for educational purposes and to expand my skills as a web designer.
In this project, I took on the persona of someone wanting to make a preview of an app for Capitol Reef National Park for the purpose of being hired by the National Park Services.
Brainstorming & Research
To get an idea of what kind of structure I wanted for this app, I went through the National Park’s Capitol Reef Website. Based on what I saw, I thought of creating the app to do the following:
- Park Highlights
- Activities
- Games
- Trip planner.
I created a possible structure and user flow on paper based on what I wanted in the app, as well as what I found on the Capitol Reef website. This was where I found out that my scope was a too big for a preview app, and I would need to find ways how to design less while hinting that there could be more.
I took my structure and sketched only a few of the different pages I wanted to include, then moved onto Sketch where I would make higher fidelity wireframes. I looked up different kinds of app designs from other national park apps for inspiration, and since I had a pretty good idea what to do, I didn’t spend as much time paper prototyping.
Styling & Assets
Colors
I need to create styles and find fonts for this app. I used the colors directly from the logo I took from capitolreef.org and used those throughout all of my design. The more saturated orange was used for headers, and spacing, and the less saturated orange was used for buttons. The cream color was for the background, grey was used for icons, and the dark grey was for menus.
I also used the logo itself for this design, so the logo isn’t my own design. For fonts, I mainly used the Catamaran font, and lightly used Century, and Trirong fonts.
Images
I took images directly from the Capitol Reef National Parks website, and made them headers for some of the sections of the app. I usually like to use my own pictures, but the only National Parks pictures I had of my own were from Zions. I figured that since this was a mock app for the National Parks, using their assets would make sense.
Icons
I had to have some icons. I made some of them, but took most of them from free icon sites. I made the home button using Illustrator. The hamburger menu and info button were created in Sketch, and other icons like the sound icon, and caption icon were found on Flaticon.com. I also found the gear icon for settings at Pixabay, but they since then removed the gear icon. I also found the constellation icon online.
Designing in Sketch
I put together all my images, and sections of text from the National Parks website itself into different pages. I simplified the structure of the app, and created points of progressive disclosure, adding “more” buttons to give hints to more information without adding more pages or length to my pages to the design.
Throughout designing the app, I made sure to make symbols for different design components that were the same throughout the design. I made these mainly for the top navigation and bottom navigation, and buttons, and just made groups out of everything else, making sure to change their names so I know which components I’m editing. I also named my artboards to match my structure, and so that when I put together my prototype in Invision without getting confused.
I’ll show my design and thought process for a few of the pages I designed. I have included a link to my Invision prototype of my design at the end of this article.
Sign In Page:
Since there were settings and games in my final design, I thought that having a log in to save the information would make sense. I designed this based on my knowledge of material design.
I also added in a Facebook login button as that could be useful to let people sign up easily. I designed the sign in page, but didn’t design a way to create a new account. That would be something I could do for a future iteration.
I also added the capitolreef.org logo to this, as well as an image found on the Capitol Reef National Park website. To avoid using a scrim on the image, I made a transparent white box behind the typing fields and buttons, using it to group all those items together.
Home Page:
The home page would come up after logging in. I designed it to imply that the header image would be in a carousel. The idea with the header image was to have them be clickable, but it wasn’t made apparent in the current design, which is something that could be improved in the future.
I also had different menus depending on what you wanted to do. I had a hamburger menu to include routes to the four routes History, Nature & Science, Dark Sky, and Leave No Trace, as well as adding links to Things to Do, and Things to Know. I also designed the Info Page that could be brought up by clicking the “i” icon.
The menu on the bottom could be greatly improved as far as icon similarity goes, and leads to home, the Capitol Reef map, a constellation game, and settings.
Article Pages:
The History, Nature & Science, Dark Sky, and Leave No Trace parts of the app were articles . Out of the four of these, the History and Dark Sky pages were the most Unique. For the Dark Sky, I scrimmed the night sky image with black, so it could flow into the black background.
The history page had the most uniqueness due to me adding implementations of sound, and a map line that ran town the entire page. I made sure to design for accessibility to include reading snippets for people to read instead.
At the top of each section, I added a header that I took from the Capitol Reef National Parks site, ad added a transparent white scrim over it.
Game Page:
Something that I didn’t design all the way but I figured would be a nice concept to showcase to the National Parks is the idea of a mixed reality night game. I put on this that this would be concept only, but I did look into how to make this possible in an app. I would take a bit to work, including getting proper APIs to access their device’s gyroscope and camera, location, and APIs with constellation, star, and other night sky data. Also, something else to think about is that if doing these activities as Capitol Reef, there is little internet access or data available there, but that could be fixed using raspberry pis.
Final Prototype
After making all the pages, I used the Craft plugin to sync my Sketch artboards to my project in Invision. I linked the artboards together with tappable hotspots so that menus could open and close, and all the pages flow correctly. If you would like to view the complete prototype, you can click here to view it.
Final Thoughts & Takeaways
This was the first app I created from scratch, and I enjoyed the process. In future iterations, I would want to make a new logo of my own design, and flush out a few more pages. I would also want to redesign the icons in the bottom navigation. There is a lot I could improve, which is a good thing. Since I am currently working on making a website for Capitol Reef in a separate project, I can use what I learned making this for the website we will create.
Thanks for reading!
Chelsea Stamm is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web Design and Development. The following article relates to the Final Project in the DGM 2270 Course and is representative of the skills learned.
