Internship / UX Re-Design
#MakeUsVisible
#MakeUsVisible is a global network of Extended Reality Media Art superimposed against on-site physical structures to rally for a more inclusive world. When browsing through XREnsemble's original project website, I knew the user experience could be much better. There was so much great art on the website. However, people might be too overwhelmed to interact with it. Thus, I reached out to their team and scheduled a call where I prepared an educational slide deck of flaws, strengths, and opportunities to enhance their website further. After the call, XREnsemble asked me to re-design their project site as their UX/UI Intern.
Role:
UI/UX
Duration:
6 Weeks
Software:
Figma
Year:
July - August 2022
The Problem:
​
Overwhelming Website
The original website had overwhelming text, a confusing navigation bar, and an unclear mission. How can we design a more user-friendly website that encourages users to interact with the AR monuments?
The Solution:
​
Spotlighting the Art, while Keeping it Simple
A great website is an accessible website. To make XRE's project website easier to navigate, I planned to cut the amount of text by 60%, create a simple navigation bar, and highlight pieces of AR work to reel in users.
Usability Test:
Original #MakeUsVisible Project Website
To fully understand how to improve the site, I conducted usability tests to see how users interact with the web service. First, I needed to see what worked and what users struggled with. So I gave them each five tasks.
I gave them each five tasks ...
The Map
Find the G@r1B@ldA! AR monument by Carla Gennis through the Interactive Map.
Mission Statement
Find out what #MakeUsVisible NYC is about.
The Art
Interact with the AR monuments through the website.
Donations
How would you find out how to donate? and what's the reason they want donations?
About Us
Find out who XREnsemble is. What is their connection is with #MakeUsVisible? And how do I find them on social media.
My findings were ...
Confusing Nav Bar
When looking for the mission, users got overwhelmed because there was too much to read through.
Too Much Text
The nav bar has 20 items and is scrollable. Overlaps the donation buttons. Unclear wording.
Scroll Interference
When trying to leave the map, the page wouldn't scroll because the software thought the user still wanted to explore the map.
Mobile > Laptop
Friendly
More mobile than laptop friendly. On laptop it takes alot of time to scroll through all of the art, impatient users would less likely scroll through all the AR on the website.
Visual hierarchy and Design
Some users pointed out that they wanted to see more AR work in the landing page and less text. Also one user pointed out the dark background and white text was too contrasting for them, making the message hard to absorb.
Competitive Analysis:
Exploring other Websites for Solutions and Opportunities
To fully understand how to improve and effectively re-design the project website, I analyzed the strengths and weaknesses and identified missed opportunities for various applications along the way. Here is one website I focused on.
INKHUNTER
Lets you try on virtual tattoos with augmented reality before it’s inked forever. The app projects any tattoo design, on any part of your body to let you see how it will look.
Learnings
Reality: Helps them make the decision if they should get the tattoo in real life.
Simplicity: The app has two simple functions. Draw your tattoo and place it on you or place a premade tattoo through AR.
Originality: Create your own sketches/tattoos
Share: Sometimes your own opinion isn't enough, you need others to help you out.
Opportunities
Color Tattoos: An overlay of color tattoos would give a variety of users, and make the experience feel more real.
Various skin tones in Marketing: Users might be discouraged by not seeing other darker shades on the app slides. They should be encouraged to try it, not silent since they're left out.
Monetization: Buying tattoo designs to test on your skin through the app.
Project Goals
What Do I Want to Accomplish with this Project?
Highlight the Art
I want to create a simple but captivating landing page and highlight a piece of AR art in the exhibition.
Help others easily understand the Mission
I want users to understand the mission every city in MakeUsVisible has.
Prioritize Convenience
I want users to easily find the specific artwork they wanted to see.
User Persona:
Using my research findings, I created three user personas based on the mind of a family member, investor, or general art enthusiast visiting the site. These three are my target audience.
Sarah the
Supportive Sista
"Every superhero needs a sidekick"
AS a supportive sister of an artist apart of #MakeUsVisible, I want to easily find my sisters work and other artist's pieces I'm interested in.
Needs
- To save Time
- To see her fam succeed
Struggles
- Easily Distracted / Bored
- Misinterpreting the Art
Ivan the Giver
"Art is a form of asset"
AS a Financially stable man who appreciates art and wants to give back to the community, I want to be able to fully understand the goal of this project and see how I can help fund these artists.
Needs
- To see a vision
- Social Impact
Struggles
- Not being easily captivated
- To trust some artists
Alena the Art Enthusiast
"The job of an artist is to offer a sanctuary of beauty to ugly world"
AS a college, digital art major, I'm super excited to explore the AR world through looking at other's artist's AR work. I want to be able to learn their message behind each piece, and even see how I can get involved in the future.
Needs
- To learn
- To grasp the art without being distracted by a noisy page, or overwhelming information
Struggles
- Concentrating
- Gaining valubale inspiration
Wireframes:
​
Version 1 - Initial Vision
After pinpointing the user's goals and pain points, it was time to start designing. My first draft/vision for the website is seen below. I created a low-fidelity wireframe, transferred it to a mid-fidelity frame on the left, and tried to see how it would look with more color.
Version 2 - Sketching Period
After creating the first wireframes to get my thoughts rolling, I met with the original web designer and started sketching some home pages based on my low-fidelity designs.
Version 3 - Decided on Color & Typography
In this week of re-design, we created mood boards and decided on the color scheme and typography of the website. We chose earthy green since these AR sculptures were meant to be explored around NYC. Figuring out the color scheme made it easier for us to design.
Version 4 - Final
After finalizing the landing page, we tweaked the color scheme and focused on the user journey of interacting with the map and AR sculptures.
Final Prototype:
#MakeUsVisible Mobile and Web Prototype
My designs have been implemented on their MOBILE website as of Oct 2022, at https://makeusvisible.io/