Designing a Mobile Prototype
About a year ago I was tasked with designing a mobile app. The design required me to make a prototype using Invision so that I could perform some usability testing. I would use the results of this testing to make improvements to the final design of the app. I designed a hiking app called Hike Tracker.
I started by thinking of a problem I could address with a mobile app. I thought about different activities in my life and which ones could benefit in some way by having a mobile app add to the experience of that activity. One of my favorite hobbies is hiking. I thought it would be great to have an app that keeps track of hiking data, such as distance hiked and elevation gain. Those are two things I am always curious about while I am on a hike. I also thought of ways that a mobile app could make hiking safer. The two ways I thought of would be if the app recommended how much water to drink based on the difficulty of the hike and if the app calculated when you needed to head back to return before sunset. These were some of the main features I incorporated into my app but here is a list of all of the features.
- Functionality without cell phone reception
- Navigational Map
- Statistics Page
- Page that calculates if the hiker can return to their starting point before sunset
- Altitude Graph
- Fitness page that calculates how much water should be consumed to stay hydrated
- The ability to record hike information and save for later viewing
- The ability to access all previously saved hikes
After I had defined the features I wanted to include, I thought about who my target audience was. I categorized hikers into three different types. I labeled hikers as casual, moderate, or hardcore. I interviewed several people and asked them about how they hike. The vast majority of the people I interviewed described themselves as moderate hikers. Some of the other questions I asked reinforced this label. I decided that moderate hikers would be my core demographic, followed by casual hikers. Hardcore hikers were my least important demographic because most would probably own a handheld GPS device and based on my interview responses, nobody I interviewed described themselves as a hardcore hiker. In hindsight, it would probably have been better to determine my target audience before I had decided on a feature list. Initially I was designing what I wanted in the app and not thinking enough about what potential users of the app would want. I made changes throughout my process to better accommodate user desires based on the feedback I received.
Now that I had identified the target audience and I had decided on the features I wanted to implement, it was time to create a site map for the app. This would determine how many screens I needed to design and force me to organize the layout of my app.
I decided to incorporate a hub and spoke model for the navigation of the app. All but two menu options did not have any secondary screens. Because of this, I felt that this model was the best option.
A Look at the Primary Screens
If you are interested in seeing the app in action, check out the link towards the beginning of the article. Here I will highlight a few of the main screens. The main feature of this app is keeping track of hiking statistics. Here is the statistics screen for the app.
I used a 3 x 3 grid to lay out the information. I organized each row of statistics based on the category of information. The top row has to do with distance and speed info. The middle row displays altitude data and the bottom row includes time info.
This screen would be the screen most frequently viewed while on a hike because it displays the most relevant information.
The most important aspects of the Statistics screen are that it is organized logically and it is easy to read quickly. I feel like my solution accomplished both of those goals.
Another primary screen is the Time to Origin Point screen.
The Time to Origin Point feature is one of my favorite things about this app. The app calculates if the hiker can make it back to the starting point before sunset.
The app uses the elapsed time and adds that number to the current time. If the result is before sunset, then the app displays a thumbs up icon. If the result is after sunset, it displays a thumbs down icon.
This particular feature would be great to have on a hike and it would not require cell phone reception or a GPS signal in order to function. This would be a great safety feature as hikers often do not pack flashlights for day hikes.
The final primary screen I will discuss is the Fitness screen.
The Fitness screen displays important health tips and tracks fitness data. Starting at the top of the screen the app displays the hike duration, how many steps the hiker has taken, and an estimated number of calories burned.
Below that information is the most important health tip. The app calculates how much water the hiker should drink based on the duration of the hike and the hiking conditions. There is a different recommended rate of water consumption for hot, humid, or high altitude hikes than there is for mild or low altitude hikes.
And finally, below the water intake information is a series of hiking health tips that display on the screen one at a time.
User Testing
Once I had designed all of the screens, it was time to put them into an Online program called Invision. What’s great about Invision is it allows you to easily create a functional prototype by adding hotspots for users to click or tap on. These hotspots allow the user to navigate between the different screens or pages of your app or website. After I created the prototype, I sat down with a few friends who enjoyed hiking and asked them to do a series of tasks with the app. I timed how long it took them to do each task and notated if they made any errors. The results of the test is shown below.
I asked my test group to perform four different tasks.
- Start a new hike, stop the hike, and then save the hike. Then return to the main menu.
- Determine if you should be able to return to the start of your hike before the sun goes down with the information provided. Then return to the main menu.
- Find out what time you started your hike. Then return to the main menu.
- Determine the elevation gain of your hike. Then return to the main menu.
Out of these four tasks, the first two tasks were difficult for the first two people I tested. The first task which asked the user to start, stop, and save a hike proved difficult because there was not a clear indication that the hike had been saved. I modified the saving process to give a visual indication to the user once the hike had been saved. I also made some changes to the Time to Origin Point page to make things more clear.
Designing this mobile app gave me valuable experience. Beyond the design practice, I learned a lot about designing something for real people and getting feedback from them. Had I not taken the time to get perform user testing, the final app would have been more difficult to use. There is no way that I could have made appropriate changes without performing user testing. Overall this was a worthwhile experience and I had a lot of fun along the way.
Russell Andlauer is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to Designing a Mobile App in the DGM-2240 Interaction Design course and is representative of the skills learned.
