Storybook

Ruixuan Li
7 min readDec 8, 2020

--

This is the documentation about my project in the class of ‘Experiments in Augmented Reality’ and my project is called Storybook.

What is ‘Storybook’?

Storybook is a mobile application designed for new graduates, which turns their certificates into memory books by using the power of AR. It improves the commemorative function of the traditional certificate without damaging its certification function. Users are able to add memory clips to their storyline, share memory clips between friends, and ultimately, make their own Storybook where their memories could be preserved.

Video Prototype

My Focus

My focus on the project is designing the user experience for the product as well as exploring the core AR interactions.

Why Storybook is important?

A certificate basically has two functions: (1) administrative/certification function. (2) Commemorative function.

Currently, the administrative/certification function of it works very well, but the commemorative function of it really relies on people’s brains or other materials, like memory books. Generally, people protect their certificates very well but they won’t give the same protection to those other materials. Sometimes, those memories could be lost as time goes by. So, Storybook is about helping people preserve those memorable memories by integrating them with some important things.

Highlighted Features

  • It doesn’t affect its original function
    We cannot physically add some other things to the current certification as this will affect the certification function of it. But using AR to add that information does not affect the original function of it.
  • Product semantic
    Technically, both the certificate and memory book are books. The design of Storybook keeps that consistency in terms of product semantic.
  • Intuitive Interaction
    In the last prototype, the interaction of switching between pictures is sliding. I plan to change that interaction to turning pages just like what we do in the reality.
Interactions
  • Sharing
    Your timeline/memory is not only made by yourself alone. It is the creation of relationships.

Process

> When AR is needed?
> 21 Sparks
> Best 4 Sparks
> Final choice and posters
> Low-fidelity prototype
> High-fidelity prototype
> Video prototype
> Feedback
> User experience flow
> Future research plan

When AR is needed?

I really love the definition of AR that Irene gave us during the class.

AR allows us to interact with the hidden layer of information of our physical surroundings.

This explanation gives me the answer to some questions I had before. In the past, I’ve seen a lot of AR projects which are bad examples for AR from my own perspective. At that time, I didn’t have the answer to why I felt they are bad. But this explanation makes a lot of sense and answered my question. To avoid making some bad examples, I spent a lot of on figuring out why and when AR is needed by people before forming my concept.

1. Information that can’t be seen or felt.

In our life, most things contain two kinds of inforamtion. (1) information that could be seen or felt by humans. (2) information that can not be seen or felt by humans.

For example, there is a burger in front of you, you can know the size of it by seeing. You can know the material of it by disassembling it. You can know the taste of it by taking a bite. However, there is some other information that can not be seen or felt by you. You have no idea about how it is made. You don’t know the calories of it. And you don’t know when it is produced. Everything has some information that could be seen, heard, or felt by you but also has some information that you can not capture. You can feel warm or cold but you don’t know the exact temperature of it. You can see the shining silver color of a knife but you don’t know what kind of metal it is made by.

2. Information that is not frequently used.

The second situation that AR is highly needed is when we dealing with some information that is not frequently used but can not be eliminated.

For example, the multi-function button of the controller of the air conditioner. The EXIF information of a picture. Maybe this kind of information is not important all the time, but we can not eliminate them as some people might need it in some circumstances. Due to they are not frequently used, AR could be an ideal solution that can hide them and show them according to different situations.

3. Information that needs an intuitive way to preview in the environment.

AR has some specialties that some other mediums do not have, which is AR enables content to communicate with the environment. This is the most popular usage of AR in the industry.

IKEA built an App that enables customers to preview the furniture intuitively at home. Taobao(the most popular E-shopping platform in China which owned by Alibaba) built an AR function that allows customers to try different clothes before placing their orders. In the architecture industry, AR is also been used to help designers express their ideas, help workers to construct circuits, pipes, and structures more easily.

4. When physical items work as symbols of virtual services.

In the world we live in, the physical item actually may not be the most valuable part of the entire thing. Sometimes, physical items are just symbols/carriers of bigger concepts.

Credit cards in your wallet are not the most important thing for the entire service, especially in days when mobile pay and NFC are widely used. In this case, things that affect your experience more are your credit line, APR, and bouns… What athletes care about is not the gold medal itself, what they care about is what this medal represents. When you buy a membership card from a gym, you are not purchasing the membership card itself, you are purchasing the usage of facilities. When students got certificates from the school, what truly matters is not the paper itself, what truly matters is the thing that the paper proofs and records.

21 Sparks

After having a better understanding of ‘When AR is needed?’. I started to form my 21 sparks based on my findings. Please check the link below.

https://docs.google.com/presentation/d/1s-wY4h5MlXFOV5xj_48kb8-lBiCJPpoMoCl9ZB-aTnk/edit?usp=sharing

Best 4 Sparks

Then I selected 4 of my favorite sparks from the previous work. The link is below.

https://docs.google.com/presentation/d/1Plg9yHa4vbr3AhsXcxQBokoAfUHaf-BRcNbCV59X1p8/edit?usp=sharing

Final choice and posters

Finally, I selected ‘AR Certificate’ as my final idea and made 3 posters and newspaper titles to express the core concept of my idea.

https://docs.google.com/presentation/d/1UH8PnaZjiLYvvFNalR55Ud3V89rX5LzToWIjdHsU6nc/edit?usp=sharing

Low-fidelity prototype

Then, I created this low-fidelity prototype to demonstrate the draft of my idea by framing the key touchpoints and interactions of the idea. The whole experience consists of 3 parts: Inputting Stage, Generating Stage, Reading/Experiencing Stage.

High-fidelity prototype

After that, I added more details of the user experiences and interactions to each stage and created this high-fidelity prototype.

Video prototype

Then, I created this role prototype to demonstrate what role does my design play in people’s life.

Video prototype

Feedback

The experience before AR was not clearly explained by the prototype. (Where do those pictures come from? Answer: from you and your friends by answering questions. Only pictures in the graduation ceremony could be included? Answer: no, all pictures during your campus life could be included?)

User experience flow

Firstly, the most basic elements for the whole experience are Memory Clips. Memory Clips are multimedia resources like audio records 📣, pictures 🖼 , or videos 🎞 that are memorable to our users.

The diagram below is the specific user experience flow.

User Experience Flow

Future plan

  1. Prototyping the experience before AR.
    Working on designing interactive wireframes for the experience before the AR section and clarifying the experience of collecting memory clips to the users. Finding some people to do user tests, asking for feedback about this section, and making a plan for iteration.
  2. What memorable memories mean to people?
    Having interviews with targeted users to know more about what kinds of memories are memorable to them. This is important for me to design questions for users who have no idea about the content they could upload.
  3. Making a new video prototype that explains the entire idea.
    Combining the prototype of experience before AR with the prototype of AR experience. Making a new prototype that could explain the entire idea more clearly.
  4. Explore more on how clips could be arranged and interacted.
    Do people land on the same content every time? What goona happen if the user has a large number of clips, like 500 clips? How could they interact with those clips except for swiping the timeline?

Thanks to everyone in the class of ‘Experiments in Augmented Reality’.
Welcome any comments!
:D

--

--

Ruixuan Li
Ruixuan Li

No responses yet