Position: Product Designer Team: CEO, Product Manager, Three Developers, Content Manager, Influencer Liaison.
Taking Hinter From Social to Content
Hinter was created with the mission to make people smile. The executive vision for the product took existing ‘flat’ web-ready comedic content (such as memes), and created a new content medium by adding interaction to create engagement through surprise. Redesigning Hinter’s experience to accommodate our users’ desire for engaging comedic content was imperative to our process. Our core KPIs were increased reveals, upvotes, and shares, thus we strategized our content to feel more relevant, organized, and accessible. The results of our recent redesign were encouraging, as we significantly increased retention, engagement, and accessibility to 3rd party clients.
UX Process
Understanding Existing and Potential Users
When approaching Hinter’s redesign, the following questions were addressed to further understand our user’s pain-points to increase levels of retention and engagement:
- Who are our users?
- What type of content do they prefer?
- How much time do they spend with this type of content?
- How often do they share?
- What is the level of participation in community through commenting or up-voting?
To begin this process we interviewed new and existing users to understand their emotions behind entertainment products. By asking the right questions, and cross-analyzing data with existing metrics, we learned our audience contained a strong group of millennial students (16-30) who preferred a strict categorization of rich content, rather than traditional social networking features (messaging, following other users etc). User interviews also gave perspective on how fast, and frequent users visited applications for entertaining content. This information guided our attention to better understand these users, and make according decisions on product design, marketing, and content strategy.
Planning Features for Session Length and Community
By closely analyzing our user personas and existing analytics on churn, we brainstormed the following features to better fit our use case:
- Removal of login requirement
- Instant exposure to top content
- Implementation of channels for organization
- Reduction of social constructs: changing ‘liking’ content, and ‘adding friends,’ to up voting content and following users.
- Democratic content voting and sorting
Optimizing Flows for Content Discovery
Based on data and feedback collected from user interviews regarding session length and frequency, we designed the user experience to reflect a quick and satisfying session, with the target average session length of 40 seconds. This use case required very quick content discovery, specific content categories for organization, and constant updates to content feeds.
Testing UX With Sketches and Wireframes
After understanding our users and establishing a feature scope we sketched key screens along the user flows. Our immediate goal was to collect content into multiple channels to help users quickly find their favorite content. To test our wireframes for usability the designs were prototyped with InVision and given users to validate the experience. After collecting user feedback on the InVision prototype, revisions were made before finishing each UX sprint.
UI & Branding
Moodboarding Gives Comedic Edge to UI
Since Hinter’s mechanic contains many of the same functional similarities to a stand-up joke (set-up and punchline) our creative direction took inspiration from progressive forms of witty emotion through iconography, typeface, and color.
Design Elements Provide Branding and Trust
By understanding the funny, sarcastic, and crude emotional elements within the comedic outlook of our moodboards, I designed the channel iconography with emotional sentiment to guide content creation toward the specific emotion in each channel. To keep content organized, and easy to navigate, darker colors of black and grey used were used to direct the focus toward navigation when necessary.
Modular Design Keeps Elements Consistent From Mobile to Web
After making decisions on key characteristics of the mobile product mechanic, I began to design Hint modules that could be used consistently across the phone application and web interface. These consistencies in design were created to accelerate workflow with our development team, and create comfort for users viewing content on both platforms.
Desktop Interface to Accommodate for Sharing
By asking our users questions regarding our their preferred channels of sharing, we discovered a web platform was imperative to enable our users to share to non-video supported websites (such as Reddit) via web link. Through these user interviews we confirmed the user experience on the web should focus less on exploration and more on individual hint engagement. User flows associated to the website were assembled to better understand how users will reach and interact with the content online, and helped our team understand the best placement for ‘download app’ CTAs. The overall focus of the Hinter web platform was to attract users to the hint mechanic, and convert them to mobile app users for further content consumption. As we move forward, keeping a close eye on the web analytics will help direct our decisions on building a full web application.
Final Thoughts & Results
Interviews on product pain points helped gain successful insights on faster content discovery, which lead to the new organization of content within the application (channels and feed filters). By understanding the emotional sentiment of humor and sarcasm that lies behind the content itself, the visual design and design language was directed toward a colorful and bold direction that better evokes the excitement and happiness Hinter’s users are searching for. The overall redesign of the application embodies a quick and satisfying experience for the user, which has been identified as successful through KPI spikes of data regarding reveal count, retention, session length.
