Updating a media site's design to solve issues with user retention and a narrow user base.
15 Minute Read
Project Time Frame: 3 Weeks
Skills: iOS App Design, UI/UX Design, User Testing
Tools: Sketch, InVision
Deliverables: Moodboards/Style Tiles, Prototype
CharacTour is a web platform that produces content for media fandoms. CEOs Kim and Pete want to create an iOS app to help users better engage with content. They want to use this project as an opportunity to explore making major changes to content structure and to resolve issues of low new user retention and a narrow user base.
Working in a team of four designers, we used wireframes developed by another team. We skinned and branded it as well as tweaked some of the UX based on user feedback.
We first analyzed UX issues with the desktop site. Onboarding was heavily front-loaded, and the site mixed several features without easing users into them. Overall, the site felt unfocused due to an overload of unexplained features. On the UI side, the site’s structure, typography, and color made finding and digesting content difficult.
Establishing a New Visual Brand
Deliverables: Competitive Analyses, Design Principles
During the kickoff meeting with Kim and Pete, we brought up these initial design issues. We discussed that design is a likely contributor to low retention rate and narrow user base. We were given two goals for a rebranding effort. It had to be “fun, colorful, and bright” and seen as the “premier site to find new entertainment.” As such, I kept in mind to design with a broader audience than what the demographic data suggested.
We looked at competitors in the broader fandom space by scoping out their mobile apps.
All of these apps have to deal with a variety of content: paragraph, text, posters, videos, photos, etc… So for this project, I decided to focus on a design system that has strong modularity and scalability to allow multiple types of content to gel together.
My team discussed the main visual approach. We all understood that the app should be “fun” and appeal to the current user demographic. While I agreed that the app should feel youthful, I was concerned that overly prioritizing “fun” would lead to obtrusive designs that would defeat the goal of broadening the appeal. I pointed to competitors like Twitch and Youtube that only use branding elements to selectively highlight interactive elements. Eventually, we arrived at these 3 design principles to guide our visual exploration.
Sense of Wonder
Users should feel elated in engaging and discovering fandom content.
Big Field, Small Details
The app should adopt a content-agnostic architecture while having small delightful details for branding.
The app should reinforce that recommendations are personalized for users.
Deliverables: Moodboards, Style Tiles
I explored three distinct visual directions with moodboards and style tiles.
This design highlights a clean, modern interface with a dash of teal for visual branding. The secondary soft reds and yellows complement the main teal and appear calming and friendly.
This design captures a vintage look associated with old school entertainment and magazines. Thick black lines and serif fonts draw from print design. Bright red and champagne gold feel theatrical and dynamic.
Eclectic and offbeat, this design moves away from the concept of receding site architecture. Color and symbols are given strong visual loudness to create a sense of energy.
Design System Execution
Deliverables: Design System Components
Based on client feedback, I continued the project with Seafoam Blog. First, I approached the project by focusing on a card-based design system.
Card-Based Design System
Major components are designed as cards, inspired by Google’s Material Design. Cards provide a versatile cohesive pattern to accommodate multiple types of media.
Quiz Question Card
A main part of the brand is the onboarding personality quiz. In each new iteration, I focused on making this component uniquely expressive and fun to use.
Additional Profile Information
During user testing sessions, almost all users stated they want more explanation for their matches beyond just the percentage. I saw this as an opportunity to improve the character profile section from the wireframes by adding some additional information.
CharacTour’s recommendation engine needed to be delivered clearly and concisely.
Deliverables: High Fidelity Prototype
We held a final user testing session with three previous and two new testers using the InVision mobile app.
In general, users had an easy time navigating and understanding which elements were interactive due to the card system. My specific UX changes also gained positive user feedback, namely the side-scrolling media swimlanes and additional profile information.
Clients Kim and Pete found the overall prototype to be successful and expressed interest in incorporating many of the new design elements such as the card system and the personality trait bars.
Throughout this project, I have learned the value of being a facilitator of conversation rather than a competitor. As a person with strong opinions, I frequently want to challenge the pre-existing wireframes or introduce new ideas. Learning when to suggest new ideas or pivots and when to be supportive has been an important lesson for me. In looking forward, I want to be a more collaborative designer that know when is the right time to introduce new concepts.