Overview

Virtuart provides an experience that exists at the intersection digital immersion and physical space, utilizing 3D space mapping technology that can discern graphical overlay, placement, and distance. 

OBJECTIVE

This app provides people an easy and delightful way to draw on the world around them by utilizing their phone camera and augmented reality technology. The AR drawing experience operates in real-time and allows one to interact with their environment on-the-spot.

Moreover, it’s a way for users to leave a digital footprint for others to discover—time capsules of experiences attached to a particular location. To this end, Virtuart is also intended to be a digital community and social media platform for users to find and engage with each other's creations.

APPROACH & DELIVERABLES

Virtuart is a project that I am conceptualizing and undertaking as a personal practice. Though I will follow the process model for UX design (including user research), this project is not forecasted to ship or become a real product. 

Process

My process for this project includes the following:

RESEARCH
Study Context
Interviews / Surveys
ANALYSIS
Personas
Scenarios
IDEATION
Information Architecture 
Low-Fidelity Mockups
DESIGN
Wireframes
High-Fidelity Prototype
FEEDBACK
User Testing
Interviews
CONCLUSION
Assessing Findings
Reflections

Research

Currently, one of the most common devices for digital art seems to be the smartphone, and their mixed reality technologies have been advancing at an unprecedented rate. Google has been a pioneer in mobile VR, first with Cardboard and now with Daydream. These efforts alone are leading to a myriad of mobile AR and VR apps. The enhancement of software and smartphones are also paving the way for more progress in this new, fascinating field. Here’s a look at some existing products that use augmented reality.

Below are images of Color & Play (Disney), 1600 (White House Historical Association), Reality Editor AR (Valentin Heun), and View in My Room 3D (Houzz).

I spoke to twenty individuals from the ages 18–25 for their thoughts and predictions on mixed reality. Most expressed mixed sentiments, though almost all predicted that there would be a resurgence of AR/VR into mainstream media in the future.

AR is the future. It’s not commercially viable in its current form, but that doesn’t mean it doesn’t have a lot of potential.

I’m totally on this bandwagon. This will be integrated in my life as soon as I can afford it.

After AR and VR, I would love to have dream reality.

Virtual reality is overrated, but augmented reality’s applications are boundless.

I’d use AR to put virtual memes everywhere.

GPS augmented reality built into my car’s windshield would be helpful.

An AR drawing app would be cool. Like Snapchat filters but with 3D space mapping.

Shut up and take my money already!

VR and AR aren’t a passing fad. They’re just still being developed. The two will probably become integrated over time. 

I think that VR will probably thrive as a gaming platform. Though, as a gamer, I can say that it’s not too popular with the majority of us. 

There’s an app called Magic Leap that creates mixed reality and your brain won't be able to tell the difference between real and fake. It sounds both amazing and creepy… that might be what we’re gearing towards with this new technology. 

I'm just waiting for the day Microsoft Hololens becomes about the size of normal glasses and is affordable.

I don’t see a lot of productive uses of VR/AR, outside of gaming. 

Mixed reality will be like 3D. Companies think its the future, but consumers don’t give a crap. 

In what mainstream environment can VR or AR really outperform the desktop or phone? 

I’m not sure what the market would be.  

I’m more concerned about privacy. 

VR and AR are dead. Consumers have been over-promised and under-delivered. 

VR/AR won’t ever be truly useful. 

It seems years after this technology has been on the market — in each form, one struggles to justify its use. 

Potential for a lot of bad (Read: Black Mirror).

According to Gartner hype cycle, experts predict that AR and VR sit around the disillusionment trough of the hype cycle and thus, estimate that there will be at least five more years before mixed reality finds renewed interest.

GARTNER HYPE CYCLE

According to the 2016 AR/VR Survey Report conducted among 650 AR/VR startup founders, the two greatest challenges facing mixed reality is lack of content and the public being slow to embrace mixed reality.

GREATEST CHALLENGES FACING AR/VR

Keeping these survey responses in mind, I worked to circumvent common AR/VR roadblocks in my own project.

The question with these problems is not if we will solve them, but rather when we will solve them. 

Ideation

USER PERSONA — JADE

USER ILLUSTRATIONS

This is Jade. She likes social media, drawing, and meeting like-minded creatives. Through sharing her work on Virtuart, she can engage with and meet other creatives.

Design

As the saying goes, “A good start is half the battle." Before going into user interface design, I made sure to polish the features and user interaction flow.

The following feature flowcharts describe the content strategy and user flow through the app, listing potential features users may interact with. The creation of flowcharts are the basis for refining the workload necessary for developers and higher-fidelity designs later on, and for discovering potential issues behind the product in a quick and time-efficient way. This app serves as both an area for interacting with augmented reality as well as a social media platform for projects to be shared in a community.

GENERAL FLOWCHART

FTUE & ONBOARDING

When the user starts the app, they will be led through a Sign In or Sign Up and onboarding process before proceeding to their default screen, the Home Feed, which houses a footer navbar. The navbar has five tab options:

1)   Feed & Search — where users go to see their friends' and community's activity

2)   Map & Nearby Posts — where users go to see geographically nearby posts

3)   Camera — where users go to interact with AR and prepare posts for sharing

4)   Alerts & Messages — where users go to view notifications and private messages

5)   Profile & Settings — where users go to view their public profile and settings

Splash

Account creation

Sign in with social media

Onboarding carousel

Onboarding carousel

Onboarding carousel

Profile creation

Location Authorization

HOME » Feed

In the Home tab, users will need to authorize location tracking before being shown the Feed. Much like Instagram's feed interface, users have the option to scroll through one post at a time, each containing a link to the creator's profile.

Comments (by holding comment button)

Feed tooltip

Profile view

Elongated feed view

Messaging

Refresh feed

Lightbox (by tapping image)

More options

HOME » SEARCH

In the Search tab next to Feed, users may locate works by their tags, creator, and location.

Filter for search

Filter » User results

Elongated feed view

Filter » Location results

Filter » Tag results

NAVBAR MENU » NEARBY TAB

If the Nearby tab is opened before the Home tab, users will need to authorize location tracking before seeing the Nearby Map. On the map, there is a carousel of nearby posts that they may browse through. The map will highlight the post correlated with each card on the carousel, revealing the location of each post. To view the post associated with that location on the map, users may tap on the card.

Alternatively, users may pan and zoom on the map to find works nearby.

Location permissions

Nearby posts

View post from map

NAVBAR MENU » CAMERA TAB

Camera permissions

Calibration

FTU Tooltip instructions

Snapped picture

No notifications

Notification

No messages

Messages

ENGAGEMENT

Camera permissions

Calibration

FTU Tooltip instructions

MISCELLANEOUS

Notification
After first post

Rating
After 1st hour

Rating

Messages

Brand Guide

This is a style guide for Virtuart's brand and mobile application. This style guide contains colors, typography, grids, navigation bars, buttons, icons, and fields.

COLORS

Primary

Secondary

TYPOGRAPHY

GRID

The grid is responsive to the size of the viewport.

Mobile Devices

Mobile devices include all iPhone and Android models.

The grid has 6 columns (46px each), a total width of 375px, and a gutter of 16px. The breakpoint is 375px. 

The top navigation bar has a width of 85px from the top. The bottom navigation bar has a width of 72px from the bottom.

Tablet Devices

Mobile devices include all iPad and Android tablets. 

The grid has 12 columns (46px each), a total width of 768px, and a gutter of 16px. The breakpoint is 768px.

The top navigation bar has a width of 85px from the top. The bottom navigation bar has a width of 72px from the bottom.

NAVIGATION BARS

Header Bars

BUTTONS

ICONOGRAPHY

VR Design

3D models created in Adobe Illustrator using the blend tool.

Conclusion

Coming soon!