Master Of Animation, Games & Interactivity
Master Of Animation, Games & Interactivity

Video Link: https://youtu.be/hMJcyOn7ius

Script:

It is a mobile AR program for music lovers to explore things they feel curious about, and it is playground for young users to experience the things that is history.

The app icon is designed half of digital representation and physical wrap on the other side, meaning the merger of the media. To play this is simple, all you need is install the app on the App Store, and just open it. 

All the UI element are designed to be neutral and flexible to exhibit the albums you love, putting you as the center of the app. And once you are in the app, you can aim your device to a random shelf and the album will automatically appear on it.

Tap to select the album that you want to see, scroll it to look through.

And you can place it onto a table to open it, just like the traditional way. But what makes it different is this!

Talking about Retro visual style, a trend has brought back to the contemporary culture, its impact spreads through multiple fields, such as the music industry, show business and etc., appealing to internet users, especially the Generation Z group, who most really haven’t experienced using machinery players like vinyl players as main devices. They seem to take major interest in its derivatives, such as VHS filters, and Millennium devices. 

Meanwhile, they grow up with newer technologies like smartphones, VR, AR and etc., hence two of these elements combined together have generated curiosity. Different than retro marketing, where products or services are generally obtained, they are products that remind another group of customers of a past memory (ÖZKAN PİR, 2019), while they had a feeling of being in control, Generation Z feels like a stranger. But similarly, both retro marketings are fabricated as a fashion that offers a glimpse into romanticized stereotypes (2019). To conclude, a balance between Generation Z and the other customers has formed, as there is space for imagination for all people to collaborate and explore new forms of delivery.

So this is what I plan to do. an AR Scanner of Showing Dimensional Layers of Album Artwork in the Form of LP Record.

To structure this idea, I need to imagine an experience first, what is featured, what is supplementary, and what is the hit that anyone who uses this can instantly remember as. I need to think about and organize them, so one of the most important factors is the face. Nothing can get away with an intuitive appearance, which motivates you to touch, to play with it. I illustrate the wireframes after the flowchart and style guide, so that gives me a general outline of what my project may look like, so I can continue to decorate them. I can give you a preview of the mockups.

With themes on, you can see that there are several distinguishable elements there. Some of them are like real objects like the tape buttons on the home page, and others feel flattened and simple. I've got a theory on this. Since I am building a collection from various themes, there has to be a conflict between styles, for example, a wooden UI interface is not perfect for a futuristic theme, right? It'll be like an antique versus an alien. So my solution is to make it as neutral as it can be - just leaving an accent color to identify the app brand, that's all. I also got inspired by exhibitions, because they've been using colorless and neutral visual elements as well.  

In order to build a versatile collection of albums, I must look through the music industry, to see what they have been progressing, and vinyl players are spotted. Each of them is a visualization of the preference of the users and also the insight of industrial design. This is beyond audio quality anyhow but shows a clearer prospect of what modern people are doing - collecting. With the help of technology, people are looking back and collecting the memories of the past, it is a recess and also a revision of what we have today. We must look back to advance.
Also, I took specific attention to the trendy application of AR technology today, also it shows a different possibility rather than just 3D objects on the display on the ground.

Next, it is design sketches. To further explore themes, I took research on filtering the featured element of each music genre, and this is what I have now. Kids' songs are describing a story, probably a teddy bear fighting for justice, so I designed a gift box with a teddy bear doll in a vinyl album when it is unfolded; Songwriters' songs emphasize mental environments, and piano or guitar is an expressive representation, like A Thousand Miles, A Thousand Years, artists use piano melodies to immerse the audience into their state of mind; next, we have a vinyl player, which implies a classic song that everyone remembers and loves; Ballet implies classical songs, and car engines imply some typical Hip-pop songs, artists sing about their rich life, especially wealthy cars, and they want to show these things with the audience, so that's what I headed.

Once the user opens the vinyl, a variety of themes is an inner world that portrays an environment that the artist wants to illustrate. The experience is like looking at a world from up in the sky. And this is what I want to do with this album - MAVUE, which describes a summertime with a girl.

Next is the Working in Progress evidence. I have mostly done my work in Cinema 4D for now, and I plan to expand the project in Unreal Engine for more compatible platforms. The two techniques that I want to mention are effects and animation tuning as this is an experience that takes after real life.
1. F-curves: Since the animation for the demo is specialized in AR cameras, I picked a position and a camera angle in which the way that user may put their AR devices. The animation is simulating that an album is selected and ready to be opened on a table. You place the album on the table and unfold it in the usual way. You will see the flat images that are printed on the screen. But what makes it interesting is that the flat image will automatically pop up as a 3D layer and play music for you to interact with. This is beyond the traditional experience when we bought a physically vinyl album.
2. Squash & Stretch: For so long, I wanted to build an animation of an object teleporting from a flat plane, like a multi-dimensional pocket. I searched the animation on the Internet and no results came up until I tinkered with this effect on C4D. which is Squash & Stretch. From its name, we can see that it can flatten an object into a thin paper, but operating it is not easy. The result is, that when you define the position of the top and bottom threshold of the effect and place your object into the range, it will affect the target object without any horizontal expansion, just like what I dreamt about the portal.

Determining color palette, buttons and important UI elements can help me illustrate the overall tone of the experience, especially on the left side of the style guide, which settles the vintage, retro vibe, while on the right side, there is also something futuristic elements going on to leverage the seasoning, such as rounded corners and curved typography. That’s also why I decide to continue with AR experience, we remember the good old days not just to feel settled, but to explore what more can be possible and friendly.

Before implementing the prototypes, I must have a clearer view of the plans, so flowcharts it is, so first I’ve written every interface with texts, including goals, content and even animations so that I can visualize them with wireframes and mockups. Most importantly, I can look back and think about what has been missed or hasn't been implemented yet.
My methodology is that do try to simplify the usage and functions and access them with just GESTURES, and UNIVERSAL BUTTONS.
Horizontally expand the experience rather than create separate functions.
So this is what I've been planning, and now I'm finishing the Phase 2 production, which is basically visualizing the whole idea so that I can inspect them anytime when I am in production in 3D modeling or Coding. In response to better interactivity, I also plan to bring playtesting to the field with activities and pre-release. In this way, I can receive feedback on both the development side and the user experience side, so it will be a great starting point especially in the final stage of the production. I am not making a program just for myself, communication is also important in designing.

Furthermore, in Folio 2, I plan to polish the experience in these areas, especially user experience side, which is a prospective planner for the Studio 3 project. What audiences pay attention to and respond to, is a clear path for me to explore. Also, as an industrial product, I try my best to double down on compatibility since everyone has different devices

About This Work

By Daien Lyu (Dane)
Email Daien Lyu (Dane)
Published On: 03/09/2022