Story Designer Application

Amir Reza Asadi
7 min readMar 25, 2018

--

I have been interested in design from when I was 5 and I even won a painting competition but for various reasons I couldn’t study design in higher education time but I didn’t forgot my interest during these years and I tried to benefit every possible opportunities to learn about design and during my bachelor’s study in Software Engineering I took optional course of Interface Design but it was not enough for my eager and Finally I reached to a golden opportunity , The Interaction Design Specialization at UC San Diego through Coursera platform and this is my application for capstone of this specialization. During this Course we should select one of below Design briefs: Change, Time and Glance. I chose Glance because I felt its hardest challenge.

Glance

We are surrounded by information. Some might even call it overload. How might technology show us the essential pieces at a glance, so we can quickly navigate through the noise to get to what we really want? We compulsively check email, Twitter, Facebook, and the news — — just in case there’s something there. Right now we are doing the filtering and finding ourselves, why not let our devices do it for us? How can a screen summarize information and present just the most relevant parts (especially if it is tiny)? How can these devices use social and physical context to more effectively have the key information ready at a glance? Today the home screen of many devices is a grid of icons, or a static picture. That’s not very creative. You can do way better!

Your Mission

Find people and design a personal dashboard tailored to their needs.

Before going deeper into details I should mentioned that we have 10 weeks to finish the project and I limited the scope of steps to reach deadline, So the project may have limited futures but I will add many other features such as Concept bowl ,Location and object dashboard and Plot dashboard in App Store.

Need Fidning : I and My friends are fans of fictional books, movie scripts, screenplays and game scenarios, we always want to write a story but We see the process very messy but it needs focus and concentration on the same time, So a dashboard which shows the current status of story.

ّI interviewed with my friends and observed them while they are working on their stories.

The interviews showed that they have a challenge with managing characters of stories so the idea of Story Designer Application has been emerged.

After desiging storyboards and talking about them with friends I created first low fidelity prototype for application to get heuristic evaluatons.

Low fidelity Prototype

The results of heuristc evaluations shows following problems:

Aesthetic and minimalist design: The Setting button is in a bad place.

Help and Documentation: There is no intro in the app. It was hard for me to work with app without your help.

In the second page there is no cancel button
Heuristics: Error prevention
Severity rate: 3 — major usability problem
Suggestion: You should include a cancel button intead the dashboard one

In the fourth page there is a button that user may not undestand
Heuristics: Help users recognize, diagnose and recover from error

Severity rate: 3 — major usability problem
Suggestion: You want to be very clear, put cancel instead

The way to add more characters is confusing
Heuristics: Flexibility and efficiency of use
Severity rate: 3 — major usability problrm
Suggestion: You should define where user can write down the information about characters

What’s in the dashboard?
Heuristics: Recognition rather recall
Severity rate: 4 — usability catastrophe Suggestion: You should show user what’s next

According to feedbacks from Heuristic Evaluation I designed a Wireframe for dashboard of application.

and planned below changes:

1. change location of story selection button.

2. There should be help section.

3. Adding a menu button could solve the need for back button.

4.there should be an intro that tell the basics of app to user.

5. Moved setting button in the menu.

6.Using Writing term instead of script.

7.Add new character button inside of new writing page

Development Plan

So based on the development plan I started developing the fully functional prototype with help of Marvelapp. It’s easier to use in compare to Invisionapp but Invisionapp has more functionalities such as A/B testing with Google Analytics

Point of View for Application:

Story Begins With Story Designer

The purposed application is a story designer.Yes stories has architecture and writers are designers but they use old methods like mind maps on blackboard so they need smarter solutions and their personal dashboard.The story designer allows designer to write their stories and assigning them to characters and writers can see the status of characters. The writer can get new insights by glancing at dashboard.

In 8th week of course I ran in-person testing evaluation.

Testing protocol

Goal

To evaluate the perceptions of users toward the Story Designer application.

User

-Vahid is my friend he is a software engineer but he studied film making too and he read many stories and want to become a scenario writer in future.he is 27 years old.

-Reza: He is electronic engineer but he loves reading fictions so he can speak about aspects of stories well. He is 27 years old too.

Both users have not prior experience with the application.

Setting

The testing session will conducted in my house.

They test application on iPhone. and Observation will be recorded with iMac front camera.

Researcher Roles

Researcher will greet participants and install the prototype on their devices.

Before starting the test the researcher should warn users about recording the testing sessions.The researcher tells short information about application goals and ask them to do certain tasks. During the Study, the researcher

Methodology

Evaluation include briefing ,tasks and post test interview. Estimated Time: 30 minutes.

Test Scripts

Thanks for Your participation.i’m going to brief you the test. The app will a provide dashboard and script writing for story writers. The apps want to help you to become the next J K Rowling Easier.

First of All you should know that we don’t want to test you. We are only testing the applications so there is no wrong decision for you.

Secondly I will provide you a list of tasks , Please complete them on your own way but please feel free to ask me questions any time.

and at last but not least, It would be great if you think aloud as much as possible.

Tasks

  1. Set up your account.
  2. Create a new story
  3. Write a writing
  4. Create a character
  5. Check Dashboard

Post Test Interview Questions

1.What did you feel toward the application?

2. What do you need in app that it wasn’t provided in app?

3. are the terms and tables of Application easy to understand?

This is Vahid, He thought he can’t add his phones camera to app, then I told him its possible in app.I may redesign the adding photo interface.
Reza prefers to test the app outdoor because he think his productivity is higher in outdoor. He mentioned some interface design issues such as size of fonts. He also suggested importing posts from other applications.

Based on the results of inperson testings I planned some changes and designed an alternate design.

Change Plan
Alternate Design for character assignation

In 9th Week I ran A/B Tests through usertesting and google analytics

Usertesting evaluations were mind blowing

Summary of findings:

First of all user testing changed my perception toward app intros and user guides, because it takes more time than I expected for completing the tasks with app and The site navigation need more works.

Tone of voice of users who tested design A was boring because they were confused about the flow of Character assignation because the character bar was in bottom and they didn’t see it, but character bar of design b was easier to find.

at last but not least one of tester suggested that design the application for larger screens such as iPad and Mac.

Similarities of A/B screens

They visual presence of characters in both design were interesting for testers and of them called it intuitive but both of them need better intro and user guides.

Differences of A/B screens: Design B provide more space for different story writing features and toolbar was easier toward but the design

Conclusion with Example:

Character Assignation process in Design A was confusing and hard to find because the bad position of character bar in the other hand users who saw design b immediately understood how to assign a character to writing .

Furthermore I ran an A/B test with help of google analytics, I wanted to investiagte that whether users are using character assignation bar or not

To calculate the statistics I used

http://www.houseofkaizen.com/conversion-rate-optimisation/resources/calculators/split-test-significance

Stats

The winning variation is Design B at a 86.73% confidence level.

But You need 95% or more to trust the test results.

So this test couldn’t help us on for deciding which design has better usability.

However based on fidings from usertesing I selected Design B for Final version and I added new character button into main menu too.

Final Version : https://marvelapp.com/31h71i8

--

--

Amir Reza Asadi

Managing Director of Humind Lab, HCI Researcher, Designer & Futurist