ROLES

Art Direction
UI/UX Design
AR Development

DURATION

1 Month

CONTEXT

I am the current Art Director of a magazine called By Design. To provide a more immersive experience into the content, I took the liberty to design an app and develop an augmented reality feature. I've always been interested in augmented and virtual reality (AR/VR) technology, so I wanted to take the opportunity to learn more about UX for AR and implementing that into a product. Scroll down for a synopsis or select the button to view the complete case study.

THE PROBLEM

CONTENT IS KING

In today's era of information, content makes the world go round. With so much at everyone's disposable, it's just as easy to lose an audience as it is to gain it. Understanding what your audience wants to see and finding new ways to show it to them is one of the best ways to keep them engaged. How might we create a more immersive experience into the content that already exists and use that content to make even more content?

THE SOLUTION

CONNECTING CONTENT

By Design is a brand looking for a solution to that question. By Design is a lifestyle and culture magazine based in Kansas City, MO, that focuses on the young creative. Since its inception in 2017, By Design has amassed a solid following through its print magazine issues, Instagram, and the events that it hosts. With its growing audience base, By Design is looking for new ways to showcase its content. We discovered the best way to accomplish this is by creating an app that would combine the physical content with digital content through augmented reality. 

ANALYZE

BY DESIGN'S EXISTING REACH

By Design's main product is the printed magazines, followed closely by merchandise such as t-shirts, hats, stickers, etc. The primary way they communicate with their users regarding these products is through Instagram, where most of the visual content is shared. By Design has a responsive website, but they don't have a dedicated app. The app would include the current content from the site, plus additional features, including the augmented reality feature to keep the users more engaged. 

What Are Your Creative Interests? (Click All That Apply)

1) Photography, Videography, Cinema

2) Social Media, Branding, Marketing

What Are You Searching for on Your Creative Journey? (Click All That Apply)

1) More Inspiration/New Things to Discover

2) A Community

What Sort of Content Would You Enjoy from By Design in 2021? (Click All That Apply)

1) Web Content/Podcast

2) Music Playlists/Mixes

Which Topics Should By Design Discuss More Of? (Click All That Apply)

1) Wellness/Mental Health

2) Lifestyle

USER RESEARCH

ACTIONS VS. WORDS

To better understand what parts of the site to carry from the website to the app, I sent out surveys via email to understand the user's personal and creative interests and then compared that to the actions shown by the users through analytics of the website. 

BY DESIGN XPERIENCE

AUGMENTED REALITY

By Design Experience (BDX) is the app's augmented reality feature that would drive everything home and create the most buzz. BDX would provide an immersive experience into the content that already exists and use that content to make even more content. Users would be able to use their phone camera to scan images in the magazine and view additional video content in AR. They would then have the option to take snapshots, screen record, and share what they are experiencing with friends and family.

HOW DOES IT COMPARE TO THE WEBSITE ANALYTICS?

Based off of the answers received from the user survey, a hypothesis was able to be formed:

"Users are most interested in the visuals that By Design produces, which can be used as inspiration for their creative endeavors. By continuing to improve this content through digital, printed, and audio mediums, and speaking more to wellness and lifestyle, By Design will continue to engage its' audience."

The user survey was consistent with the analytics from the website. Over the past year, the most visited pages are the store/products (magazines and merch) and articles/content. 

INFORMATION ARCHITECTURE

The website analytics provided a great starting point for developing the architecture of the app. It showed which pages to exclude from the application and which ones to focus on. I decided to move forward with Content, Drops (Shop), Events, and of course, the AR feature, in addition to a My Profile section. 

Note: Even though Events was towards the bottom of the analytics list, the founders wanted to include it in the app to utilize that section more at future events.

EXISTING DESKTOP SITE

WIREFRAMES

1 SCREEN

8 ITERATIONS

MY DESIGN APPROACH

A variety of concepts were created for the app's homepage, including experimenting with navigation layout and content organization. 

HOMESCREEN

In the end, for the sake of consistency, we didn't want to stray too far from the website's existing design. So I also moved forward with the black and white scheme, which brings the content to the forefront. 

IKEA PLACE

On screen instructions with diagram

VXCAM

On screen instructions with alignment area. Record and sharing options

19 CRIMES

Step by Step instructions 

19 CRIMES

Selection of items to scan from

MORE RESEARCH

UNDERSTANDING AUGMENTED REALITY

Augmented reality is still a relatively new technology, but many brands have begun implementing it into their products and apps. I downloaded a handful of these apps and studied the common patterns to understand the UX/UI behind the technology. 

WHAT I LEARNED

INSTRUCTIONS ARE KEY

As stated before, Augmented Reality is still a new concept, and many users may not know how to use it. Providing instructions is extremely important to creating the best user experience, so I made sure to incorporate those screens into the wireframes.

WIREFRAMES

BY DESIGN EXPERIENCE

01 NAVIGATE TO BDX

Users can browse content from the home page or categorize it under the top's hero image. To launch BDX, users would select the BDX icon in the bottom right.

HOW IT WORKS

02 CHOOSE AN ISSUE

Users can swipe or tap through the different issues that By Design has released. Depending on what the user selects, content would load for that particular magazine.

03 READ INSTRUCTIONS

Once the issue is selected, users would then read and tap through instructions to understand how to use the feature.

04 EXPERIENCE

After the final instruction screen, the camera would launch. Users would place the AR-enabled page under their phone camera, wait for the content to load, and then experience it in augmented reality. Users also can record or screen capture the experience at the bottom, from which they can share it to social media, messages, or email.

CONCLUSION

NEXT STEPS

I've learned so much about coding and AR/VR through this project. I want to continue developing this project but experimenting with Unity or another program that is better suited for AR/VR. I would also like to create the other parts of the app, like the Events section and checkout for merchandise.

ZEIT TRAVEL WEBSITE 

UX/UI DESIGN | BRANDING 

TANKMATE CARPLAY APP

UX/UI DESIGN | BRANDING

NEWBERRY MUSEUM

ARCHITECTURAL DESIGN | UX THINKING