Overview

Problem
How might we make the museum experience more informative and interactive for the users, especially during the time of COVID?
‍
Solution
Optimize MOADs online profile by designing an immersive digital experience for anybody, in any part of the world that wants to explore and facilitate cultural experiences that inspires learning through the global lens of the African Diaspora.

Role: UX/UI Designer
‍
Tools: Figma, Invision, Optimalsort, Google Suite, Miro, Trello.
‍
Team size: Johnson Aderohunmu, Jacky Yang, Darya Sesitskaya and Carolina Hurtado -myself-.
‍
Date: Aug ’20 (3 weeks)

Timeline

MoAD Since opening to present

2005

MoAD opened its doors in SF

2014

Become Smithsonian Affiliate

2020

live-events is up by 270%.

Current site: User Flow

We conducted a user testing with 4 users, on the current website of moadsf.org with 4 tasks on most popular by visitors:
‍
1. Home page see if they can recognice what is about the website.
2. Events section if they can find the calendar and register on a event.
3. Exhibitions visit the gallery exhibition at that time was Mary Lovelace O'Neil
4. Memberships become a member.

50% fail the mermbership task and 25% of the users fail in the task “find an live-event for august.”
‍
Why?
‍
The experience for the user wasn't engaged, in words of one user
"Actually, I don’t really like the page's layout... main info is too small. At my laptop I need to zoom in or my eyes need to take closer to see 🔎."
‍
Can you find the ticket icon 🎫 for register on event in the current website?

Competitor Analysis

The world needs art more than ever!
‍
The MET museum is a great example to turn into an opportunity of change in this unprecedented time of shelter in place order because of Covid-19. They bring you the opportunity to visit the museum from your home, which is open virtually not only for locals in NY also for user from all the globe 24/7. -We want to create a virtual beautiful experience-.

MOMA museum has a simple, cristal, clear membership, a very engaging experience to become a member. -We want to take that feature-.

Research: Interviews

We organized 5 user research interviews that helped us learn really useful insights, from users who love the experience of visit museums regularly, one of them also was an active promotion of cultural activities.

Users need non-work environments that promote continued learning, engaging dialogue, and socialization.

100% are happy to experience virtual museums. As an alternative to entertainment and learning experiences from home, during the order shelter in place in California. And the opportunity to explore from any part of the world.
‍

"...I do not want to go to the museum because of COVID-19 I want get more info about this exhibition and artworks. Maybe audio tour with VR tour is another solution (...)"

-Tao, 23

"Even when I prefer the experience to visit the museum in place, it's a great opportunity to visit museums online because I can enjoy art and live-events from all over the globe."
‍
-Andrea, 30

“I struggle to find both online content and entertainment that spurs inspiration and feeds their curiosity about the world, cultures, art and history”

-Valeria, 25

Survey

Our team received over 50 responses to our survey. We have collected responses from multiple age groups.

85 % of survey respondents visit museums websites to learn about exhibits and events

USER PERSONA

From the User Research we developed our User persona. Meet Nigel Roberson!

Heuristic Evaluation

The main difficulty is the size and color of the text. Use different colors for same hierarchy of information is harder to read and process with clearity the information.

Accessibility Testing

4 from 5 didn't pass the accessibility test, because they didn't have enough contrast between the text color and the background color. Making it hard to read the main information with the pink and yellow typography color.

The ratio contrast with the white or gray background isn't enough to pass the accessibility test, the contrast ratio from 1.63 on the lowest to 3.93 on the highest, are under the minimum required ratio, is 4.5.

As you can see, only one passes the accesibility test, with gray typography and white background, their contrast ratio is great with a 5.61 is easy to read the information.

Color Blindness Accessibility

The color palette on the MoAD website successfully passes the test. Black, pink, dark yellow, yellow, and white are safe for deuteranopia, protanopia, and tritanopia.

MOOD BOARD

The museum site updates their content constantly, focus on create a community to enjoy learning and sharing: art, theatre, food, music and festivals to celebrate black culture.

We want the Website to reflect the spirit of celebrate, trendy, creative, friendly and identy.
‍

UI Style Guide

Is vibrant, to reflect the spirit of celebrate time!
‍
Also we use neutral colors like white and black to enahace the artist work.
‍
Typography is Proxima Nova, which is a trendy font simple, cristal, clear.

PAPER SKETCHES

‍
Sketches help us to define which elements should be included in each page, and the functionality that needs to be set in place for those elements.

This step allows us to create a solid page structure before we move on to the next step.

Each member of the team lead a page, Darya brainstorming on Home, with the beautiful motto "The World Needs Art More Than Ever", Jhon on Exhibition came with the idea of the Black background to enhance the artist work, Yacky on Events organize the calendar, and Caro (myself) on Membership brings the idea of cards to summarize the options.

HI-FI PROTOTYPE

‍
#1 Home Page, we work collaboratively, we voted for the hero image of vibrant colors, the funny playful image of a girl on a gorgeous zebra from the artist Athi-Patra Ruga, to transmit celebration time!🎈

‍MoAD has as of the main core features What's On, to promote Events and Exhibitions from users. And membership to growing up as part of a community.
‍

What's On

‍
#2 What's On to find and book an event or and exhibition, with a calendar.
‍
On home page, click on the option What's On, then you can explore on a specic time if you want, or by categories. The soon evens will show first, whit a brief abstract.
‍
Let's see our What's On section...
‍
‍

Exhibitions

‍
#3 Exhibition the beautiful artist's work can be appreciated at full screen on a black background.

On the Home page, you can click and select the Exhibition section, go and see the latest artist collection.

Then you can click on Gallery and explore the awesome work of the artist.

If you click on Artist Bio you can see the complete description of the work like inspiration, a brief description about the artist.

Become a member

‍
#4 Membership to be part of the community of MoAD.

On the home page, click on the option Become a member, then you can explore the best option suits you, monthly, annually, or premium.

Each card contains the main information about each plan.

Later you can fill a form, make the payment and it's Done.
‍
‍