MOCA app & Website
DATE
Jul - Dec 2024
TYPE
Academic
Human-Computer Interaction (UX Design)
Solo Project
RoLE
Solo Designer
DELIVERABLEs
Mobile App & Website Prototype
TOOLS
Figma
This UX design project is part of the Google UX Design Certificate program on Coursera, a 7-course program. The project spans the first 5 courses, covering everything from the foundations of UX design to building a high-fidelity prototype. For my first UX design project, I chose to focus on Art Museums, as it was an engaging and personally interesting topic.
A Platform for Art Lovers
Accessing information about amazing artworks, artists & collections from our library page.
A library in your phone
Learn about art pieces, artists, and collections via audio or written content, created & narrated by professionals.
Quality Exhibitions & Activities
Cool exhibitions and workshops waiting for you to explore. Finding out what previous visitors think about their experience through their testimonials.
plan your trip at the desired time
Plan your trip more thoroughly with our interactive calendar. Learning about maintenance, crowded & quiet time to have a more enjoyable visit.
EveryThing on a singular platform
The platform contains all information and functions needed for you to have an amazing artistic experience.
Check out the High-Fidelity Prototype Here!!!problem
Art museums in Vietnam lack a consistent, high-quality platform for visitors to learn about art. Finding information and choosing a convenient time to visit is also challenging. The museum in this project is entirely imaginative.
goal
Design a Mobile App for an Art Museum to advertise exhibitions & events, provide museum information to patrons, and enable patrons to schedule a visit.
THE Design PROCESS
I. Initial Research:
For this project, I chose a qualitative research method to understand the current state of art museums in Vietnam and nearby countries. During this phase, I conducted a competitive audit and created personas, user journeys, and user flows to gain insights into user needs and behaviors.
Competitive Audit
For the Competitive Audit, I examined the website and mobile app of famous contemporary art museums and fine art museums in Vietnam, Thailand, Korea, and China. There are definitely similarities between the platforms of these museums, but there are some important differences that make some experiences more enjoyable than the others.
Knowledge Hub vs No knowledge provided
There are museums provide information about artist, artworks on their platform while others did not. For National Museum of Modern & Contemporary Art in Korea, the artworks can even be rented by individuals or organizations.
Ticket Booking vs Ticket Information
Some museum allow users to book ticket online, while the others only provide ticket pricings, and visitors have to buy ticket at the ticket office when they visit the museum. Some museum allow patrons to book a venue for private use.
Integrated vs separated platform
Some museum have all the features and information available on their platform, while the others use external platform like Google's Forms, Google's Docs, WeChat for some of their features. In the case of MOCA Shanghai, the use of WeChat articles can prevent foreigners to access the content, since not all of the content have an English version.
Our Users
Annie
Age: 53
Education: PhD
Hometown: Hung Yen
Family: Mother of two
Occupation: Doctor of Medicine at a hospital
Education: PhD
Hometown: Hung Yen
Family: Mother of two
Occupation: Doctor of Medicine at a hospital
A senior medical workers working at a hospital in a small town near Hanoi. She have two kids and wants to take good care of them. This app will help her find exhibitions & workshops that suitable for her kids with ease, and find necessary information and tips for her trip.
Brandon
Age: 22
Education: University Student
Hometown: Hanoi
Family: Living alone
Occupation: Designer intern at an advertising firm
Education: University Student
Hometown: Hanoi
Family: Living alone
Occupation: Designer intern at an advertising firm
A young man living in a metropolitan city. He is building his career as an intern at the advertising firm. He also loves to go to museum, alone or with friends to learn more about art in general. This app will help him find necessary information about the artworks & artists, and help him schedule a visit at the desired hours.
II. Ideation:
I started the design by sketching the storyboard for the personas, then sketching out some paper wireframes for the important pages in the app.
Information Architecture
Storyboard & Paper Wireframe
Digital Wireframe & Low-Fidelity Prototype
IIi. REfinement:
After creating the low-fidelity prototype, I conducted usability test on this prototype to gather feedbacks on the user-flow. Some of the major problem I noticed during the test are:
Hamburger menu is unnoticed
The hamburger menu is not clear enough that usually user did not know that it exist.
The QR scan is neglected
When ask to find information about an artist by scanning QR codes, the users tend to go straight for the search button instead of the scan function located at the footer.
exhibition Card is not clear enough
There is no visual cues to guide the users to click on the exhibition card to get the information and book tickets.
Based on the feedbacks received, I made adjustments for the low-fidelity prototype.
Iv. DEsign Choices:
I decided to choose the black & white brutalism style, with some accents of red, as it is simple and leave room to emphasis on the colorful images of the exhibitions or artworks. This style also create an artistic feeling to the app and website, since brutalism architecture is commonly found in contemporary art museum. This raw and rough architectural style highlights the material textures and functionality of a building instead of glamorous beauty, and I wanted to capture this feeling into the museum's platforms to really highlight the contents inside of the app or website.
Color Palette
Background color
#F9FBFF
Outline & Shadow
#111111
Accent 1
#F52802
Accent 2
#FF002F
Accent 3
#FF6666
Typeface
Minimalist, geometric and squared typeface is the most suitable for this project, as it can enhance the roughness of the brutalism website style.
Main Content
Huge Text
Chivo - Light - 24px
Big Text
Chivo - Light - 20px
Normal Text
Chivo - Light - 16px
Card's content
Small Text 1
Chivo - ExtraLight - 12px
Small Text 2
Chivo - ExtraLight - 10px
Normal Text
Chivo - Thin - 8px
Card
I used a lot of cards to arrange the related contents. I wanted these cards to look like squares and rectangles with slight elevations, mimicking the squares and shadows usually see in brutalism architecture.
VI. Website design:
After completing the App Design Project in the first 5 courses, in the 6th course of the certificate program, I got the chance to revisit this project and design a website. Since the first two phase of the Design Thinking Process: Empathize & Define were done while designing the mobile app, I decided to jump straight to creating the wireframe and mockups based on the work I had done in the previous courses.
Digital Wireframe & Low-Fidelity Prototype
Mock-up & High-Fidelity Prototype
Takeaways
This project marks a significant milestone in my UX design journey. Throughout the process, I gained hands-on experience with design thinking and the complete design cycle, from understanding user needs to creating storyboards, paper and digital prototypes, conducting usability tests, and developing high-fidelity mockups. I became familiar with numerous design principles, which deepened my understanding of what makes a user-friendly product.
A key lesson I learned is the importance of considering the physical constraints of different devices during the design phase. For example, I initially overlooked features like camera notches on Android devices and the top bar on iPhones, which caused parts of the design to appear awkward on some screens. This experience has been invaluable, and moving forward, I will prioritize device-specific design considerations to ensure a seamless user experience across all platforms.
A key lesson I learned is the importance of considering the physical constraints of different devices during the design phase. For example, I initially overlooked features like camera notches on Android devices and the top bar on iPhones, which caused parts of the design to appear awkward on some screens. This experience has been invaluable, and moving forward, I will prioritize device-specific design considerations to ensure a seamless user experience across all platforms.
Key Learnings
UX Design process
Empathizing with users, conducting user research, creating personas, prototyping, usability testing, creating mock-up and high-fidelity prototype.
Figma
Learned the basics of creating a Figma Design. Understand how to create assets, design sheets, mockups, animations, prototype in Figma
UX DEsign Principles
Understand and applly UX design principles and philosophies, such as Gestalt's Principles, Color Theory, Typography & Iconography.
Research
Understand how to conduct user research, creating personas, conducting usability unmoderated and moderated usability study. Drawing insights from research and feedbacks.