CharacTour

CharacTour is a website dedicated to matching entertainment fans to fictional characters and other users. My team designed a mobile experience that allowed fans to connect with fictional characters, create content, and learn more about themselves. We completed our work with CharacTour in Dec, 2017. Specific areas where I led the team include: Information architecture, visual design, product development and construction(Sketch, InVision, Craft), and client presentation design.

Client:
CharacTour


Team: 
Sarabeth Reingold / Bea Egner

Type of Project: 
Product design / UX design /
content strategy

Length: 
Three week-long sprints

Tools:
Sketch / InVision / Paper prototypes


Deliverables: 
Annotated wireframes / InVision
prototype / heuristic eval. / task flows / App map

01 Overview
About CharacTour

CharacTour is a website dedicated to matching entertainment fans to fictional characters and other users with a patent-pending personality quiz. The site also allows users to create quizzes as well as take them. Kim Foerster and Pete McEntegart, the creator of CharacTour, believed entertainment discovery should mirror how we discover potential dating partners. Kim began by treating fictional characters as "real people" with profiles. This allowed fans to get to know characters before making a significant commitment to their shows or universe. CharacTour also had a native mobile app in the works but was not far enough in development for us to test. We were given printed hi-fidelity wireframes to use as a reference.

To use CharacTour at the fullest caliber, users were sent through a long 23 question personality quiz.

The homepage was a mix of a social feed, recommendations section, and featured items.

01 Overview
The Challenge

Kim and Pete approached my team with a few goals:

Increase
organic growth
Their user base was not growing. They wished to see more natural, viral growth in users, both registered users and active users.

Increase
user retention
The majority of their users left the site relatively quickly. They wanted users to become regulars rather than joining only to take the personality quiz.

Be
mobile first 
Our clients asked to us to test their beta app. The young age range of their users influenced their production of a mobile platform.

Our clients wanted to push CharcTour into becoming a social network. Our clients believed a group/community feature would solve their primary challenges and asked us to focus on building out a group feature over the next three weeks. But without prior validation of a group feature, we stepped back and dove into research to validate their beliefs, discover the underlying cause behind CharacTour's slow growth and retention, as well as familiarize ourselves with the domain.

02 research
First Steps

After an initial dive into CharacTour and the entertainment domain, we developed the following research goals from our growing list of questions, and framed them to help us develop questions for our users and subject matter experts:

Users (current/new) 
01 — To understand the key motivation, goals and reasons for using. CharacTour.

02 — What other apps/sites do they use? (and what their goals here)

03 — To understand if a group/social feature adds value/increases user retention and growth.

Entertainment expert
01 — To understand fandoms and what makes them so appealing.

02 — To understand how we can make CharacTour more attractive to fandoms.

03 — To understand the needs of fandom members.

Client's goals 
01 — To increase user retention.

02 — To increase organic growth.

03 — Develop a group feature

04 — Focus on mobile first.

We ensured tackling both our client’s needs and our own by placing them on a level plane. We also completed a heuristic evaluation of CharacTour’s existing site and immediately noted unintuitive usability and complex patterns:

The main issues we found were confusing patterns, syntax, and layout that didn’t match any industry patterns for social media, quizzes, and database websites. Users might find these odd patterns confusing and unintuitive, resulting in the slow growth and user retention.

We marked usability as a significant reason for poor user retention and growth after our in-depth look. Our potential scope had quickly grown, and we now had a handful of directions we could take moving forward into user research:

01 - High Level / User questions + mobile testing + desktop testing

02 - Mid Level / User questions + desktop testing

03 - Specific / User questions


User-focused questions
A deep dive into behaviors, needs, experiences

Mobile testing
Concept + usability test to see if the mobile app addressed our user's needs

Desktop testing
Concept + usability test to see if the desktop site addressed our user's needs

Due to our condensed time-frame, we needed to scope down quickly. This matrix focused our research questions and provided us with a manageable scope as well as enable us to offer our clients and users the highest value.

We chose option two, and focused on discovering user needs, behaviors, and how the current site was addressing or not addressing user concerns.

02 Research
User Interviews

With our research scope set, we interviewed a diverse group of users and subject experts set by our clients. We talked to current users of CharacTour, and individuals marked as a target audience. We pulled a collection of insights from our users that contradicted our initial assumptions, and reflected a higher need for CharacTour.

CharacTour helps young fans grow.
Our users are interested in fictional characters because they are relatable. They want to find out more about themselves through personality quizzes and relatable characters with similar values.

“I love characters that do amazing things because I wish I could help people”

Users either take quizzes or do research, but ultimately use CharacTour for discovery.
Our users are interested in fictional characters because they are relatable. They want to find out more about themselves through personality quizzes and relatable characters with similar values.

“I like that it’s one of those places you can go and find stuff that you might not know exists”

“It’s really a place i like to go to do research”

“The little personality quizzes keep me coming back.”

Our research and affinity diagram revealed a higher level need that CharacTour was fulfilling: the why behind a seemingly want-based product.

A group feature might not be necessary.
Many users already frequent Tumblr and Facebook for group activity. These sites already boast vibrant group culture and a large number of engaged users.

“I’m not looking to join more groups…”

The site lacks clear direction and purpose.
CharacTour was mix of different features, and concepts. It lacked a clear hierarchy which resulted in user confusion and prevented users from fulfilling their needs.

“I had no idea what the site was about…to be honest I still don’t”

“The on-boarding is too long, there are too many questions.” - Amy, former head of marketing at Wattpad

There are usability and functionality issues.
CharacTour was mix of different features, and concepts. It lacked a clear hierarchy which resulted in user confusion and prevented users from fulfilling their needs.

“I don’t know how to make a post…”

“The feed confused me…it’s very busy”

Be mobile first.

The majority of our users used CharacTour on their phone. This validated designing mobile first.

Final Takeaway

Our research validated our initial usability issues with CharacTour and revealed an unexpected key takeaway. Our user base found comfort and a sense of self in relatable fictional characters and fandoms. CharacTour was accomplishing this to an extent. However, their execution needed significant re-focusing. Adding a group feature would fracture CharacTour’s focus further and prevent users from reaching their goals. This realization allowed us to place less focus on a group feature and instead focus on our users’ higher-level needs, and how CharacTour could better address them.

02 Research
The Competition

We looked at a wide range of competitors to help us understand the domain and current patterns which could inform concept development. These included social networks used by our users like Facebook, dating sites (match.com) and other entertainment discovery based platforms (Netflix, Wattpad, Tumblr)

CharacTour is unique.
It is the only website dedicated to matching people with fictional characters. CharacTour needs to leverage their uniqueness.


There are too many social networks.
There are billions of users on FB and Tumblr; there might not be room in the market for another social platform.


There is an established fandom site.
Wattpad has a considerable following (the app has over 50 million downloads) and is the go-to for fan fiction.

We were able to tell our clients with confidence that CharacTour is not, and should not be, a full-blown social media platform. The competition was too steep, and we could offer the most value by leveraging CharacTour’s unique value proposition as a discovery tool.

03 Defining our Product
Target Audience

With a good grasp on our users as well as the domain, I led the development of our proto-personas to help us move forward into concept iteration. At a higher level, all our users sought out relatable fictional characters to discover more about themselves and related content. But for clarity moving forward, we developed these proto-personas to ensure our focus on all aspects of our user base.

03 DEFINING OUR PRODUCT
The Problem

Our users needed a product to help them discover more about themselves through relatable characters and quizzes as well as discover new content. This understanding allowed us to form a digestible problem to help guide our concepts.

Youthful entertainment fans like to discover and establish connections to individual characters based on their morals, values, and personality traits. This is not only enjoyable, but helps them reflect, develop, and accept themselves.

CharacTour needs to empower and engage users by allowing them to take quizzes, interact with a character database, and create content to foster relationships with their favorite characters and other fans.

03 DEFINING OUR PRODUCT
Design principles

We also formed design guidelines around ease of use and accessibility. This ensured design concepts focused on leveraging CharacTour's unique position in the market, as well as a commitment to our audience's growth and discovery needs.

GENERAL ADMISSION
CharacTour should feel universally accessible to entertainment fans. More mainstream audiences should feel welcome and intrigued by content, not just die hard fans.

LIGHTS, CAMERA, CLEAR ACTION!
CharacTour needs clear structure so users can prioritize which areas will best strengthen connection with characters to benefit their personal growth.

THE GOLDEN TICKET
CharacTour should actively reward the user for learning, completing quizzes, and interacting with the site so that users will feel the need to return as well as share their progress on the site.

YOU TALKIN’ TO ME? 
Including less formal, human sounding language will feel inviting for youthful entertainment fans, the target audience.

04 Designing Solutions
Developing divergent concepts

While CharacTour solved our users’ needs to an extent, the execution was unfocused. It was in our users' best interest to step back and directly address the needs of our users by developing research-backed mobile concepts. With this in mind, we realized the many directions our concepts could take and grounded our concepts in key areas discovered during research:

01 — Discoverability (me)
I designed concepts focused on discoverability and recommendations, a key user need CharacTour was inefficiently addressing in its current state. The on-boarding quiz was too long, and I questioned it as a mandatory barrier to entry. I tested other methods of choosing interests found in used analogs like Netflix and tinder. I also tested recommendation feeds that allowed users to discover similar characters and quizzes faster than the current method. For these, I looked at Instagram and Apple News. I purposely chose less data-heavy models to test if a casual, faster representation of CharacTour appealed to our young users.

Instagram [-]
This concept didn’t allow users to get immersed in the content. This concept made CharacTour feel impersonal.

For you [+]
Users loved the ease of access to a variety of content. They also saw this as an improvement over the current method.

Netflix input [+]
Users understood this input process and its familiar pattern. They liked seeing more options at once and enjoyed the ease of use.

Tinder [-]
Younger users found this method confusing.They didn’t like viewing only one interest at a time.

02 — Character Profiles (Me and Bea)
Understandable profiles were a necessary component to CharacTour’s value proposition. Bea focused on a data-heavy layout akin to the current profile pages, while I stripped detail and designed an “at-a-glance” layout.

03 — Community (Sarabeth)
We received mixed feedback on the validity of groups and needed more data to validate a direction. Sarabeth focused on building out a group feature similar to Facebook and looked at a poll feature to increase user retention and visit frequency.

04 — Visual Journey (Bea)
This concept revolved around a “breadcrumb” trail and catered to the researcher side of our user base. Bea’s concept allowed users to see how their “research” history by visually connecting characters, movies, and data points together in a road-map.

04 Designing solutions
Choosing priorities

We received a fair amount of positive feedback during testing and had a handful of concepts we could converge. With a substantial amount of validated concepts that addressed the needs of our users, we turned to our clients to discuss which were a priority for them based on business goals. Through a lengthy discussion, our clients and my team broke out a priority list focused on discoverability. Understanding our client’s business priorities allowed us to develop a holistic product which fulfilled the needs of our users as well as the needs of our clients.

Fully Developed
1. For you / Netflix input
2. Profile two

MVP Development
3. Journey Map
4. Groups

05 Final Design
Defining the structure

Before we could converge our concepts, we needed to understand our final product’s information architecture. I led a design session to determine the hierarchy of our concepts/information architecture, and which ones would directly address our user’s needs. I also led a design session to determine crucial design decisions like search bar placement and bottom nav items.

The results from a design session that I led. Due to the data driven nature of CharacTour, my team decided on a universal search bar that allowed access to all data rom a central location.

We focused on building key screens including the home feed, journey map, and characters feed. However, to offer the most actionable feedback for our clients, we built out quizzes and groups at a minimum viable level to allow for robust testing.

06 Final Design
Final Converged Design

I led the construction and visual design behind our converged product and focused on evolving the popular style found in the “for you” concept. My visual style focused on content first to allow for quick discovery. I also worked to maintain a clear purpose and a level of detail our users desired. I developed a preliminary style guide which included a home screen before exporting it for the rest of my team to use. I built the final prototype using Sketch, InVision and Craft to form a multi-directional holistic experience.

Invision Prototype

06 Final Design
iPhone X Concept

With the rise of the iPhone X and new design patterns, I developed a iPhone X UI mockup of the home screen to show our clients the potential future of CT. I focused on keeping the user tested hierarchy but implemented design changes that matched current iPhone X trends and patterns. I focused primarily on a re-design of the top nav and bottom nav.

06 FINAL DESIGN
Client Feedback

Jeremy is an incredibly talented UX designer whom I had the privilege of working with. As the CEO and Founder, I had high expectations for this project, and Jeremy and his two colleagues far exceeded them. Not only is Jeremy filled with creative design ideas, but he is also an impressive leader who is confident, charismatic, and collaborative. I can’t recommend him more highly!

- Kim, CEO. LinkedIn Recommendation

06 Final Design
User Feedback

Our prototype tested exceptionally well during our last round of testing, and our users were thrilled by such an accessible way to find relatable characters. Our clients were also thrilled with our final product and we received unanimous praise on our efforts. But we uncovered several areas for further testing and refinement like profile and quiz design that we passed on to our UI team.

07 NEXT STEPS AND UI HANDOFF
Next Steps

Our short time frame inevitably left some areas untested. Here are a few of the critical points we discovered during our last round of testing that we passed on to our clients:


01 — Perform an A/B test
Due to the positive response to our product, we recommended A/B testing the current beta app and our prototype.

02 — Continue testing groups
We received positive feedback on our group page, which contradicted our initial insights from user interviews. Due to inconclusive data, we recommended further examining the value of a group feature.

03 — Look at a community hub
If there was positive feedback after further testing around groups, we recommended implementing a “community” tab and expanding the social aspect of our prototype. Some of our users mentioned the value of a hub for all the community features including groups, user posts, and polls.


The thoroughness of our design led our clients and Designation to push CharacTour forward for further refinement as a UI project in the next cohort. It was fascinating to see the different ways our UI development team approached challenges we were unable to address in our UX sprints like user profiles and a more refined community page.

We discovered an opportunity to consolidate community features under one tab in the bottom nav. We left this insight as a recommendation due to lack of conclusive data. Our UI team took the community feature forward and incorporated into their testing, and ultimately their final design. This particular UI was designed by Alex Hugh.

08 Conclusion
What I Learned

CharacTour was the first project in my design career that challenged me with client relationships. Everything from discussions to presentations was a new experience for me. Being thrown into the deep end of design leadership made me think in ways I’ve previously not had to. Also, because our clients had clear visions and expectations for their designers, we were consistently challenged and defended our design decisions often.

CharacTour also taught me the importance of content experience. CharacTour was a unique project due to the data-heavy nature of the platform. Because of how much a good CharacTour experience rode on its content, we were challenged to ensure that the quality and clarity of content was consistently addressed and designed for throughout iteration.

In the end, my team’s ability to build a trusting relationship with our clients allowed us to focus on solving the bigger picture for our users. In a similar vein, I learned the importance of forming conversations with clients, not one-sided presentations, to promote a better product. This project above all else solidified the value and importance of collaborative design. The success of this project resided in the strength of our teamwork not just within the design team, but collectively with our users and clients.

Contact —
jeremylu.design@gmail.com

Connect —
LinkedIn / Medium

Designed by —
© 2020 -  Jeremy y. Lu