AuraFit: Dress your avatar and discover their story!

Track: Storytelling

Inspiration

We both are passionate about fashion and makeup and wanted to incorporate that into our app while also tying in complex storytelling. We initially thought of creating a dress-up game that would allow users to express their self-identity through the pieces they choose to decorate their avatar in. We drew significant inspiration from various dress-up games such as Love Nikki, Animal Crossing, and some indie dress-up games for our avatar customization. However, we realized we wanted a way in which users could obtain articles of clothing and accessories through choices that defined their personality. Thus, we decided to create a main story in which users could make various choices that impact their five main personality traits. We were inspired by many choices games such as Episode, Mystic Messenger, and Life is Strange – the choices you make matter and define the character you play as. In addition, we drew inspiration from personality tests that use a pentagon to represent one's level in each characteristic, allowing for overlap and unique results.

What it does

AuraFit is intended to give inspiration and encouragement to young teens who may be afraid of expressing themselves. By giving them a chance to discover some of their traits via the pentagon stats system in the game alongside articles of clothing or makeup that they can choose from, users learn more about themselves and can experiment with their avatars as a representation of their inner selves. In addition to the main storyline, there is a chatroom that will be the highlight of the app. Users can add their friends in the game, trade items from their wardrobe, and talk to each other about the game or anything else. By giving users this chat room experience, they will feel more integrated with the app. Our vision for the app’s future to create more engagement is to implement a discussion board where users can post on each others’ boards with permission– this allows friends to meet friends-of-friends, and continue to build connections with real people around them! Although the app is still in a primitive state with its appearance and functions, there is much room for creativity and flexibility, which is one of the strong traits of this project.

How we built it

We mainly used Figma to create the entire interface of AuraFit, using different templates to help get us started. After sketching out the logo in Clip Studio Paint and refining it in Adobe Illustrator, we decided on a purple and white color scheme for our app. Then, we created the opening page, giving users two options – sign in or create an account. Following that, we branched that off into different outcomes that relies on which buttons the user interacts with. This framework of setting up the different flows and interactions followed through for the rest of our interface. Once we got to the page introducing the starting avatar, the drawing of it was created in Clip Studio Paint and we set its default pentagon statistics to zero, detailing how it’ll change as users continue to play. We created a field that prompts the user for their name to really immerse them into the story and loaded them into our first introduction chapter. The story was created in Clip Studio Paint as well, imported into Figma and through a mix of scrolling and tapping interactions, we built a story that flows like a Webtoon story that is interactive. After the introduction story, we give users their first choice that’ll help shape their personality. While at the time we only have one of the options available to choose, in the future we hope to expand on each and every choice to create different outcomes that will make each and every user’s experience with AuraFit unique. After we created the choice outcome, we showed how it affected the pentagon statistics and brought users to the main page they’ll be met with after they stay logged in. We give users the core four aspects of our app they can interact with and created the chatrooms and showcased an example of what a choice within the story chat could look like. Then, we created the wardrobe where users can see all the items they’ve collected and dress them onto their avatar with just a click, demoing it through an AuraFit pin.

Challenges we ran into

Our main challenge was learning Figma. It was discouraging when tutorials didn’t work the way we wanted it to, which often set us back. The process was filled with a lot of trial and error, which resulted from many technical issues with certain flows and actions. We attempted to combat this by creating sketches of our plans and outlining what we wanted the different screens to link into. It was certainly helpful, but translating our ideas into the website didn’t always work, which resulted in a more dulled-down version of what we had wanted to create. But despite it all, we are happy with what we ended up with, and will carry this on as a learning experience to further develop this project that we have created and grown to love.

Accomplishments that we're proud of

We are so happy to have our interface working, and proud of all that we’ve done despite our struggles. But mostly, we are glad that our app is something that reflects our vision and will have a positive impact on young teens who find this app. Although many improvements can be made, we believe that our user-friendly app will grant users an experience that they’ll find seamless, easy, and convenient. By throwing first-time users straight into the story, we hope to form a connection with them, as well as showcase a portion of the interactive storytelling experience that will progress into increasingly complex decisions or actions as users level up and unlock new chapters to the story. It’s rewarding to see that our ideas have become a more physical prototype that we can actually test, build upon, and demo.

What we learned

Throughout this journey, we did some research on the topic and browsed through many tutorials to familiarize ourselves with Figma. It was a gratifying experience; learning about all the different efforts that go into app development was eye-opening, as we both are interested in the creative aspects of UI/UX interface development. The most surprising aspect of the process was its meticulousness. One small mistake would sometimes take half an hour to fix because of all the different flows that we had to check through when navigating around Figma. Nevertheless, we were able to fix a majority of the bugs, and are proud of what we have accomplished in such a short amount of time.

What's next for AuraFit: Dress your avatar and discover their story!

Future chapters will include some of the most common problems faced by developing teens and young adults all around the world, and users get to make decisions that branch into different personality traits, outfit choices, career paths, and more. We believe that exterior appearances are one of the most impactful factors in a person’s life, as it not only gives people a chance to express themselves openly, but helps them find people similar to themselves as well.

Story arcs and decision models will be polished through research, usage of AI programs to implement research in a more efficient manner, and expand on outfit designs and pieces as the app undergoes updates.

Question A

Storytelling is a powerful tool used to teach, educate, and resonate with individuals all around the world. Stories are created to ‘stick,’ and to create a connection between the listener, storyteller, and everything involved within the story. However, many stories struggle to resonate with the reader, resulting from the lack of engagement that stems from a perceived absence of authenticity. In addition, it can be hard for someone to truly know their own self-identity -- especially at a young age. There is so much to discover not only about the world, but one’s self.

Question B

AuraFit remedies said issues through usage of active engagement to attract and retain users through a chatroom feature. Users will be able to interact with one another and exchange item parts obtained through game play to build themselves with their avatar. The interface is easy to read for new users and will develop more complex as they level up, which creates a better sense of unity within the app and encourages further usage of the app. Allowing players to interact with one another creates a high sense of relevance as well, granting them a sense of community and encouraging them to invest more time into going through the story and building their persona on AuraFit.

Built With

• clip-studio-paint
• figma
• illustator