What is Canvas AR?
Canvas AR was my big capstone project from when I was attending BrainStation. I worked on this project in tandem with other assignments over 10 weeks. Needless to say, it was daunting, but when it was done I felt so accomplished and proud of what I had created.
It was also featured on the BrainStation blog for the UX Design Showcase for Winter 2020.
It features a digital space for people to create art, "tag" virtual spaces and share their creations with the community. Canvas AR also allows people to explore the city with friends to find other people's art in augmented reality.
I wanted to explore an area that I was not familiar with, so I decided to explore the augmented reality space after getting inspiration from talking to people and exploring projects of past graduates.
Here's a quick video summary of the project that I made while I was at BrainStation in place of Demo Day that was postponed indefinitely due to the pandemic.
I think I had my idea, now where do I start?
I started by researching AR graffiti apps and AR technology and looked into creating a digital space for street artists to showcase their creations without physically tagging buildings.
However, when I continued researching and started preparing my interview questions, I realized that I did not know street artists that I could interview and I did not want to limit the audience. I wanted the ability to express yourself to be more available to everyone, regardless of creative ability.
So I decided to pivot
I broadened the user base to everyone and anyone who had access to a smartphone. This allowed being a street artist to be more accessible to everyone. I then expanded my research toward social media apps that integrated the use of augmented reality.
I focused on an augmented reality creative experience that connects people together in a way that fosters creativity and community. I decided to design something for everyone to express themselves while allowing them to connect with other artists and engage with the community.
Are there similar apps out there? Enter competitive analysis.
I conducted competitive market research to see if there was anything similar to what I was envisioning and found a few applications. I compared them to my own idea as well as to each other and I picked features I liked and experimented with them in my sketches and early prototypes.
Competitive Analysis: Geo Street Art
Geo Street Art is an application that lets you keep track of physical street art, discover and follow artists and share them with friends. Additional features of Geo Street Art. Users have the ability to track, filter and stay up to date on new artworks and their locations.
Competitive Analysis: Street Art Cities
Street Art Cities is very similar to Geo Street Art, has the ability to favourite artists, learn more about the artist’s background, and keep a list of street art for your next trip through a city.
Competitive Analysis: Mark AR
This application most closely resembles what I was going for. Where people can create art in the public virtual space and make it available for others to find. It was used for conventions to promote the event.
A problem that Mark AR faces is monitoring content and the behaviour of users to ensure the safety and emotional well-being of all users.
Interviews
After sifting through my research I conducted in-person interviews with 5 people to learn more about their experiences with augmented reality apps and social media apps.
I found that my interviewees had similar pain points when it came to using social media. They felt that social media platforms were focusing too much on vanity, drama and general negativity and they wanted to see more authenticity and creativity.
There was also a general sense of wanting to see others creating things and a sense of connection with other people. I learned that some people would like to share their creations but feel uncomfortable or too self-conscious. So I believe creating a space for people to freely express themselves could be beneficial.
Meet Alesha McGhee!
From my interviews, I created a persona, Alesha McGhee. She is a content designer who wants to share some of her works with others in the art community and find inspiration. However, she finds that existing platforms are too saturated with unrelated material which makes it difficult for her to find inspiration. She wants others to feel encouraged to publish their works - she wants to see more creations instead of people posting photos of themselves.
Sketches
First Iteration
For the first iteration of my prototype, I focused on the task of creating content and publishing it to augmented reality.
Task Flow
Task: Creating something in augmented reality and posting it with appropriate parameters.
User Testing
After the first design, I tested the first prototype with 5 user tests. Overall test results were favourable other than one hotspot that most participants seemed to miss.
In the creation screen, the hotspot was located on the paint tool. Feedback from participants indicated that their first inclination was to tap the middle of the screen to start painting something.
Design Changes
I took the test results and made the following changes to the design:
1. I redesigned the "Post Preview" screen to make it more polished. I borrowed elements from Instagram since it is a popular app, and it relatively simple to use.
2. In the "Creation" screen I decided to move the prototype hot spot from the paint can to the cursor because during testing, 4 out of 5 users tried to tap the cursor to create something.
3. I redesigned the "Viewing" screen after a post is created to have more information about the new posting and the ability to view the creation on the wall.
Second Iteration
User Testing II
For the second round of testing, after I moved the hotspot from the paint tool to the cursor, all participants were able to complete the task successfully.
Feedback for the redesigned screens was generally positive, any additional constructive feedback I took into consideration when I designed the high fidelity mockup.
Feedback for the redesigned screens was generally positive, any additional constructive feedback I took into consideration when I designed the high fidelity mockup.
I changed the copy of some CTAs and refined the look of the interface for certain features by gathering inspiration from similar applications and Dribbble.
High Fidelity
After the second round of user testing, I started on high-fidelity designs. I used Adobe XD to create the prototype and experimented with animation and micro-interactions.
Exploration
I created a screen where users can see what’s happening in different neighbourhoods. I took a lot of inspiration from Google Maps but geared it toward searching for artworks around the city rather than places. I felt that using a map was a good way to show where art has been published and an easy way for users to see what’s nearby.
Growing Community
I added a “Featured Artists” section to incorporate a problem space I had previously explored when I was conducting research. I still wanted to address those who wanted a better way to showcase their work. It also allows other users to see what else might interest them and the ability to connect with other artists.
Creativity
I changed the tools from the paint cans and brushes to three simple options located at the top right of the screen. Again taking inspiration from applications such as Instagram and Snapchat.
I needed a way to maximize the creative space but also have the tools readily available. Through this screen, users are able to create from freehand drawing to inserting stickers to leave their mark in the virtual world.
Sharing Ideas
The confirmation process also borrows elements from Instagram. (Why fix something that's not broken?)
From the second iteration, I made the preview smaller to allow a bigger text box for the description. I also added the option to allow comments and private mode for those who do not want feedback or are not ready to share their artwork with everyone.
In future iterations, I'd like to include the option to manually enter the location in case the user does not have location services turned on in their device.
Consideration for other Platforms
I designed iPad mock-ups to see what Canvas could potentially look like. Some elements had to be adjusted to the wider screen, but it was relatively simple to adjust to the new viewport size.
I chose the iPad because it is also a mobile device with a camera, which allows users to essentially do the same thing as a phone but with a larger display to create artworks on.
Outcome and Learnings
I am very happy with the result of my project, it really showed me how much I can accomplish when I really put my mind to it. I learned how to use new tools along the way, such as Adobe XD, Photoshop, and Principle.
Something I would do differently in my future projects: I would conduct more thorough research to be able to define my problem space better. I want learn how to ask better questions for interviews to gain better insight into what I should consider when designing the product. I would look for solutions in applications that aren’t related for inspiration sooner in the process. I realized that sometimes, solutions are not always in products that are similar to what you are designing, and can be found in products that are completely unrelated.
Next Steps
For next steps I’d like to further explore and design the feature of seeing other people’s creations and exploring the neighbourhood, and how to implement events such as scavenger hunts that feature certain artists or a theme. I’d also like to further explore what it would look like on different platforms, such as the iPad.
By adding that social media aspect, I will have to take into account the effects of social media on the well-being of users. It will be important to explore the issue of people using the application to bully others, to spread ideas of hate etc, and how to monitor and limit the potential for negativity.
Perhaps it will need to be a collective effort between myself and users to monitor content?
That will be something that will require more research and testing.
