A ChessUp logo.

ChessUp App

Freelance

Senior Product Designer

2021

Designed and prototyped a companion mobile app for the the #1 most funded chess product of all time. As a freelance senior product designer, I was responsible for the end-to-end mobile app design process – from working with the co-founders on understanding the problems we wanted to solve to defining and desgining the solutions.

Design

End-to-End Product Design, UI Design, Interaction Design, Prototyping, Figma

Platforms

iOS, Android, BLE

Business

Games, B2C, Hardware

Situation

Audience

ChessUp hardware was designed with everyone in mind. It doesn’t matter if you are new to chess or a master, young or old – the product was designed for anyone to pick up, play, and learn. The same audience would use the app which would enable them to elevate the experience with their hardware by enabling additional capabilities.

The Problem

Creating a companion app for a physical product with specific requirements and constraints which needed to seamlessly integrate and elevate the physical product but not get in the way; but also work on its own and provide engaging learning and gameplay experience if the user didn’t have the physical hardware yet.

A ChessUp mockup.

Approach

The Process

As a freelance senior product designer, I was responsible for the end-to-end mobile app design process – from working with the co-founders on understanding the problems we wanted to solve to defining and desgining the solutions.

We started with a kickoff call to understand the ChessUp physical product and how it worked. The BryghtLabs team has already conducted many interviews with their customers to gather feedback and feature requests which were prioritized. There were clear business goals, constraints, established roadmap and defined user stories.

I would then begin mapping flows and creating task lists of what users would need to do during each part of the flow. This would be followed with design - working first with rough UI, creating prototypes, gathering feedback from the stakeholders and developers, and then further refining and polishing the designs.

Once every UI state and interaction has been thought through and defined, I would then further discuss designs with the app developer and hand over design guides.

A ChessUp mockup.

Outcome

Onboarding

Great first impression. When players open the app for the first time, they are greeted by clear value proposition and an easy way to sign up.

A ChessUp mockup.

No socials? No problem. Creating an account with an email address is simple and straightforward.

A ChessUp mockup.

Natural conversation instead of filling out a form. Players are asked only the most essential questions that we truly need to make the experience as frictionless as possible. We're making it simple to share their details with us and guiding them along the way.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Play

Getting started. Right after signing up, we have a clear answer to “What does the app do?” The app structure and navigation tells the player what the app does. To get the best experience as a part of the first session, players are encouraged to play a game and explore the app to see what can they do. All of the past and ongoing and future games are here too!

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

New Game

Starting a game is simple but powerful. With simple interface and smart defaults that progressively disclose options based on player selection.

A ChessUp mockup.

Help is here! When adjusting assistance level, players can see which colors on the physical chessboard are used for move analysis based on their choosen level of assistance.

A ChessUp mockup.

Choosing the right opponent made easy. When choosing an opponent, players can pick an AI with appropriate difficulty and assistance, play OTB (Over the Board) with another player in real life and select who it is to share the game, or play online against a friend or someone random.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Want to play fast? Choose time format. Players can choose from one of the presets or specify their own.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Disconnected? Keep on playing. When the board is not connected, players don't need to fret - they can have a great in-app chess experience!

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Playing a Game

Beautiful chess experience. The app doesn't get in the way. It builds on top of the physical board experience and elevates it with more features. Players can see details about the game, last moves, AI level, assist, resign, or even accept a draft or open a beatuiful full-screen timer.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Making the connection between board and app. The chess board lights translate directly in the app.

A ChessUp mockup.

What are those colors? Players can tap the questionmark button at any time to see what each color on the board means.

A ChessUp mockup.

Started in the app and want to transfer to the “real thing”? Transferring a game is easy - just tap the button and set up the pieces. Or not - and let your family members play with the board and you just play on your phone.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

From software to hardware. Loading an ongoing game, starting a learning challenge, or revisiting a past game is super easy. The app guides the player on how to set up the physical chessboard.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

I just need a timer. No problem! Players can use the app as a timer for the physical board. Put your phone on the side and the app just melts away for maximum immersion with the physical board. Oh and it supports a landscape mode too.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Connecting

Bluetooth pairing can be seamless. The board connects automatically. And if it doesn't or if it's disconnected intentionally, it can be easily connected.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

I just want to play on my phone. That's ok too. Players can explicitly disconnect the chessboard and let someone else in the household use it while they play on their phone.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Learn

New to chess and keen to learn or are you a master wanting to practice their moves? The learn experience caters for everyone. It provides guided lesson and practices that are just pure fun!

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Learning made fun. With interactive lessons and challenges, people are encouraged to complete each lesson and get rewarded along the way.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Lesson on the phone or with the board. Each lesson provides voiceover and guided prompts to help people learn. Need to revisit a move? No problem! No audio? Just mute it. Need a hint? There it is.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Many challenges and puzzles. Players can take on standard puzzles with clear feedback and a way to step through the challenges.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Light the square. Learn the moves with instant feedback.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

The good old questionnaire. Multiple choice questions that make people think and learn.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Super piece. A superb way to have fun and learn.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Add a piece. This is a thinker. I didn't get it right on the first try.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Practices

More daily challenges. There's always more to learn and have fun along the way!

A ChessUp mockup.

The most fun and challenging puzzles. Revisit the classics or learn something new.

A ChessUp mockup.

Activity

All of the activity in one place. Friend requests, game invites, notifications and events.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Settings

Who said settings should be boring? The app comes with smart defaults and the players share their info during onboarding, or can change things up later.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Find and invite friends. Right on this screen.

A ChessUp mockup.

Control the notifications. Too many events? Not anymore.

A ChessUp mockup.

Android

Android folks can have fun too! With an app designed with Material Design 3 in mind.

A ChessUp mockup.
A ChessUp mockup.
A ChessUp mockup.

Like the work I've done with BryghtLabs?

Let’s ship an amazing experience that your customers will love!

How does it work?

Brief

You write a brief outlining deliverables and scope of your project, including timing. The brief should ideally anser the following questions:
What are we building? What design problems are we trying to solve? What is expected at the completion of the project? What are the goals and objectives of the new design? What's the target market or audience? What's your budget and schedule? What are the project deliverables?

Contract

I will send a simple contract detailing the scope, delivery & payment schedule.

Work

I begin with analysis, follow up with design or development and share the progress with you with each milestone — communicating on a set schedule. Your feedback is important and I will make refinements accordingly.

Payment

A 20% deposit is due before I start working on your project. Any following invoices will be due in 30 days and payable via a national wire transfer to my US business bank account.

Delivery

Depending on your needs, this could be source code repo hosted on GitHub, Figma file, and/or a high-fidelity Origami prototype. It is preferred to switch to an hourly engagement at this stage so I can coordinate with your engineers on as-needed basis.