MuseNav — UI Design Project

Background & Design Requirements

MuseNav is a concept for a museum navigation app for Android and Wear OS that I designed as an assignment for my User Interface Design class. Starting from initial pencil drawings, job stories, and design critique, I used Sketch and Affinity Designer to create storyboards for both the medium-fidelity wireframes and the high-fidelity mockups.

For the assignment, I was to imagine that a museum had tasked me with creating a mobile and watch app that would help visitors navigate their halls. The user must be able to complete the following tasks:

    • Get information on current room/area

    • Select a room/area to navigate to

    • See next navigation step

    • See floor map with room names/numbers

    • Search for room, contents, keywords, etc.

    • See a list of all navigation steps

    • Get information on current room/area

    • Select a room/area to navigate to

    • See next navigation step

Job Stories

I created 3 job stories that helped me understand the possible motivations, anxieties, contexts, and goals of potential users of this app. These job stories addressed hypothetical scenarios where a user would want to "hire" my app, as well as the potential competitors for their attention and utility. My job stories dealt with such scenarios as wanting to see only the most famous exhibits, looking for things to do while visiting a new city, and trying to hit one last attraction in the city before catching a flight back home. 

Rather than filling out these job stories with a specific app or solution in mind, it was far more important to be able to identify what users would be thinking and feeling in these scenarios. Competitors may not just be alternative technologies, as in my case they could be paper maps, other landmarks or museums, or just visiting a coffee shop as a different way to pass the time.

Low-Fidelity Sketches

I started the design process by sketching my initial ideas down on paper. Since I already had some familiarity with Google Material Design, I knew the basic structure of the app and created a header bar and bottom navigation menu. I took influences from other Google apps such as Gmail and Google Maps in the layout and functionality, and made sure that the user could perform every task for both the mobile and watch versions.

Design Critique Session

I showed these sketches to my class during a design critique session, where classmates would go around and provide feedback on each other's initial sketches and wireframes. Every piece of feedback was structured so that when a classmate viewed another classmate's project, they would single out one element from that project as either effective or not effective in meeting one of the project requirements or objectives, and explain their reasoning.

Here is some valuable feedback I received and how I accommodated their critique into my project.

  • If the objective is:​ To see information on current room

  • Then this design element: ​Tapping on 'My Location'

  • IS NOT effective because: T​he button doesn’t seem like it would do the task, makes it look like something else

Changes made to design: ​I replaced the “my location” icon from Google’s standard one to the one that looks like a pin with a question mark. Even though the name of this new icon is “not listed location”, I think the design accurately conveys the meaning of “finding out more about your current location” faster than the abstract “wheel” design of the standard “my location” icon.

  • If the objective is: Orient users through the museum based on their current location 

  • Then this design element: Defaulting to the first floor

  • IS NOT effective because: You’ll encounter the same problem as using Google Maps in a mall, nav/GPS can’t distinguish floors, makes it hard

Changes made to design: I agree with this point that GPS cannot distinguish which floor you are on. I have therefore eliminated the floor dropdown menu entirely in the mid-fidelity mockup and I am assuming that the museum has one huge floor that is really difficult to navigate. This is so that the “Current Location” page can still work based on the user’s GPS signal, and the complexity of the museum’s layout maintains the necessity of having a navigation app in the first place.

  • If the objective is: To present visually with how many navigation steps users need to follow regarding navigation

  • Then this design element: The pagination element

  • IS NOT effective because: It might not fully fit mobile screen when a large amount of steps is required 

Changes made to design: Circles replaced with a progress bar in mid-fidelity mockup to accommodate any number of steps, and high-fidelity mockup provides the additional feature of showing the whole navigation path all at once.

Mid-Fidelity Wireframe and Storyboard

With the mid-fidelity wireframe, I used Sketch with the Google Material Design plugin to create screens that are closer to real mobile and watch apps. I added a "Location List Settings" modal as a replacement for the tabs at the top of the location list in the sketches. I exported the wireframes from Sketch and created a storyboard in Affinity Designer describing the "happy path" a user would take in using the app.

High-Fidelity Mockup and Storyboard

The high-fidelity mockup stayed close to the mid-fidelity wireframes, with some exceptions. I added a splash screen displaying the golden-ratio inspired logo of the app, now called MuseNav, so the user would have something pleasing to look at while the app loads. The dominant color is purple, with various shades and tints used throughout the app. The biggest change was in the design of the Wear OS watch app, which adheres more strictly to Google's design guidelines than the wireframes. The mockup screens were made and exported in Sketch, to be assembled in Affinity Designer for the final storyboard.

Design Guidelines and Philosophy

For this project, I decided to stick pretty closely to Google Material Design guidelines. I wanted to simplify some of the features I had seen in other navigation apps in Android. The user can see information and pictures about their location, because the app is for a museum and learning is one of their primary goals, so each location should be rich with content on the mobile and watch apps, but they should also prompt the user to explore the room. 

The location search process provides multiple sorting options so the user can explore a list of locations leisurely if they wish, but also the search bar lets users search with relevant keywords if they want to find one location quickly. The step-by-step list should be clear and concise, describing the action to perform and the direction of travel based on relatively close locations, because inside a building it is difficult to orient based on compass directions. Different users can switch between a full list of steps and individual steps in a wizard with images following the path of travel. 

Colors and Fonts

The color scheme of both apps is broadly an analogous monochromatic scheme of purple tints and shades, with an additional monochromatic scheme composed of black, white, and gray tones for most text and icons. I decided on purple because it is a very royal and regal color, which is appropriate for museums housing artifacts and art from different civilizations. I went with a monochromatic scheme because I wanted the brand color to be a constant throughout the app. Due to the relatively simple tasks the user performs, and the other colors present in the images, having a consistent monochromatic color palette helps to ground the user.

For Android I used the Roboto typeface, while for Wear OS I used the Roboto Condensed typeface.

    • Primary Color: rgb(123, 31, 162)

    • Secondary Color: rgb(173, 116, 197)

    • Background Color: rgb(255, 255, 255)

    • Active Text/Icon Color: rgb(0, 0, 0)

    • Disabled Text/Icon Color: rgb(158, 158, 158)

    • Primary Color: rgb(156, 39, 176)

    • Background Color: rgb(90, 22, 102)

    • Primary Text/Icon Color: rgb(255, 255, 255)

    • Secondary Text Color: rgb(189, 161, 193)

    • Splash Screen Logotype: Roboto Light 60 pt

    • Headers and Headlines: Roboto Medium 20 pt

    • Info Section Header: Roboto Bold 16 pt

    • Text Fields and List Items: Roboto Regular 16 pt

    • Subtitles: Roboto Regular 14 pt

    • Buttons: Roboto Medium 14 pt

    • Captions: Roboto Regular 12 pt

    • Navigation Step Header: Roboto Regular 48 pt

    • Navigation Step Subtitle: Roboto Regular 34 pt

    • Header: Roboto Condensed Bold 14 pt

    • Location Title: Roboto Condensed Regular 20 pt

    • Info Section Header: Roboto Condensed Regular 16 pt

    • Body Text, List Items, and Buttons: Roboto Condensed Regular 14 pt

    • Captions: Roboto Condensed Regular 12 pt

    • Navigation Step Header: Roboto Condensed Regular 16 pt

    • Navigation Step Subtitle: Roboto Condensed Regular 14 pt

Image and Media Credits

All icons, images, fonts, and components not otherwise listed here are from Google Material Design (https://material.io/).

Constantin Hansen [CC0 1.0 Universal (https://creativecommons.org/publicdomain/zero/1.0/)], via Wikimedia Commons. https://upload.wikimedia.org/wikipedia/commons/3/35/Et_selskab_af_danske_kunstnere_i_Rom .jpg. 

Federico Barocci [Public domain], via Wikimedia Commons. https://upload.wikimedia.org/wikipedia/commons/f/f7/Aeneas%27_Flight_from_Troy_by_Federic o_Barocci.jpg. 

Husky [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons. https://commons.wikimedia.org/wiki/File:Teylers_Museum_map_(English).svg. 

Jastrow [Public domain], via Wikimedia Commons. https://upload.wikimedia.org/wikipedia/commons/0/0c/Herakles_Laomedon_MCA_Valle_Sabbia .jpg. 

Metropolitan Museum of Art [CC0 1.0 Universal (https://creativecommons.org/publicdomain/zero/1.0/)], via Wikimedia Commons. https://upload.wikimedia.org/wikipedia/commons/c/cd/%E5%8C%97%E9%AD%8F_%E7%9F% B3%E9%9B%95%E7%87%83%E7%87%88%E4%BD%9B%E5%83%8F%EF%BC%88%E7%A 0%82%E5%B2%A9%EF%BC%89-Buddha_Dipankara_%28Diguang%29_MET_DP164037.jpg. 

PericlesofAthens at English Wikipedia [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons. https://upload.wikimedia.org/wikipedia/commons/2/26/Emperor_Minghuang%27s_Journey_to_S ichuan%2C_Freer_Gallery_of_Art.jpg. 

Pixabay [CC0 1.0 Universal (https://creativecommons.org/publicdomain/zero/1.0/)], via Pexels. https://www.pexels.com/photo/art-blue-brown-cafe-459489/. 

Public domain [CC0 1.0 Universal (https://creativecommons.org/publicdomain/zero/1.0/)] via Pxhere. https://pxhere.com/en/photo/1527305. 

Public domain [CC0 1.0 Universal (https://creativecommons.org/publicdomain/zero/1.0/)] via Pxhere. https://pxhere.com/en/photo/638147. 

Thomas Quine from Vienna, Austria [CC BY 2.0 (https://creativecommons.org/licenses/by/2.0)], via Flickr. https://www.flickr.com/photos/quinet/16955206670. 

Thomas Quine from Vienna, Austria [CC BY 2.0 (https://creativecommons.org/licenses/by/2.0)], via Flickr. https://www.flickr.com/photos/quinet/30144136261. 

Tilemahos Efthimiadis from Athens, Greece [CC BY 2.0 (https://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons. https://upload.wikimedia.org/wikipedia/commons/e/e1/Egyptian_Artifacts._National_Archaeologi cal_Museum%2C_Athens%2C_Greece_%283210631774%29.jpg. 

World Imaging [Public domain], via Wikimedia Commons. https://upload.wikimedia.org/wikipedia/commons/b/bb/Japanese_artifacts_of_the_Chassiron_col lection_at_Orbigny_Bernon_Museum_La_Rochelle.jpg.