Fransiskus Stepfano's profile

Ciayo v1.0.0 UX Process: The Beginning

Ciayo Comics UX (Android Platform)

Introduction
Ciayo Comics is a platform to read comics online. It makes reading comics experience more easy and seamless with just 1 click away through smartphone and of course it's free at all.

My role in this project was as UX Designer, but sometimes i'm also helping the research process. I collaborated with UX Researcher, Copywriter, Product Manager and Product Owner.

Tools: Sketch App, Mira for sketch, Protopie, Google Form, and Card Sorting

Project Live Version: https://www.ciayo.com/ or click here to download the application


UX Methods: Lean UX
We were only given one month to build this project (MVP), so we decided to go with Lean UX method. But even if we were using Lean UX, we didn't totally skip the research process. We were still doing some research but with just enough research just to sustain our assumption. Our aim was to get feedback as soon as possible so we can validate our assumption and doing next iteration to improve our product.
Lean UX Design Process
Stage 1: Define

Product Objective: Provide unlimited free comic (especially local comic) for everyone and supporting and collaborate with author to produce high quality comics.

Business Goal: Get as many user as possible, maintain active users while getting more new users.

User Goal: Seeking for online entertainment.

Target Market: Adults (17-24) & Comic Lovers (All ages)

Hypothesis to Validate: People willing to read new comics if the comic's content is interesting enough (we assume local content has more selling point and more interesting) and the platform is well designed for supporting reading experience.
Stage 2: Research

Interview
I helped our UX researcher to conduct user interview with 5 of our target users. We were trying to find out their behavior and preference on reading comics. We were asking what their motivation for reading comic, what genre they love and what not, what are they favorite comic and why they like it.

What i have learnt: After done interviewing 5 of participants, i have learnt that comic reader are divided into 3 groups based on their weight of addiction and time spent for reading comic. We gave each group a name and call it with heavy readers, casual readers and occasionally readers. 

Survey
I collaborated with our UX researcher to create a survey. The objective of this survey is to get quantitative data so we can prove our assumption to our users is true.

Survey URL (survey was created in Bahasa Indonesia):

Our assumption:
1. Users are more prefer to read digital comic rather than the printed one.
2. Image and genre are the most important factor for user to decide whether they will read a comic or not.
3. Plot is the most important reason for user to share a comic.

Survey results: sorry i can't share the result for now because it's confidential and not share able based on the company rules. But i still can telling you the summaries of the results from 60 participants.
Assumption 1: 65% of participants choose digital comic.
Assumption 2: Image and genre are the most important factor in general, but for female users the most important factor are image and synopsis, they don't care at all with comic genre.
Assumption 3: Most of them willing share only for comic with a good plot.

Competitor Analysis
We're not alone in this business, yes of course there are many competitor outside with similar product with ours. But, we believe competition have a lot of benefit rather than its disadvantage so we decide to learn what we can learn from them. First, we list out all of our competitor names, here we go:

1. LINE Webtoons
2. Tapastic
3. Comica

After looking at glance those 3 competitors and some others similar product, we decided to gave our focus on LINE Webtoons. 

Lets talk about LINE Webtoons first, the biggest comic platform in Indonesia or maybe in the world with more than 18 millions monthly visitors. In our analysis we found out its weakness from this platform, LINE Webtoons reader doesn't have direct access to reach out their favorite author and we believe this is very important for reader and author to give and get feedback to improve the quality of their comic. But LINE Webtoons also has a lot of things to learn from, They IA is designed to boost up new or unpopular comics while keep their popular comics are discoverable and they did it in a very good way. Not stop on that, LINE Webtoons also has a good campaign system to generate a lot of their content with conducting a comic competition (user generated content) called LINE Webtoons Challange. With conducting that campaign LINE Webtoons has success to boost up the number of their content instantly.  

Actually, there are still a lot of things that we got from LINE Webtoons, because we think that LINE Webtoons is our biggest competitor so we spent a lot of time to learn about them, but, unfortunately it will takes to long if i need to explain all of it in here, so if you're still interested to talk more further then lets talk in private :)

Open Card Sorting
Our team conducting a very simple card sorting, we were only using small papers with name of elements written on the paper, then we asking the participants to grouping the paper base on the their perception and relation toward each element. The results from 5 participants are similar so we didn't had to waste to much of our time to manage the data.
Stage 3: Design

Wireframe
After collected some data from our research process, we start to determining our focus on build product MVP. We want to test our contents (comic) are accepted by users or not, so for the beginning we will only develop the contents first with limited platform specification to only for reading comic. Limited in here is mean user can only read and share comic, just that. 

Without waiting for too long i started to create a wireframe based on all data that has passed from our UX researcher. Here's list of data that i was used:

1. User preference and behavior from user interview + persona
2. Data from survey
3.Reference from our competitor analysis
4. Information Architecture from Card Sorting

First, i created user story of my product for helping me on designing and i believe user story could keep me to be more focus on user purpose and what they want to accomplish. Here's some example from my user story:

As reader, i want to immediately pick an interesting comic to read, so i can enjoy my time.
As reader, i want to share my favorite comic with my friends, so my friend could read it and we can start a conversation about it.

After create user story i'm continuing with define what pages i need to build and following with the elements that will be placed on those pages based on IA i've got from doing simple card sorting.

When all of those things has prepared, then i started to create a wireframe and i started with the homepage first, because i believe homepage is the most important part. Why homepage is so important? In this page most of user will have their first impression with our product and they will decide to continue to explore the product or just leave it immediately. After done with the homepage then i continue to create one by one for each remaining pages. Here is how my wireframe looks like.
Prototyping
After done with wireframe, we continue to build a prototype to validate our assumption. Before i build a prototype, first i started with creating test case scenario by translating from user stories that i already done before. Those test cases will helping me on doing usability testing later. here are list of my test cases:

1. Pick 1 comic to read from editors' choice
2. Read 1 of popular comic
3. Find and read "The High" comic
4. Try to find out the writer of The Fourger comic
5. Share The Fourger Comic to Facebook
6. Share The Fourger Chapter 15 to Facebook
7. Read The Fourger Chapter 14, read until the end of chapter and go to the next chapter

Based on those cases' flow then i started to build the prototype, i used ProtoPie as my tools. Here's how my prototype looks like:
While building this prototype i also asking our comic team to provide some comic contents so we can test our user interest level on our contents. Then we embed the content on our prototype so the prototype is now ready to be tested. Lets move to the testing section where we will interact with the users to see their reaction and get their feedback.
Stage 4: Validate

Usability & Concept Testing
Now it's time to test our assumption is correct or not. We have assigned a team to recruit 5 participants to participate in this testing, the participants also has been passed the screening process so we could say they are the right people for this test.

We conducting this test full in one day with 5 participants and 1 hour for each participant to do this test. Our user researcher as the interviewer has ready from the morning and ready to interview our first participant while the others team is watching from the different room. The first participant wasn't encounter any trouble while using our platform, but he said that it would be better if the navigation is located in the bottom because nowdays almost all apps using bottom navigation as their main menu. Then after the first participant is finished, we continue with the second until the last one. All of them doesn't have a serious problem when using the platform (and i'm so glad to heard that), but from all the participants they have some similar feedbacks after they did the test. here's what almost all of them said:

1. The navigation is better located in the bottom 
2. Trending menu is sucks when you only have a little content, so it's better to remove it for a while
3. Please develop the important feature like subscribe and comment

But the rest are good and they also very like our comic even each user has different preference, female user has more interest in romance comic and for the male user has more in action and comedy.

Data Analysis
From all the data that we have got from conducting usability and concept testing, now we have to use the data to improve our product and planning for next feature and iteration. So we call all the stakeholder and start to discuss and analyze the data.

After a long discussion then we agree to:
1. Move the navigation to the bottom
2. Remove the trending menu
3. Focus the next development on subscribe, comment, login and register feature
4. We will start with 14 comic with 7 different genre
5. We are preparing to looking for local comic authors to collaborate with us


The Result
After release our platform on Dec 19, 2016, in the first month we already have ±20,000 visitors on our platform (15.8k from website, 3.7k from android and 518 from IoS), everyday the visitors are keep coming and the number is increasingly from day to day. Until today when this project is published in Behance (April 23, 2017) we already have ±10,000 daily visitors on our platform and still counting. We are still develop a lot of feature for this product so please keep updated with the latest version in https://www.ciayo.com/ or click here to download the application and thank you for your time to read this project on Behance till the very end.
Ciayo v1.0.0 UX Process: The Beginning
Published:

Owner

Ciayo v1.0.0 UX Process: The Beginning

CIAYO Comics platform

Published:

Creative Fields