Prompt
Create an interactive experience to make people smile
ArtTag
Overview
Section 01
Meet ArtTag
ArtTag is a mobile experience where users can create custom graffiti art, post anywhere using AR tech, and discover art posted by others.
ArtTag is designed to be used as a community art gallery, an invisible world that everyone can access and contribute to.
How ArtTag Works
User Need
ArtTag's Solution
Create
The canvas tool lets users create tags with the option to post or save them to the gallery.
User Need
ArtTag's Solution
Share
Users drop their art directly onto any surface to publicly share in augmented reality.
User Need
ArtTag's Solution
Discover
Scanning the QR code at any location lets users view tags from others.
Animated Prototype
ArtTag
Meet the Team
Section 02
Senior Capstone Project
ArtTag is a student-led, designed, and developed senior capstone project.
Our team was made up of five designers and three developers.
We met twice weekly to collaborate and had weekly stand-up meetings with our faculty advisor to keep on track.
The team stayed connected over Slack and Discord voice channels when working separately.
Millilani Rosare
Tech Lead
Suraj Bonthu
Backend Developer
Kalen Olyphanith
Front End Developer
Lucie Robert
UX/UI Designer
Sheryl Wang
UX/UI Designer
Meg Shenoy
Visual Designer
Dan Phan
UX/UI Designer
Daniel Zepeda-Cuba
Project Manager
ArtTag
Ideation
Section 02
Moodboard from brainstorming process
Brainstorming
ArtTag is inspired by traditional graffiti artists, community art projects, and technology's power to democratize self-expression.
Use Case
Imagine RIT
ArtTag launched at Imagine RIT, RIT's annual Creativity and Innovation science fair that showcases the innovative spirit of RIT students, faculty, and staff.
Imagine RIT attracts 250 exhibits and 1800 visitors
Research
Preliminary Interviews
We interviewed 2021 Imagine RIT attendees to better understand our users' needs.
"I usually only spend a few minutes at each booth."
Design Solution
Arttag opens with one QR code scan
Interviewee
"My favorite part of Imagine RIT is seeing all the cool stuff."
Design Solution
Augmented Reality gives ArtTag a wow factor
Interviewee
"Imagine RIT attracts lots of families and small kids."
Design Solution
ArtTag is designed with forgiveness and simplicity
ArtTag
Visual Direction
Section 03
Mood Board
The sophistication of traditional art galleries inspires ArtTag's styling. Clean lines and rich hues set the app's tone and do not compete visually with the more sketch-like tags themselves.
A clean look influences people to take the experience seriously and not post inappropriatly.
SUBTLE / MODERN / CLEAN / SIMPLE / REFINED
Interactive Components
Type
Gilroy is a modern sans serif with a geometric touch that feels perfectly sophisticated.
Logo
A peace sign + spray paint to communicate ArtTag's community-building mission through art.
Colors
A color palette of warm blues is visually clean without looking sanitized.
Buttons
ArtTag's interactive components change state on hoover, click, focus, disabled, and mouse away.
Nav
A bottom nav bar, placed with Fitt's law in mind, lets users create, share, and discover
Icons
ArtTag's icon set focuses on minimalist design and puts the visual focus on the art.
3D Elements
The 3D models of the Imagine RIT ArtTag locations were created using pictoCAD.
3D realism differentiates these visuals from the 2D tags created by the user.
Marketing
Marketing Campaign
We implemented a marketing plan to generate buzz and guarantee a successful launch.
3 months to launch
Social Media - ArtTag used Instagram and Facebook to promote ArtTag, with posts averaging 100+ impressions.
1 month to launch
Website - ArtTag's informational website went live.
2 weeks to launch
Print Media - Posters advertising ArtTag were posted around campus and in the community.
Day of launch
Freebies - Stickers, matching team shirts, and maps drew attendees in at every ArtTag location.
ArtTag
User Testing
Section 04
User Testing
We asked five peers to walk through ArtTag wire frames while a team member observed their behavior.
Design Solutions
Pain Point
Tedious Sign-In
Interviewees lost interest in the experience after struggling to create an account.
Design Solution
Eliminate Accounts
ArtTag is accessed through one QR code scan, and the tags are saved directly to the phone.
Pain Point
Unfamiliar Campus
Interviewees were confused about how to get to the tagging locations.
Design Solution
Map Feature
A navigation feature to guide users to any of ArtTag's 6 locations around campus.
Pain Point
Confusing User Flow
Interviewees did not understand how to browse locations on the home screen
Design Solution
Jakob's Law
Swiping - a familiar design pattern for browsing - makes searching locations more intuitive for the user.
Pain Point
Decision Fatigue
Interviewees didn't understand or try and use the nav bar.
Design Solution
Hick's Law
A simplified nav bar lets users make decisions faster and more confidently.
ArtTag
Process
Section 06
Information Architecture
ArtTag comprises three main screens - The locations screen, the canvas screen, and the QR code scanning screen - which can all be accessed through the universal navigation at the bottom of every screen.
User Flow
Using ArtTag
The user flow is designed to get the average Imagine RIT attendee using ArtTag as soon as possible.
Our goal was to have the user post a tag in augmented reality space within three minutes.
Wireframes
Layout
ArtTag is designed to be adaptive to any mobile screen size, so we kept the compositions neat and straightforward.
Final Comps
ArtTag
Launch
Section 07
Booth
The ArtTag exhibits had maps, stickers, QR codes, a poster with the AR reference point, and at least one team member ready to introduce ArtTag.
Locations
ArtTag set up six locations around campus for Imagine RIT visitors to post their tags.
Visitors were encouraged to try and tag all the locations as they made their way around the event.
Tags
Real tags posted by Imagine RIT attendees using the ArtTag experience.
Problem Solving
In the middle of Imagine RIT, ArtTag suddenly stopped working.
The viewport for scanning the QR code disappeared, rendering the experience unusable.
After communicating with the rest of the locations over discord, we identified and fixed the problem.
Within 30 minutes, ArtTag was back up and running for the remainder of the day.
ArtTag
Conclusion
Section 08
AR Graffiti Experience
ArtTag is a student-led, student-designed, and student-developed senior capstone project.
Our team was given 14 weeks to create a functional mobile app & installation experience with the prompt to "make something to make Imagine RIT attendees smile."
ArtTag is a virtual space where people can create and view digital graffiti art using augmented reality.
Developers
ArtTag would not have been possible without the hard work of our brilliant development team. Working with devs was intimidating initially, but after ArtTag, I feel confident working with different specialists.
Teamwork
Now that I have experience working as part of a team, I feel confident voicing my thoughts to a group, time management, and giving a little extra during crunch.
Competition
All the senior capstone teams were competing to have the most well-received experience at Imagine RIT, and this friendly competition pushed us all to put our best foot forward.
Looking Forward
ArtTag's Future
ArtTag is designed to make people smile, but at its heart is the idea that art has the power to connect us all.
What gets me excited about ArtTag is the idea that by using AR, we have the opportunity to create a hidden world of art, color, and community expression in every city and on any surface.
Keep Exploring!
Motion DesignMotion Graphics
Cookie CouponsUI/UX Design
Exercise LegendsUI/UX Design
RUNRDesign System
Rare ColorsUI/UX Design
BB&B UniversityUI/UX Design
Connect
Lucie Robert 2022