Adding Search, Release Schedule and Comic Language Option on CIAYO Comics Android Version
Hello, long time since my last update and I would like to share with all of you about my experience in building new features for CIAYO Comics on its Android version since our biggest user and traffic are coming from Android. FYI, on this project, all the decisions are team decision but I took the largest portion on designing and prototyping, so I'll use "We" rather than "I" on this article. This month (July 2017) we have got our 100k badge on Play Store and we're ranked on position of #581,617 Global Alexa rank and I should think that is a good achievement for 8 months old product.
Along with a ton of new users coming into our platform, there are also coming ton of requests for improvement and adjustment from our platform to serve their needs. In this article, I want to discuss about 3 most requested features and processes of refining until it's ready to deploy. Here are the 4 important points:
1. Why these features are needed
2. Designing wireframe & prototype and reason behind every decision
3. Screening and Usability Testing
4. Iteration
1. Why these features are needed
2. Designing wireframe & prototype and reason behind every decision
3. Screening and Usability Testing
4. Iteration
Why These Features Are Needed
1. Search: For the first time when we launched this platform, we were intentionally not building a search feature because all of us agree this feature only effective after we have a lot of content. In the first place, we only have 14 comics but now it has grown to more than 100 comics and keep growing to be estimated at around more than 200 or 300 comics at the end of this year (2017). Perhaps you will think that number is still not too much, but try to imagine your friend gave you a recommendation for a comic title in CIAYO Comics and you want to read that comic so badly, and you arrived on the platform with a list of more than 100 comics, and now try to find that comic without search button, I'm sure you can find it, but it's not a happy experience isn't it? So why this feature is needed? I think it's very obvious to say that this feature is needed to ease the user to find their intended comic inside the platform.
2. Release Schedule: The reason why this feature is needed is only to give a big picture of comic release activity inside the platform. Users can see what comic release today and what will release tomorrow. We are also planning to give priority for a comic that they already subscribed to and a new comic that will come soon in order to let people know what will happen during that day, but this will not be shown in the wireframe of the prototype. This feature predicted to be more effective for superusers with a lot of subscriptions so they can check their daily subscription release rather than checking their comics one by one.
3. Comic Language: This feature is built to cover the request from the user from outside of Indonesia. There are so many request from them in our social platform, Google Play Store and App Store, thus, we gave some priority for this one.
Designing Wireframe & Prototype And Reason Behind Every Decision
We are adopting lean UX as our methods of designing and develop CIAYO Comics. So we will start will some assumptions when designing and continue with testing the design with our users. Here's how my wireframe looks like:
You also can look at my wireframe flow a.k.a Wireflow in here. After done with wireframing, I continue to prototyping our concept. The tool that I used for prototyping is ProtoPie (it is a really great tool, you should try I'm serious...). You can download my Protopie file in here, and here's how my prototype looks like:
Screening and Usability Testing
Now the design is ready to be tested, what we need for now is the right people to test our design. Our UX team created a short and simple online form for screening, then we sent it to our existing user with an email blast. If you would like to see the survey, it can be found here, but the survey is created in Indonesian Language (I'm sorry for this). After we had enough candidates then we invite them to conduct usability testing, and our target was 5 peoples to attend (based on nngroup formula we could found 70% usability issue by testing only 5 users).
For conducting usability testing, of course, we need a script or testing scenario, and here's how the scenario for testing:
1. Your friend told you that he just read an interesting comic in CIAYO Comics, the comic title is Romance Kingdom. Now you're wondering how good is that comic, now please try to find that comic inside CIAYO Comics.
2. Try to search "Bloody Romance" comic using only "romance" keyword.
3. How can you find out what comics are released every Tuesday?
4. Go to subscribed tab menu and subscribe comic that release on Tuesday
5. CIAYO Comics has just released your favorite comic in the English version, and now you're wondering how is your favorite comic will looks like in the English version. Try to read your favorite comics in the English version.
6. You're someone that prefers to read comics in English, then what will you do when you arrived on CIAYO Comics application?
1. Your friend told you that he just read an interesting comic in CIAYO Comics, the comic title is Romance Kingdom. Now you're wondering how good is that comic, now please try to find that comic inside CIAYO Comics.
2. Try to search "Bloody Romance" comic using only "romance" keyword.
3. How can you find out what comics are released every Tuesday?
4. Go to subscribed tab menu and subscribe comic that release on Tuesday
5. CIAYO Comics has just released your favorite comic in the English version, and now you're wondering how is your favorite comic will looks like in the English version. Try to read your favorite comics in the English version.
6. You're someone that prefers to read comics in English, then what will you do when you arrived on CIAYO Comics application?
Below are the conclusion from conducting usability testing from 5 users:
Search
1. Users do not like to press enter after they have done for typing, they expect the result will come immediately even some of them expected to get results after typed 2 or 3 characters.
Schedule
1. Some users failed to find a schedule menu located on "More" tab menu and the others found after struggling so hard.
2. When they heard about release, some of them thought they could find it on the homepage, so they scrolling on the homepage and the others thought they could find it on "All Comics". The conclusion of this feature Information Architecture (IA) is a total failure.
3. Even the IA failed, but on the schedule page, all users could navigate easily.
4. Subscribed page combined with the schedule concept didn't work very well. User feels confuse the first time they arrived on subscribed page. User like what the thing they already know and familiar with.
Comic Language
1. Some users immediately navigate to "More" tab menu, because the first thing that came to their mind is that language is part of the settings group and usually settings menu is located under "More" menu.
2. The rest of the other participants thought they could change the language inside the comic page, they expected to find a list of available language for that comic on that page.
Iteration 1
We have done through one full-cycle process and now time for doing the iteration to improve the last design for better usability. From data from previous usability testing we know which part needs to be fixed. But, we need to keep it in mind that not all what user wants are what they need. We need to care on designing especially if we designing for user behavior.
Below are our plan to fix the usability issue in each part:
Search: We will change the prototype when user typing with removing the enter action so the user can immediately get the result without the need to enter after they finish.
Schedule: We will move this feature into "All Comics" tab menu, and we will try to put it on the top bar hoping users will notice it and know where they will find it when they need it. For subscribed page, we will turn it back into its original form to reduce user cognitive load.
Comic Language: Even some users thought it's better to put this option inside the comic page, but my team still decided to not follow what the user want because of some consideration. The most important reason to not put it inside a comic page that user do not change their language often or even they never change it at all. People will always stay at the language which they prefer except the comic that they want to read is not available or release faster in other languages.
I also add a real banner on the Homepage to create a better testing environment. Below are some pages that had been changed on iteration 1:
Adjusting Prev Prototype and Screening for Usability Testing
Without waste more time and effort then we immediately prepared for the next usability testing. I adjust some interaction and assets for the next prototype (download iteration 1 prototype here) based on previous data while my team recruiting new 5 participants for testing.
Usability Testing - Iteration 1
We used the same question with the first test but only without task number 4 (Go to subscribed tab menu and subscribe comic that release on Tuesday). Even we were conducting usability testing with 5 different users from the last test we encounter less usability issues than before. Here are some issues we found on this test:
Search
Users didn't notice more buttons on the right side from category title, and from users' feedback most of them said that they don't even care with comic category as long as they can found it.
Schedule
Two users still trying to find this feature on the homepage, they intuitively scrolling on the homepage trying to find words related with the name of days or comic release schedule.
Comic Language
Two users still look at inside the comic page expecting they could find language options inside. But with the same reason explained above we won't put this inside comic page.
Iteration 2
Even we encountered only a few issues, we decided to do one more iteration to make sure everything is okay and we also want to test some ideas. There were only little changes we made for this iteration, here are list of ideas we want to test:
Search: We want to remove grouping layout under "All" category and make it endless lazy load to be more intuitive rather than force user to click "more" button. Because they don't even care with this grouping category after all.
Schedule: To solve issue with some user that still trying to find schedule on homepage, and to reduce user's cognitive load for remembering which tab has schedule option on the top bar, i decided to put schedule button on all top bar (homepage, all comics, subscribed, challenge and more menu). We did this because we don't want to put all things on homepage (or it is usually called killing the golden goose). We also did modification to schedule button become only an icon regarding to Material Design / Google Design's rules.
Adjusting Prev Prototype and Screening for Usability Testing
Just like previous iteration, we did through the same step, we adjusting the prototype (download iteration 2 prototype here) and recruiting new 5 participants again for next testing. Then we were ready for next usability testing, again.
Usability Testing - Iteration 1
Using the same scenario with iteration 1, we were testing with 5 new participants. Surprisingly on this test we weren't find any usability issue, everything works like a charm. User could navigate easily for every task we gave.
Conclusion
On this project, we learned a lot of new knowledge and mindset. Often as UX Designer, we are designing something based on our preference and we don't notice that our bias has made us very subjective. That is why usability testing becomes very handy to prove that our design could be used by our user or not. From the beginning of this process from sketching and ideation that even not detail explained in this article to the end of this process my design has turned very very differently. If we are designing something with our user and their feedback in our mind, believe it or not, it feels odd but fun at the same time when our design works and useful for the others.
This feature will be launch soon on our application after our development team gives a finishing touch to this feature. Please visit our platform CIAYO Comics to keep updated with our activity and updates, It's available in Android, IoS and web platform.
Sorry for the long article, and thank you for your time, see you again in my next study case.
