UI/UX, Brand Identity | Graduation Project | April 2020
Winner of Best in Show Award, Capstone Presentation
My role
As the Lead Designer, I was in charge of elaborating the guidelines of UX solutions such as the user flow, wireframes and mockups to be followed by the design team. Also responsible for creating the UlKit including icons, layouts, colour pallets and Illustrations. In charge of designing the printed proposal and marketing material.
Tools
Adobe Illustrator
Refining logo sketches. Creating character avatars,branding, mood board, and colour palette. Sketching user flow.
Adobe XD
Elaborating initial wireframe and subsequent versions. Building the UIkit and mock-ups to share with design and development teams.
Adobe InDesign
Creating the layout of the printed proposal, marketing material, research reports, personas sheets, and design/development plans.
Project Description
The idea of Zaila started years ago when I first decided to join the Post-degree in Web and
Mobile App Design at Langara College. The app didn't have a name, body or face, it was just the idea to bring more people to exhibitions making them more inclusive, interactive, immersive and fun.
Mobile App Design at Langara College. The app didn't have a name, body or face, it was just the idea to bring more people to exhibitions making them more inclusive, interactive, immersive and fun.
In ten weeks, this idea was developed into an app, and Zaila was born. Zaila detects the user's location to suggest nearby museums, galleries and venues with exhibitions, providing timetables, addresses and current exhibitions with descriptions, and a personalized summary for each artifact.
Zaila also provides picture samples and zooms in according to the audio descriptions, making it easier to see details that might go unnoticed otherwise. To make the experience more attractive and fun, Zaila challenges the user by having quests, levels and rewards based on the accomplishment of specific tasks or seeing the complete list of artifacts of an exhibition.
The problem
According to Canada's statistics, the number of people visiting museums has been increasing,
but not among younger generations. Also, exhibition venues have been failing to attract
recurring visitors. One of the reasons for that is the lack of interactivity and accessibility. Zaila
addresses these issues directly, visiting any exhibition more inclusive and enjoyable
According to Canada's statistics, the number of people visiting museums has been increasing,
but not among younger generations. Also, exhibition venues have been failing to attract
recurring visitors. One of the reasons for that is the lack of interactivity and accessibility. Zaila
addresses these issues directly, visiting any exhibition more inclusive and enjoyable
Personas
By studying the problems, we were able to identify the potential users for our app and build the
best application possible based on their needs:
By studying the problems, we were able to identify the potential users for our app and build the
best application possible based on their needs:
Keith Mathews (High school student)
Frustrations:
· Uninterested in visiting museums and finds it challenging reading long texts.
· Art exhibitions are not as interesting and entertaining as going to movies or playing a game.
Goals:
· Audio descriptions, to reduce reading time.
· More interactivity, having fun and being entertained as long as learning about the exhibition.
Adelyn Bocquet (Fashion designer)
Frustrations:
· Can't focus in crowded museums.
· Native language not always available.
· Unable to filter the depth of information.
Goals:
· Looking for a more individual experience.
· Information on native language.
· Chance to go deeper into specific subjects.
Charlie Haring (Fine arts student)
Frustrations:
· No interactivity, monotonous experience.
· Crowded exhibitions can be challenging to follow the guide and see details.
Goals:
· Attract friends to exhibitions.
· Visit the exhibition with guidance, but not attached to a guide.
Shirley Campos (Art Teacher)
Frustrations:
· Unavailable alternatives for visual/hearing impaired people.
· Struggles to approach information stands.
· Hard to visualize details in big artifacts.
Goals:
· More inclusive exhibitions.
· Getting information without the need of approaching.
· On-hand close of details.
Creating Zaila
Who is Zaila?
From the need of having more representation of P.O.C on arts and empowering women to be represented as intelligent sources of inspiration, not just as beauty muses, Zaila is born to guide and inspire users. The name has its origins in Africa and is strongly related to the feminine, power and beauty. By being an approachable character, Zaila makes the experience of going to an exhibition more fun and inclusive for everybody that is or isn't interested in them, yet.
From the need of having more representation of P.O.C on arts and empowering women to be represented as intelligent sources of inspiration, not just as beauty muses, Zaila is born to guide and inspire users. The name has its origins in Africa and is strongly related to the feminine, power and beauty. By being an approachable character, Zaila makes the experience of going to an exhibition more fun and inclusive for everybody that is or isn't interested in them, yet.
Colour Palette
To keep Zaila real to her roots, research on African cultures and references were made. The most traditional and well-known form of African art is "Kent", the multi-coloured hand-woven, quilted cloth, very present in the Ghanaian culture.
To keep Zaila real to her roots, research on African cultures and references were made. The most traditional and well-known form of African art is "Kent", the multi-coloured hand-woven, quilted cloth, very present in the Ghanaian culture.
The most common colours on the craft of Kent are Black, Yellow, Red, Blue, Brown and White, which were used in the concept of the logo to bring: playfulness, trustworthiness, dynamicity and energy.
User experience
User Story
As a user I want to:
· Find nearby museums;
· Discover new exhibitions;
· Gamefy my experience visiting exhibitions;
· Keep track of my accomplishments;
Wireframe
User Interface
Colour Palette
A big challenge in creating the colour palette for the app was keeping the high energy and dynamicity of a gamified experience, but not overshadowing the exhibition.
A big challenge in creating the colour palette for the app was keeping the high energy and dynamicity of a gamified experience, but not overshadowing the exhibition.
Typography
Open Sans is known for being highly legible on screens and in small sizes. The round shapes bring harmony to the circular shapes of the app and, because it's a non-serif, it brings a modern aspect.
Open Sans is known for being highly legible on screens and in small sizes. The round shapes bring harmony to the circular shapes of the app and, because it's a non-serif, it brings a modern aspect.
Icons
For the buttons, isometric icons bring the game aspect to the app. White and grey are used to keep the layout simple and not overwhelm the user.
For the buttons, isometric icons bring the game aspect to the app. White and grey are used to keep the layout simple and not overwhelm the user.
For categories, simple illustrations with high contrast guide the user through museums and exhibition classifications
Mock-ups
