The Gallery of Modern Art + Urban Design

Services

UX / UI
Branding

About the project.

The Gallery of Modern Art + Urban Design (MAUD) stands as a testament to the evolution of artistic expression in the contemporary world. Situated in the heart of the Toronto, MAUD serves as a dynamic platform that showcases cutting-edge artworks from diverse genres and mediums. This mobile application is dedicated to bringing a smooth and seamless experience for the gallery’s customers. Users will be able to view upcoming events and purchase tickets and products.

MAUD is an art gallery that is looking to design an app that allows customers to view and purchase tickets for upcoming events, browse and order products from their gift shop, and learn more about the exhibited artists.

The problem.

Potential customers that work full-time jobs or live at a distance from the gallery struggle to visit the gallery during operational hours.

The goal.

Design an app for the gallery that allows users to view the exhibited artists, view upcoming events to plan their visits, and shop the gallery’s store online.

The user group confirmed my initial assumptions regarding the necessity of a mobile app.

I conducted interviews, created empathy maps, and used my synthesized data to identify common themes that will inform my design decisions. The main problem is that users are too busy to visit the gallery during operational hours. Other issues included language accessibility and viewing exhibited art online so the user doesn’t have to compromise their busy schedule.

Section 1

User Personas

Persona 1

Louise Peeters

28

Boyfriend

Canada & Belgium

Student & Architect

Louise is a 28-year-old architect that moved to Toronto, Canada from Brussels, Belgium, with her boyfriend while pursuing her masters in architecture. She works full-time and is taking night classes. Her love for visiting museums is on hold due to her busy schedule. She’d like to visit and explore them online.

Louise Peeters is a busy full-time architect and student who needs a way to view art galleries and their stores online because her busy schedule doesn’t permit her time to experience art galleries in person.

Wants to visit galleries online and purchase art, prints, and apparel online.

Doesn’t have time to visit galleries due to work and studies and can’t try on the clothes prior to purchasing.

User journey map.

Persona 2

Zawadi Wambui

20

Single

Canada & Kenya

Student & Part-time

Zawadi moved to Toronto from Kenya when he was 19. He’s enrolled in an online school to learn English while working at a clothing store part-time. He and his family love art and culture and visiting art galleries. He prefers viewing galleries online but many don’t have a Swahili translation.

Zawadi Wambui is a 20-year-old immigrant student from Kenya who needs art galleries to offer in app translations from English to Swahili because he wants to learn about the art and culture prior to visiting an art gallery.

Wants to view galleries and their stores online prior to visiting with his family. Wants his family to experience local art and culture.

Struggles with language barriers and finding galleries with affordable souvenirs.

User journey map.

Basic site map.

Section 2

Low Fidelity

Paper wireframes.

Simple and quick, I started the process with paper wireframes. They’re a great way quickly iterate initial ideas. I brainstormed variations of some of the main screens, like the home page, store, and events page. These paper wireframes set a foundation for low fidelity designs.

Final paper wireframe set.

Low fidelity prototype.

The next step was to turn my paper wireframes into low fidelity digital wireframes. This is where we introduced grids and organization to create appealing, but low detail, wireframes. Once created, we added interactions to the wireframes to create a basic prototype.

Low fidelity usability study.

This was the first of two usability studies that I performed. This study helped guide me from paper wireframe to a low fidelity prototype.

4 of 5 participants seamlessly used the key functions of the app.

A participant wanted to add more than one tote bag to the cart - this function needs to be built out in the next iteration.

A participant struggled with the smallest font size. This needs to be reviewed in the next iteration.

Several participants wanted to change their method of payment to something other than credit / debit. Methods like PayPal, Apple Pay, etc., need to be included.

Section 3

Branding

Logo.

A timeless logotype leveraging a sans-serif typeface. The three logo iterations ensure the logo is scalable and versatile for any use. Logo 3 is perfect for smaller uses, like icons and avatars, while logo 1 and 2 are great for larger cases, like print and banners.

App icon.

Using the condensed logo variation, the MAUD logo is placed on a black background. This is perfect for Apple’s or Android’s app icon and for any social media profile.

Typography.

Articulat is a great typeface with a variety of fonts to choose from. It can be bold or it can be subtle - ranging from thin to heavy. It’s great for legibility, print, and web uses.

Primary colour palette.

The primary colour palette uses black, white, and three shades of grey. This provides a sense of simplicity and ensures the branding isn’t competing with artwork for the clients’ attention. The primary palette is supported with a colour system that spans the entire colour wheel. When it comes to visuals or web components that aren’t paired with artwork, it makes for a tasteful pop of colour.

Black
Hex: #000000
RGB: 0 / 0 / 0
cmyk: 0 / 0 / 0 / 100
Jet
Hex: #383838
RGB: 56 / 56 / 56
cmyk: 0 / 0 / 0 / 78
Gray
Hex: #828282
RGB: 130 / 130 / 130
cmyk: 0 / 0 / 0 / 49
Silver
Hex: #CCCCCC
RGB: 204 / 204 / 204
cmyk: 0 / 0 / 0 / 20
White
Hex: #ffffff
RGB: 255 / 255 / 255
cmyk: 0 / 0 / 0 / 0
Blood Red

#730004

Madder

#A31920

Poppy

#D93535

Bittersweet

#EF6262

Blossom

#FFAEB2

Chocolate

#753000

Brown

#A54D12

Cocoa Brown

#E1721D

Persian Brown

#F18D4B

Peach

#FFB886

Sepia

#683C00

Golden Brown

#9E6700

Harvest Gold

#D19000

Hunyadi

#F3B344

Sunset

#FFCF7D

Field Drab

#665200

Olive

#8A7100

Satin Sheen

#BF9F00

Saffron

#EFCA43

Naples Yellow

#FFE26C

Dark Moss

#4A6000

Avocado

#647D05

Apple Green

#7DA124

Yellow Green

#ADD359

Mindaro

#D3F381

Castleton

#005736

Dark Spring

#037D48

Pigment Grn

#09A854

Emerald

#54C981

Celadon

#8AEAB2

Brunswick

#005854

Pine

#057A68

Zomp

#00A88B

Turquoise

#5FCEBD

Aquamarine

#86F0D9

Indigo

#004B65

Midnight

#036174

Munsell

#239CAA

Moonstone

#58C0D0

Celeste

#B1E4E3

Egyptian

#133297

Sapphire

#074DB6

Azure

#307FE2

Ruddy

#65A5F5

Jordy

#A2CFFF

Resolution

#322D8E

Iris

#4D49BE

Savoy

#686BCE

Vista

#979CE7

Periwinkle

#C2C5FF

Tekhelet

#512179

Rebecca

#6D42A1

Amethyst

#9063CD

Lavender

#B28FE0

Mauve

#DABDFF

Tyrian

#7B0054

Murrey

#991A6C

Fandango

#C340A1

Sky Mgnta

#D766BE

Plum

#FFADF8

Section 4

High Fidelity

Paper to high fidelity prototype and accessibility.

From paper wireframes to low fidelity digital wireframes and onto high fidelity prototypes. The frames on the right show how the home feed was developed from initial idea on paper to the final look and feel. In this section, I’ll showcase a sample of the prototype as well as all of the high fidelity frames that make up the final prototype.

Contrast ratio for colour.

Alternative text for imagery.

Use of icons to help with navigation.

Multiple language options.

High fidelity usability study.

This was the second and of two usability studies that I performed. This study helped guide me from low fidelity prototype to a high fidelity protype and the following findings will help me iterate for a future usability study.

Option to change accent colour to personalize experience (instead of plum, can choose from the colour system).

Option for a light mode, again to personalize a user’s experience. Some users prefer a white background over black.

Ability to view the artist’s work when you click on their profile as well as links to their social media and portfolio.

Ready to start your project?

Get in touch

© Syer Company 2024