UX designing Fotografiska's museum app
2018
Creating a new mobile application was part of a larger scope of work to update Fotografiska‘s digital identity. This project was made together with the Experience Design Team at the creative hybrid agency River.
Fotografiska has a wide range of offers beyond their photo exhibitions, such as the poster and book shop, restaurant and cafe, courses and education and event facilities. This was a big challenge when we updated their website. For the app, we choose to focus solely on the museum and our goal was to enhance the experience before, during and after the visit.
As we had already worked with the client’s website for some time before we started on the app, we had some research and personas figured out. We could also take a content-first approach to our app prototypes as there was a lot of overlap regarding context and content from the website.
The key was to enhance the visitor’s experience on their way to the museum (or at home), at the museum and after the visit. User journeys and context scenarios was sketched out to understad the different use cases and advantages the user could get by using the app (compared to for example the website).
With the mobile application, we could also explore ways to get the user to get an augmented experience with more information about the artwork triggered by bluetooth beacon technology, GPS or with the help of the mobile’s gyro. Some of the ideas was realized, while some was put in the future pile as they were out the scope for this project.
The sketches and UI design was done in Sketch and prototypes with Invision.
Customer journey mapping
Mapping a generic journey with touchpoint that the users might encounter will give you a sense of where the app can have an impact before and after the visit to the physical museum.
Sitemap and flow diagram
After a few failed attempts to map the entirety of the app in one space, it ended up looking like the image seen below. This was not used as a technical tool communicating with the developers in the end but more as an image to show a non-technical client all the nooks and crannies involved in building the application and thus having an argument for time estimation etc.
Topography
In this example we see the landing view UI elements disassembled by type. Header and footer navigation is always visible and interactive. Locked elements in this example is background and paragraph text, headers, lists. Interactive elements like cards will be used throughout the application.
Elemental design system
A design system is much more than just UI elements and components. This is a fundamental look at the different elements and parts of the application. Splitting the design into it’s building parts, we can use the following design system developed by Brad Frost called Atoms & Molecules.
Design examples
The application is divided in three main sections.
1. The user lands on the Live section, where she can get an instant feeling about what’s going on in the museum at the moment, even hearing the same music from the restaurant and cafe.
2. Next, the Experience part, will inspire the user and let them get deeper into the content of their liking.
3. Last there is the Me section, where tickets, stats and saved articles can be found.
