top of page

Case Study

The N3TWORK

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.

Design Process

DISCOVERY

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.

N3TWORK_Interviewees.png

Three of the users - representing different audience segments - I consulted with periodically during the six months design process of the Questions feature.

​

STRATEGY

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. 

N3TWORK_Questions_EngagmentLoop.png

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.

N3TWORK_Questions_Wireframes.png

Early concepts of the question list section. The concepts got more refined from left to right as we learned what worked and resonated. 

​

DESIGN

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.

N3TWORK_DesginComponents.png

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.

N3TWORK_Questions_Proto.gif

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.

​

DELIVERY

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.

N3TWORK_Questions_KeyframesSpec.png

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.

​

Outcomes

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:

​

  • The N3TWORK app on iOS and Android from inception through many rounds of iterations to the fun, still-evolving community tool it is today.

  • 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.

bottom of page