TryHards
TryHards is a SaaS platform providing Twitch users the ability to facilitate challenges and create more engaging interactions with their audience to grow their viewership.
Team: Sr. UI/UX Designer, UI/UX Designer, 3 Engineers, & Product Manager
Role: UI/UX Designer
Activities: Stakeholder Interviews, Personas, Competitive Analysis, Card Sorting, Wireframing, HiFi mockups, Copywriting, Illustrating Graphics
Tools: Adobe XD, Adobe Illustrator, Slack
“I need a landing page that will get users to sign up on the day of our beta launch.” - PM
From my discussion with the Product Manager and Sr. UX Designer, I learned there was a very limited budget and time constraint to get the home page completed. Since we didn’t have time to plan and conduct interviews with potential users, we studied our competitors’ home pages and conducted quick card sorting activities to make educated decisions about the best way to entice users to sign up.
The PM asked for:
A way to showcase our value propositions (a way for gamers to make money and fans to support their favorite gamers)
Demonstrate how the platform works
The Streamer & The Fan
After getting the scope of the project from the Product Manager and learning about the business needs, I studied the company’s personas to better understand the motivations of our users. The company had 7 different personas based on their level of experience and involvement in the Twitch community. I focused on the 2 main personas — The Streamer and The Fan — that would be most relevant during our beta launch.
The personas were created from the user research provided by the PM. Some of the information is also from research findings published on 16personalities.com about Myer Briggs personalities most attracted to online gaming.
Assumptions:
The pages will be Home, About, FAQ, Browse Challenges, and Blog.
A video will be the best way to showcase what TryHards is and how to use it.
Features, use cases, and value propositions will be on the home page.
Competitive Analysis
I then conducted an in-depth competitive analysis to observe how our competitors and similar companies in the gaming industry are successfully showcasing their value propositions and educating users about their platforms.
I first assumed that the best solution would be to make the products (Challenges) browsable from the home page or utilize a tutorial to teach users about the platform. However, the solution would not work for us since we won’t have enough Challenge Campaigns to showcase during the launch.
From the competitive analysis I learned that the most popular information provided on our competitor’s landing pages are features, value propositions, and information about who the product is for. No one used video tutorials!
I decided the best solution was to utilize the following types of content.
Necessary Features:
CTA Sign Up (Create a Challenge)
Login
Socials
Resources (contact & FAQ)
Content Types:
Value proposition blurbs
Who is it for?
Feature list
I chose not to include a Browse Challenges Page in the logged-out view because during the early stages there would not be many challenges which may discourage users from signing up. The page would be something to add later on once we have more active Challenges.
Card Sorting
Card Sort data identified two moderate confidence categories: Features and Web Functions.
“I would want an incentive to create challenges.” - Julian A
The statements confused him “challenge your favorite streamer” “public challenge…” “private challenge” sounded like similar things and he didn’t know how to sort them. - Joonsu C
From the data and insights, we concluded that the wording of the CTA and subheaders shouldn’t use repetitive language. It can be confusing and cause misunderstandings about how to navigate the site.
A participant decided to group the cards in a tier system. That gave us insight into what a twitch streamer would find to be the most important information they needed to use the platform.
We learned that monetization and the reward pool were the most enticing pieces of information. This narrowed down exactly what kinds of features and value propositions we should highlight on our Landing Page.
Wireframes & Hi-Fi Mockups
Multiple iterations of the home page were drawn up with 2 rounds of design critiques. The main feedback from the critiques were that there needed to be a contact form for feedback and that the team still wanted a marketing video. Because there wasn’t currently a budget to produce a video, I created designs for a landing page with and without a video. The executive team added a video tutorial after the landing page was built.
UI & Graphic Design
After the wireframe was finalized, I designed the graphics and copy for the homepage. I also worked with the Sr. UX Designer to finalize the color scheme for the company’s design system.
I learned how to adapt a design process to an Agile engineering team.
While working with TryHards on their launch I learned that the design process needs to be adaptable and flexible. When working with an Agile team there isn’t always time or budget to do a full research process so I learned to work with limited resources and find free volunteer participants.
If I had the resources I would have recruited more than 3 participants and conducted usability tests before handing off designs to the engineers. However because of the team’s constraints, I had to make decisions based off of available data, then allow the engineers to build and test.
The landing page is now live! Click here to view it.
**Update Dec 17th, 2021: It is unfortunate to inform you that TryHards is no longer in business.