Designing a Community App from the Ground Up
TIMELINE: May 2017 to present
PROJECT TEAM: Initially seven, now 14
DESIGN TEAM: Initially just me, now two
N3twork is a San Francisco based company creating team-based mobile games such as Legendary: Game of Heroes, Funko Pop and Tetris. In 2017, the Legendary team noticed that many guilds/teams organized themselves outside of the game using services such as WhatsApp, Line, and Facebook Messenger to communicate and share strategies and insights.
I joined a small team consisting of five engineers and the product owner to lead the product design of a new project, The N3TWORK, tackling the following challenge: How might we create an effective community tool that enables users to share their knowledge and communicate effortlessly with each other while allowing the game team to manage their community and announce weekly game updates?
After prototyping, designing, testing, and iterating the core of the experience around messaging, we were able to release a MVP in early 2018. It was a great tool for our very engaged Beta users to provide us with feedback, ideas, and insights on an ongoing basis. Next we focussed on strengthening the community by considering questions such as:
How might a new user seek advice from the community?
What would motivate an experienced user to answer questions and feel valued?
Which other tools do communities use for helping each other out and why?
Can we find a meaningful replacement for forums?
What is the most engaging way for the game team to make announcements?
Below is our design process applied to this last set of challenges, which ultimately led us to the creation of a Questions section in the app.
At the start of any new project or feature, I review all requirements and precedents, then research and analyze the competitive landscape and interview current users and stake holders.
Three of the users - representing different audience segments - I consulted with periodically during the six months design process of the Questions feature.
Next I develop user scenarios and task analysis. Setting clear project goals and success metrics as a team is crucial to any project or feature addition.
Paper sketch of an engagement loop. We often use whiteboards or paper to visualize different frameworks during brainstorming sessions.
CONCEPTS & PROTOTYPING
Time to hit the whiteboard and paper pads to brainstorm different solutions, develop high-level architecture, and create models to describe user behavior. I often turn the most promising concepts into low fidelity prototypes to get user feedback and to discuss feasibility with the engineering team.
Early concepts of the question list section. The concepts got more refined from left to right as we learned what worked and resonated.
Having identified the best concept collaboratively, it's time to finalize the information architecture flow diagrams and then create a comprehensive set of screen designs.
Snapshot of our newly created, state of the art design system. Creating the detailed screens for each state and interaction is significantly faster having a robust design system to draw from.
PROTOTYPING & ITERATING
Creating clickable, high-fidelity prototypes allows me to conduct more user testing, learn about any unforeseen edge cases, and demonstrate interactions for engineering. Based on the evaluation of the results some design iterations might be necessary.
Quick demonstration based on a prototype how voting up an answer or asking a new question can work. For the past two years we've used Figma exclusively: flow diagrams, design system, detailed screen designs, prototypes as well as functional specs.
As a final delivery I create a thorough functional specification document to define all intended behaviors and interactions of the feature or the product for development and the QA team.
It's been extremely helpful for everyone on our team to have these detailed spec docs. It allows us to look back on older features and recall the decisions we made at the time and understand why we sometimes need to iterate on them based on new insights.
Over the past almost three years our team has grown to 14 people including one additional UX/Visual designer. Together we've created an impressive body of work:
A web client for desktop and tablet allowing community leaders to manage their channel effectively.
The accompanying marketing website for The N3TWORK that serves as a login into the web client experience as well as marketing tool to potential partners.
A CMS tool allowing the game team to upload and manage their video announcements to the community.
A state of the art design system that empowers us to work efficiently and guarantees consistency across all platforms and marketing outlets.