Android/Google Material Design

Class project Interactive Media 1

Design Objective

The objective of this project was to create an original product concept for a fictitious company while adhering to Google Material Design guidelines. In the end we would create a successful app that stands out from competitors, we would prioritize what parts of our app we will need to design, prototype our high fidelity screens, then perform usability test to determine future improvements. While we focused on how our app will look on mobile we also translated the screens into tablet designs.

Project Concept

For this project we all sat down as a group to discuss potential ideas of what we would all be interested in making. After brainstorming we all agreed that a travel app sounded like the most fun but we didn’t want to make just any travel app. Travel is becoming more popular and accessible, sometimes the options of where to go and what to see seems infinite. So, planning for a trip can become overwhelming with all the decisions and information out there. We wanted to create an app that helps road trippers plan, document, and reflect on their road trips. As stated in our press release, our app would “blur industry boundaries by allowing travelers to plan routes, document stops, and share their notes and photos in one convenient place. At the end of a trip, it presents users with an interactive, shareable, visual representation of their journey. Made for artistic and inartistic travelers alike, this blend between a travel planner and travel journal uses memory science, metadata, and design techniques to help adventurers visualize where they’ve been and where they’re going.”
To start this project we first did some competitive research. When looking into what was already out there we realized that there was only one other road trip app in the Android Play store. So we also looked into journal apps as we wanted to merge the idea of a planner and journal into one. Since there was only one road trip app we also researched different travel apps to see what we liked, disliked, and what ideas we could potentially incorporate into our app. Here is some of the competitive research we did:


Once we had our project concept and did some competitive research, we then dove into creating a press release for this new app we would eventually design.


Usability Research Highlights

Our group tested a total of six participants. All testing was done in person and all participants have gone on road trips in the past. The purpose of the testing was to assess the usability of the prototype app to see what could be improved and what is working well.
A few of the usability tests were conducted at the University of Colorado Denver, since the tested users fit our target demographics for the application. Additionally, some tests were conducted at home to test an older, well-traveled demographic. All participants averaged about five to eight minutes going through the app.
Participants were asked to complete a series of user task while explaining their thought process going through the app. The tasks they were asked to do were, Add a photo to your page, find day 2 of your upcoming highway 1 road trip, locate the map of your itinerary from the same trip, view your feed, and view your profile. All participants were recorded doing each task. After they were complete, users were then asked a series of follow up questions.

Questions that were asked were:
1. Was there anything that you found confusing?
2. What did you like most about the overall design or layout?
3. Do you think this would be helpful for a road trip and if so why?
4. If there would be anything that you would change, improve, remove, or add what might that be?

After testing was complete this is what we learned about our first prototype.
We found out that users were a bit confused by some of the functions in the application, following the tasks given, they would mistake some visuals of the application as touchable icons or actions to take them to other screens. The results also included enjoyment of the community feature along with approval of images used in the application and overall design. In general all users had positive reactions to the app and found it to be self explanatory and straightforward to use.
A few things the users struggled with during the test, and suggestions for improvement as taken from our usability report were:
1. Desire for more features in the application.
2. Lack of clarity on where the profile is, some had the urge to go home and find it versus looking at the info tab.
3. Confused about finding where the map was, minor confusion though they were still able to find it. As well as including a bigger map that can be seen and can be expanded for more clarity.
4. Adding a screen that says your photo upload is complete after you upload photos, two users brought up that it would be a nice feature so you know they were uploaded.

Overall, all participants had a 100% success rate in completing task 4 and task 5, while 66% of participants completed task 1 and 83% of participants completed task 2 and task 3.

From our testing we learned that if we were to continue to move forward with making our app better there are three main recommendations that we would focus on improving first. These recommendations were, improve the map aspect of the application and making it far more accessible. Then we would offer more options to users such as recommended aspects of the trip and options while on the road, such as food, gas, or other things that may appear on the map as you travel. Finally, we would add a confirmation message after the photos are uploaded. We would also look into if we could combine with already existing apps like TripAdvisor, Airbnb, or GasBuddy.

Usability Report



We then made a persona based on our research to create what we think would represent the ideal user of our product. This persona would help guide our design and process. Here is the persona we created for this project:

High Fidelity Screen Designs

We started by sketching out and writing down what pages we thought were the most important pages in order to get our ideas across to users. We then agreed on a color pallet and typography that would be used across all pages and adhered to the Google Material Design guidelines. From there we then divided up the work and each made one to three pages that would then become our prototype. Here are some of the page designs we created:

Adaptive Design – Tablet

We then adapted at least three of our mobile designs to show the translation of mobile app to tablet app. Here are three of those adaptive tablet screens:

Interactive Prototype

Here is a link to our prototype on MarvelApp where you can try our prototype yourself:


What did I find most challenging about this project?

The most challenging thing I found about this project was time. We were given way less time to complete this project compared to other projects. The limited amount of time I feel caused our project to not be as well thought out and made as we originally hoped it would be. Since on a time crunch we only made the pages we thought were absolutely necessary to get our idea across but when testing people wanted to explore every aspect of the app. They would try and click on things that were not fully made yet. If we had more time, I feel like our overall prototype would have turned out way better than it did and we would have been able to add other features we had in mind but were too ambitious given the time we did have. 

What was also challenging was the user testing as most of the users we tested were avid Iphone users. They understood that it was an Android app but still made comments that were more related to Apple Human Interface Guidelines rather than Google Material Design guidelines. This could have been improved if the participants we choose were more Android users but I feel like some of the designers in charge of user testing kept forgetting that we were designing for Android and not Iphone.

What was the most valuable lesson I learned?

The most valuable lesson I learned is that communication is everything especially when we did not have the time as a group to meet in person and that some people work better if they have daily reminders of what they should be completing in order to not fall behind. If communication fails then ideas and requirements get lost in translation. Since most of this project was done over text communication rather than in person, communication was vital. However, I feel like no matter how much you try to communicate with your group, if you are not doing it in person, it is hard to get your ideas across to everyone in a way they will understand. Overall, I feel like I learned how to work better in a group environment and enjoyed how our app turned out even though there is a lot I would probably change if given more time to work on it.