Iterating on a Comic Reader App
STELA is a small digital comics publication company that offers access to their library of original and creator-owned comics through a paid subscription. Subscribers can browse and read comics via the STELA mobile app for Android/iOS.
During my time at STELA, I designed various features and improvements for an upcoming version 2.0 of our app. This case study focuses on my contributions to the creation of a new user commenting feature.
UX Researcher
Context
I joined STELA as the company was preparing to begin work on a version 2.0 of the mobile app. Leadership had a list of new features and improvements that they wanted to introduce in this version, including:
- Discoverability
- Account Settings
- In-App Notification Center
- Parental Controls
- Comment Sections
As the the sole UX designer, I designed wireframes, flows and other deliverables for all of these features that were to be included in STELA 2.0.
Problem
Version 1.0 of the STELA mobile app established our core user experience but it still lacked several features that would bring us to parity with competitors and also distinguish us from them. In order to increase subscriber retention and conversion, we needed to deliver new features and improve existing ones with version 2.0.
Discovery
Before starting any design work, I wanted a better understanding of our user base so that I could properly design with them in mind. I devised a research proposal in which I would conduct an online survey and follow-up phone interviews with existing STELA subscriber [Figure 1.1].
The goal of this was to create user personas to inform future design and development efforts, including our upcoming v2.0 release.
The user research plan that I presented to stakeholders for feedback
After going through multiple revisions and finalizing the survey, I sent it out to over 300 of our current subscribers and waited for the responses.
That was when I realized how overly-optimistic my plan had been. After two weeks, I had collected a total of 5 survey responses and 1 phone interview participant. This was disappointing to say the least, and the sample size was not nearly enough for “statistical significance.”
Despite my shortage of data, I had to move forward and make do with what I had. I still was able to learn some interesting things about the people that answered.
of respondents
of respondents
of respondents
Of these 5 survey respondents, 3 of them indicated interest in the follow-up phone interview. However, I was only able to connect and schedule an interview with 1 of them. This interview still revealed valuable insights about app usage which informed some of my design decisions later on.
P1 was recommended STELA by a friend
"someone very close to me found out about [series] and told me about it... I have been subscribing as much as I could for it."
P1 only subscribes to keep up with their favorite series
"Well, mostly it was just that I wanted to read that one story"
"...I'll have to drop the subscription for like a month or two. And then I'll renew it and catch up super quickly..."
P1 likes the idea of an in-app community
"I think it'd be awesome if there was a way to... talk about what happened in the chapter or like give your reactions..."
"...it's really fun in the other comic apps to find comments from people who are in the same 'fandom'..."
Using the data collected from the surveys and from the interview, I created a proto-persona named Sam [Figure 1.2].
Proto-persona of Sam, the Series Superfan
Although the sample size I reached wasn’t enough to create a definitive representation of all our users, this proto-persona helped provide me with a jumping off point for my designs.
Hopefully, I would be able to evaluate any assumptions I made based on this persona—and the designs that arose from them—with usability tests, app analytics, and other benchmarks later on.
Ideation
As part of the planned features for v2.0, we wanted to incorporate comment sections into our app. To get some design inspiration, I looked into the competitor apps and websites that our survey respondents reported using. There were several things they all had in common:
- Comment sections for each chapter of a series
- Ability to "like" user comments
- Ability to reply to user comments
These all seemed like great ways to increase app engagement for users like Superfan Sam. Having separate comment sections per chapter would encourage them to share their thoughts as the series progresses and new developments occur. It would also be more manageable to scroll through, as opposed to having one big comment section that spans the entirety of a series' run.
Additionally, letting users like and reply to one another would enable deeper interaction and build a stronger sense of community, something that Superfan Sam values. Likes and replies could also be used to further organize comment sections by grouping replies into threads and allowing users to sort comments by number of likes.
With these elements in mind, I began exploring what the commenting experience in STELA could look like.
Layout
Before diving into the details, I wanted to make sure that I had a plan for how commenting would fit within the existing app design. I created a basic information architecture diagram of the new commenting feature [Figure 2.1] and sketched out some ideas for how users could reach the comments section [Figure 2.2].
Basic information architecture of the new comment feature
Ideas for how the comment sections can be accessed within the app
Comment Design
While analyzing the competition, I identified key details that I felt formed the basis of an engaging comment section:
- User ID
- Timestamp
- Like button
- Reply button
- Report button
I then drafted some potential comment designs using these components [Figure 2.3]. My preference was Option A, as all of the interaction options (like, reply, report) remain in clear view of the user. Text labels are also used sparingly for a cleaner look—important for text-dense places like comment sections.
When getting feedback from a colleague, they felt that the flag icon representing the 'report' button was too ambiguous. I decided to use a modified version of Option A, where the flag icon is replaced with a simple text label [Figure 2.4]. The intent was to ensure that users have a clear cut way of reporting unwanted behavior and keeping the comment sections a safe and comfortable space for everyone to participate in.
A few of the comment designs I came up with
The comment design I moved forward with, a revised version of A
Comment Section Design
Thread Style
When doing some secondary online research, I came across this great blog post outlining various methods of displaying threaded discussions. The "teased capped" thread design [Figure 2.5] seemed most fitting for STELA since it offers a simple, scannable layout while also providing peeks into existing reply threads. Showing this preview could pique user interest, getting them to expand the reply thread to read further and maybe even write a reply of their own.
Example of a teased capped thread layout
https://elezea.com/2015/09/how-to-display-threaded-discussions-on-the-web/
My comment section design using the teased capped layout
Comment Sorting
To offer further organization and customization for the comment sections, I wanted to include options for users to sort comments. The most common ones I saw were sorting By Most Likes/Votes and By Newest.
These both seemed like great options for driving user engagement so I explored several variations of incorporating them into my comment section design [Figures 2.7 and 2.8]. I ultimately chose Option B, as this "tab" style design pattern already existed in the app and would be familiar for our users.
Designs for sorting comments by Newest
Designs for sorting comments by Top
Authoring a Comment/Reply
As for how users would author their comments and replies, I kept it simple. When a user taps on the button to add a new comment or to reply to one, they are taken to a separate screen with a text field [Figure 2.10].
I also included a toggle for the poster to obscure the contents of their comment with a spoiler disclaimer [Figure 2.11]. In my research, I discovered that users like Sam would often re-read their favorite series, starting from the beginning. Having a spoiler toggle would allow them to discuss the story freely in the comments without fear of ruining it for newer readers.
Designs for authoring a comment and a reply
Designs for comment spoiler toggle
Iteration
After establishing my vision for user comments within the app, I brought my designs to my manager Walter, the Product Director, to get his feedback. What he had to say caught me off-guard. While he appreciated the work and the thought that went into my designs, certain features such as replies and reporting were too complex for an initial release.
As a gut reaction, I disagreed with him. I felt that not including these features—especially replies—would strongly restrict engagement within the comments section. If we wanted to improve subscriber retention, enabling users to directly interact with one another in the comments would get them to return to the app.
That's when I learned a valuable lesson. Walter told me that at this stage, without extensive evidence to justify a feature, it’s always safest to ship the simplest version you can to limit the upfront cost of design and development time. After that, you can continue building upon your work and release additional improvements with the added benefit of being able to collect user feedback.
Looking at it this way made it click for me, and I realized that I was too attached to my personal vision of how the comments section could cater to users like Sam. I followed Walter's guidance and created a pared-down version of what I initially proposed [Figures 3.2 and 3.3].
Initial proposed commenting designs
Final revised commenting designs
Wireflow demonstrating how to add a comment on a series chapter
Reflection
As the sole UX Designer at STELA, I stepped out of my comfort zone by taking on a variety of research, design, and project management responsibilities. I also gained valuable experience in leading presentations and workshops for coworkers and leadership.
If I had more time...
I would love to continue my user research. Not only would I want to explore additional avenues of outreach, such as in-app surveys or widening my recruitment criteria, but I'd also be interested in tweaking my survey and interview questions. Looking back, I realized I included too many questions that covered too broad of a scope. Trimming these down would hopefully lead to more responses.
I also would want to properly evaluate my designs. I left STELA before I could test my final designs or see them actualized. Usability testing and monitoring metrics related to conversion and retention, as well as user engagement, would be invaluable in determining next steps.
Takeaways
Working at STELA challenged me to grow in many ways as a user experience designer. Some key takeaways from my time designing there were:
- Don't expect to get it perfect on the first try
- Start small, then build it bigger
