Overview
Treadwater is a Sci-Fi graphic novel series that has crossed over into various media including: motion comics, video games and a TV series. These platforms all connected through the same story and characters. The multi-platform approach allows the audience to choose which medium(s) they prefer to experience the story. The client came to us with a goal to transform the website into a mobile app experience. This will act as an interactive content hub for subscribers.
Role
As the client-facing lead, I scheduled our meetings and hosted the real-time whiteboard session for group affinity mapping. In addition, I took on the role as visual design lead and synthesized the research, sketched wireframes, and made testing iterations.
Team
Working with two other designers, we came up with the gamification strategy, the features research, creation of the interactive prototype, and building presentation to the stakeholders.
Research and Discovery
During the initial meeting with the client, we were able to establish what the primary goals of the app they wished to achieve were.
• Increase user engagement
• Increase user base
• Increase user base
With that in mind, we quickly sent out a survey to comic book/graphic novel readers in order to understand demographics and customer behaviors. We had 42 total responses and conducted 12 interviews with users that are passionate or have an interest in comic book/graphic novel. The team made a point to not bias interviewees with specific questions but let them speak freely on topics.
Takeaways
• An engaging storyline is important to new readers.
• Not all fans of current comic franchises are interested in video game spin-offs of the book.
• People commonly look for updates and news at the physical comic store or through word of mouth.
User Quotes
"I would like to read more of the backstory of the characters and situations. I would also like to know what was going on in the creator's mind when it came about."
"Yeah I don't think I know anyone who doesn't like doing extra tasks to get bonus items for a game."
Competitor Analysis
We analyzed 3 competitors’ app in order to understand the user flow, the navigation, and the best practices that are out on the market. The process enabled us to understand what users are used to seeing and interacting with in a comic book app.
Personas
Three personas were created based on interview findings. Each represent target users and the team took all into consideration when designing features. Oswald represents the primary persona and possesses the most common traits.
Defining Features
Affinity Mapping
Features were mapped out based off interviews with Treadwater. We also incorporated what users expected to see and categorized the features from low to high priority and technical feasibility.
Features were mapped out based off interviews with Treadwater. We also incorporated what users expected to see and categorized the features from low to high priority and technical feasibility.
Moscow Method
By laying out all the high priority features, we could then employ the Moscow method to determine what a user must, should, could or won’t do.
By laying out all the high priority features, we could then employ the Moscow method to determine what a user must, should, could or won’t do.
Sketches
The team individually sketched out ideas with pencil and paper. We timed ourselves 5 minutes to each screen for design brainstorming in order to trigger creativity.
Design & Testing
Medium Fidelity Wireframes
As paper layouts were more concrete, the team moved on to digital wireframes using the Sketch app.
Usability Testing
A total of 8 tests were performed and we found that users did not have problems navigating through the app. After testing, we made adjustments based on client feedback, they did not have enough content for a graphic novel section and suggested to use the locker portion from the website instead.
Iteration Samples
Following the presentation, the client requested changes in the global navigation. Those changes are not reflected on the case study above.
