The mobile tour app is harped upon in every preceding touchpoint, making it the most important portion of the journey. There were several areas of SF MoMA's existing application which I felt could be improved. I broke the areas down into groups by the action they perform: playing, searching, and way-finding.

Playing

My inspiration for the playing portion of the redesign came from popular music streaming service apps. The implementation of a collapsible play screen allows for the user to access other parts of the app while still listening to the audio from their tour. I also redesigned the closed captioning portion of the app, drawing from lyric pages on music streaming platforms, which slow feed you lines as the track progresses. The feature can be toggled to a full text view for those with disabilities and screen readers to more easily follow the tour at their own pace.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fe92f37f-3aeb-4616-8683-fac8b440bb19/IMG_7123.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8f0aaaad-9fd5-4c85-b616-981f9826e71c/IMG_7120.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1ada4834-8ea4-487c-b5de-b4de0a1e7c3d/IMG_7124.jpg

The bold red color from SF MoMA's original identity acts as a perfect backdrop for the app. The white buttons command the users attention and feel actionable. The addition of an airplay button also takes into account users' varying audio preferences, as we see wireless options become more and more prominent in the realm of hardware.


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/34d02a08-80d9-497a-83df-c410128b3455/Artboard_22x.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cc909305-42d3-409f-bc32-68dd8367bfb3/play.1.png

Full-screen view

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8714a189-83c4-42cb-8f99-5699522113ca/play.2.png

Collapsed view

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/36b720ad-6f35-41dd-a995-4966fd821670/play.3.png

Closed caption view #1

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/55ecc5d5-6fa6-476e-a018-a36b7ec0fec6/play.4.png

Closed caption view #2


Searching

The searching portion of the app is important because it is how the user collects information on art pieces, artists, and bodies of work while on site. This portion of the app was limited to just search by number, but I decided it would be more useful to also integrate a search-all feature which connects to sfmoma.org and their digital archive. Being able to toggle between these two portions allows the user to have complete control over the information they take in. It also creates more retention on the app, seeing as you can search-all while simultaneously listening to the audio tour to find more context to your learning experience. The visual style of the search design comes directly from the SF MoMA website (examples below) and is integrated in a mobile-friendly way.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8faaf309-d874-4c29-8bdb-7eef503332ba/Screen_Shot_2020-11-17_at_11.48.16_PM.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b2e1c7ef-f292-48ab-aee7-c76707558ece/Screen_Shot_2020-11-17_at_11.50.40_PM.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/329b8a2c-4375-40ee-8e7f-6c50f2d9d7e8/Screen_Shot_2020-11-17_at_11.51.19_PM.png


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b04260e9-983f-4474-88dc-85a5cbd2dbf6/Artboard_34x.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3038b2a3-990c-4a58-9186-9b51f4b739c3/search.2.png

Search by Number Screen

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5d935ba6-cccc-4a42-8b75-2d472f5aa18a/search.3.png

Search-all result page

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3ee3ffd6-ee09-4d27-bd92-b5ab66832b2b/search.1.png

Search-all screen


Way-finding

The goal for the way-finding portion of the app was to make the maps interactive and simple to follow. The addition of a floor selection screen made for a great starting point and overview of the building (layer inspirations shown below). I liked the idea of an isometric map view which was used in the previous version, but with interactions and filters.