ArtUnity

Memory Lane

Geocaching is no new concept.  Imagine if it could go beyond sharing random trinkets but some thing deeper such as memories or important experiences. This school group project is an app that nurtures a community of adventures who are interested in learning the stories of others in a more profound way than can be found on the typical fast-paced social media platform. I helped with building the app pages, prototyping, and image making working alongside classmates Mary Gutierrez and Brandon Huynh.
Skip To Prototype

Visual Language

We wanted the app to feel clean, friendly and add a touch of nostalgia to honor the brand name and the concept of the product. We decided to use a serif typeface for the logo paired with a simple location icon with a key inside that would act as a favicon. For the illustration, we stuck to keep the details as simple as possible and to give forms more dimension gradients with grain texture was added on top.
Typography
Logo
Illustration Style

Site Architecture

There are three key branches of navigation for the first time user: onboarding, map, and me. We wanted journeys to be the most accessible thing to encourage users to tap on a journey that interests them the most. To add further motivation, we wanted to add a gaming aspect to the app by giving players ranks as they increase their explorations found in the me section.
Project time stamp
Nov. – Dec. 2024
In collaboration with
Eva Devanathan
Sofia Torres
David Zhang
Role
Primary Designer
UXR Support

Crafting community

Artists are responsible for bringing color into our world. Yet, their academic programs are the first to face cuts, the last to get infrastructural updates, and the least to be supported in their careers institutionally. Despite not being taken seriously, artists have managed to carve out their space, and now more than ever, we see many becoming entrepreneurs tabling at art events and selling in stores. There is no blueprint, and resources are fragmented. So we set out to design a support system for artists, art enthusiasts, and suppliers in this space.

Preliminary research

To understand the artist space better we conducted a literature review, competitive analysis, and survey.  We started out by reviewing 5 papers pertaining to topic spaces of social media and mental health in art communities. After reviewing papers we put out a survey that was answered by 43 people of the art community. I even went to a local art event and was able to briefly speak with 10 artists to share the survey with them.

Key survey stats

  • Top 3 Challenges: Difficulty networking, finding the right audience, platforms ill-fitting for artists.
  • Top 4 Desired Features: Event discovery, resource sharing, networking tools, portfolio showcase.
  • Top 3 Connecting Methods: Forums, direct messaging, live meetups.

What we learned

Our literature review taught us a plethora of artist communities desire to feel connected, supported, and guided in their careers. Papers mirrored our initial inclination that artists feel that there is a lack of unity amongst themselves and that community is necessary. The survey reinforced that artists and art lovers feel overlooked, want more opportunities, and want more support in their careers/art exploration journeys.  

Product brainstorming

Based on the feedback we received from our surveys, it was clear that we needed to provide ways for people to share their ideas and knowledge. We wanted to provide networking and collaboration tools as well as a space for artists and art enthusiasts to advertise their services and products and build a stronger community. We did some product research and looked into existing applications in the art and social media sectors, one of them being LinkedIn. LinkedIn's tabs that offered people the opportunity to network, share thoughts, find work etc. somewhat fell in line with the main features we wanted to offer to artists and art lovers. Inspired by LinkedIn and informed by our preliminary research, we fleshed out that our app should be for artists, manufacturers, suppliers, and art enthusiasts. It should provide location-specific information regarding manufacturing, classes, events, and communities.

Site architecture

We designed our platform to have 5 sections in the nav bar: a home feed of relevant posts, a tab to network, a space to post, a place to create and join communities, and lastly a profile to increase self-visibility.

Low fidelity prototype

We collaborated together to organize each of the sections in a white-boarding session.

Home
Networking
Post
Communities
Profile

Brand language

For brand language we wanted the app to feel professional but not as formal as LinkedIn. At the same time we didn't want the platform to feel as casual as spaces like Reddit or TikTok. Trying to find a sweet spot between professional and casual we started off with a color palette that has warmth with a little punch, yet grounded by darker earthier colors. For the logo we continued the balance with a serif A and U linked together, but fun splatters of paint behind it. In the case of ArtUnity we didn't really need an illustration style. However I did stylize icons so that they felt more cohesive to the brand.  

Typography
Logo

Illustration Style

Final screens

We presented our project to our class and overall it was received well. However, some people pointed out having a space to collaborate on projects would be really helpful for creatives. So we added a collaboration feature in direct messages and also designed the onboarding experience which was vacant from our lo-fi. The onboarding was essential to outline to properly illustrate how the information users end up with will be tailored to their interests, intentions, and location.

First time splash screen indicates need for set up.
We ask questions to begin tailoring the feed and establish which user group you fall into.
Since we wanted to provide location specific information, we wanted to make it clear that this is information will be required.
Based on previous answers certain communities will be recommended.
Home has a feed curated based on onboarding answers and other user engagement.
Network will suggest connections and will also have features to edit your network.
DM's and collaborations share space because both require a lot of communication.
Starting point of collaboration begins with the plus sign.
At the top of each chat there is a drawer where important notes and files can live.
When that top drawer is filled out, some information will be displayed on each collaboration card.

Flow Chart

There are three key branches of navigation for the first time user: onboarding, map, and me. We wanted journeys to be the most accessible thing to encourage users to tap on a journey that interests them the most. To add further motivation, we wanted to add a gaming aspect to the app by giving players ranks as they increase their explorations found in the me section.
Onboarding
This is the first interaction with the app for first time users. The screens in this sequence invites users to embark on a journey of traveling through other people's memories via the analogies of locks and keys.
Welcome page that introduces the analogy of sharing moments vial locks.
Second onboarding page further clarifies the purpose and importance of keys.
Encouraging users to share memories to add to the social aspect of the app.
Continue to introduce the mild gaming aspect the app has to offer.
Last onboarding screen serving as a call to action to start exploring.
Map and Key Selection
The map displays memories near the user that are ready to be journeyed. Users can pick any journey they want to and in order to complete the journey they must physically go to the location to unlock the memory. By physically traveling to the location users go on a physical adventure encouraging movement, discovery, and fun.
Users have the ability to search other areas, view their keys, view keys near them, and leave keys of their own.
A notification pops up whenever a new key is dropped.
Selected journey are highlighted in blue and are accompanied by a preview tab.
The journey preview serves as a trailer for the journey ahead.
Find and Unlock Key
After selecting a memory journey users can track their progress in real time. Once they have reached the vicinity of the key bubble, a lock will appear prompting to be unlocked.
Once a journey starts a route is highlighted.
Once a person has physically traveled to the journey does the lock appear with an option to be locked or unlocked.
If user chooses yes, a simple unlocking animation plays.
Unlocked memories have a visual aid of a photo or video along with a story left by the memory sharer.
Commenting and Viewing Activity
Memory trekkers are able to leave a comment encouraging them to reflect on and share their experience of the journey.
Commenting is encouraged for a sense of community to be built. Feeling seen motivates people to share.
We wanted to provide an option for anonymity to give comfort for more anxious users.
Comments can be posted once the text box is filled out.
Once a journey is complete an unlocked banner pops up to celebrate the completion.
This journey has gained one memory trekker and that will be visible to anyone who taps on the journey next.
Profile
The Me tab houses sections for keeping track of keys/memories you share, your rank, and how many keys you've found. We wanted to keep things like rank and how many keys found on the profile page because we wanted experiencing the journeys be the focus rather than chasing numbers and rank.
Welcome page that introduces the analogy of sharing moments vial locks.
Current Rank is written on rank button and next ranks are listed to set the next goal of exploration.
Past ranks are listed below to give a sense of progress and achievement.
Number of keys found is clearly stated on the button and more detail info is listed below in case they want to revisit.
Leaving a Key
Leaving a Key not only add more memory journeys to the map but also serves as a record of memories and experiences outside of the traditional scrapbook or social media grid for the key leaver.
Interaction of leaving a key starts with the button on the bottom.
A section will pop up prompting users to name the journey and write a preview for the memory.
All components must be filled in order to move on. Memories are allowed be posted anonymously.
Next a visual aid needs to be added. Memories can be stimulated in many ways so having a visual as well adds another layer to the story.
Filters for photos are available to give users another layer of expression.
After selecting a photo, a full memory needs to be written before dropping the key.
Completion of added memory is indicated with a rewarding sparkling blue dropped key.
Watch Us Walk Through The Prototype!

Takeaways

Doing the survey really opened my eyes to the longing that this wonderful community has to call some place home on the internet, and more importantly, to be taken seriously. We had some people share how grateful they were that someone was finally taking the time to study the community. Moving forward, we will be conducting usability tests to further improve our idea and hopefully we can one day we can give the art community a place to unite!

Project Take Aways

Working on this project was an learning opportunity of what it means to build a product as a team. It definitely made me understand the importance of communicating ideas clearly because even though the three of us were in the same program and classes, we approached things differently and had to constantly communicate to make sure we were on the same page. Each of us had our strengths and learned from one another during this project. I do think there are somethings we can take a step further such as adding more points to the journey rather than it feeling like a point a trek from point a to b or having more checks and balances in the background to make sure that people are putting out worthwhile stories instead of trolling people. Regardless of it's imperfections I am proud of this body of work and throughly enjoyed making this app with my team.