Laptop, Tablet, Phone Mockup.jpg

Muse - Responsive Version

 

Project Vision

Muse strives to create an inclusive environment to ensure everyone can enjoy their museum experience and get the most out of their visit by creating a visually engaging interface that’s simple to use, works at any art museum in the world, is universally understood, and ensures a smooth navigational experience within the museum from start to finish.

Challenges

1) Prevent users from getting lost within the museum they’re in utilizing in-hand navigation

2) Offer an easily navigable and universal experience for users no matter their native language

3) Create an accessibility friendly product that allows everyone to enjoy art on their personal devices

 

Meet the Users

A dark haired, dark skinned woman with an orange headband, holding a coffee and waving. She's wearing a long cream cardigan, a yellow shirt, brown pants, and red ankle boots.

Helena

PRIMARY PERSONA
Age: 33
Occupation: Family and Divorce Attorney

Helena is a family lawyer who lives in a large city but rarely has the time to spend on her hobbies due to her demanding job and personal life. She really enjoys the city’s art museum but due to her visual impairment, struggles to enjoy it fully as they don’t offer any kind of accessibility features. Her family assists her when they go together, but Helena would like to be able to go alone and not need to rely on others to enjoy the museum.

A curly dark haired, medium skinned man in a striped red and yellow tank top and blue jean shorts waving. He also has blue hightops on and a blue heart arrow tattoo on his right bicep.

Reuben

SECONDARY PERSONA
Age: 21
Occupation: Intern Computer Programmer; Student

Reuben is an intern computer programmer at an international company in the city where he attends college. He immigrated to America from Poland when he was 15 and is only partially conversant in English. One of Reuben’s favorite activities is going to the museum with his older brothers, but he struggles greatly with reading the plaques beneath artwork and tends to get lost in museums due to their size and being unable to read signage.

 
 

Site Map

Initially, I focused heavily on the hierarchical site structure Muse utilizes. This helped me understand ways in which users might interact with the product and allowed me to see potential navigational methods and pain points.

 
 
 

Competitive Analysis

I looked at a handful of potential competing companies and while none of them directly competed with the offerings of Muse, the potential for infringement is there in the user preference. Muse has the unique opportunity to capitalize on all of the features of these apps and bring them to one convenient location that works for any art museum in the world.

Three of the primary feature differences I noticed when conducting the analysis for responsive websites were:
- Seamless integration with existing museums
- Scope of information included
- Navigational ease-of-use

 
 
 

Initial Sketching

The same method of brainstorming was used for each screen across the product. I gave myself a minute to draw each design. Afterwards, I went back through and chose the elements of each that I wanted to include in the final wireframe design.

Screen Variations

Due to Muse’s users accessing the site on more than just their mobile phones, I also sketched out additional screen sizes to ensure it would be fully responsive no matter the device being used.

 
 
 

Wireframing

After some initial pen and paper sketching, I reviewed each sketch to decide what was necessary to include throughout the product. I reviewed from two perspectives: at the site as a whole and at a more detailed, per-page view. I spent the bulk of my time on this project in the wireframing stage as I wanted to ensure it flowed well and worked for my users before moving onto visuals.

 
 
 

Ideation

Once wireframes were finalized, I began preparing questions and tasks for my usability studies. I asked 5 different people to run through my prototypes in hopes of garnering enough feedback to use in future design iterations.

The findings for each study are below:

 
 

Round 1

a. Thought many elements were too large for the format
b. Want to view pieces in order in
a queue
c. More visible above the fold

Round 2

a. More appropriately sized buttons
b. Text labels for all buttons
c. Easier way to change language

 
 

Challenge 1

PREVENT USERS FROM GETTING LOST IN THEIR MUSEUM

Users would be able to utilize the mapping feature the same way as they would in the app, just with more information visible.

Challenge 2

OFFER AN EASILY NAVIGABLE AND UNIVERSAL EXPERIENCE FOR USERS NO MATTER THEIR NATIVE LANGUAGE

Muse includes a pre-login language changing feature right on the homepage to encourage users of any native language to try it out.

Challenge 3

CREATE AN ACCESSIBILITY FRIENDLY APP THAT ALLOWS EVERYONE TO ENJOY ART ON THEIR PERSONAL DEVICES

Muse is heavily imagery-based which means alt-text is needed throughout. In addition, another accessible feature was added to allow users to open a full-screen version of any art piece they’re looking at and be able to zoom in closely to view details like brush strokes or different textures.

 
 

Style Guide

The colors chosen for Muse perfectly express everything that Muse is about; simplicity, cohesion, and timelessly classic. The fonts also encompass the modern, yet vintage feeling Muse emits throughout it’s screens. The splash screen welcome also perfectly encapsulates the sophistication, beauty, and simplicity the product offers.

Muse's style guide. Includes typography which is the family of Gilmer fonts and Great Sailor Regular as an accent, and the 4 main colors of the app - an olive green, dark olive, a blue-gray and black.
 
 
 
 

Takeaways

As an art enthusiast, and a heavy museum-goer, Muse is an idea that is near and dear to my heart. This was my first time doing a full design process that included heavy research in it and it was an interesting sidestep from what I’m used to doing in my design world. The idea of focusing heavily on the persona as a real user was incredibly helpful in ensuring my app was user-centered first, and business-centered second.

It was also very interesting to challenge myself to build in size variations and ensure that my work wasn’t too large or too small for a specific screen size. I struggled with it at the start, but once I could visually see it on the screen size it was meant for, I knew instantly if something was too large or too small. I can see this experience being very useful for my projects moving forward!

Be sure to check out the process for Muse’s creation below!