About

スペス

Space is a platform for teams equipped with tools to help plan their work, discuss, and develop software projects.

As represented by its logo, Space is an intersection of Git, Chat, Team Directory, and Issue Tracker

Responsibility and timeline

I joined during the early stage of the conceptual development to help bootstrap the product and bring it to the ready-to-market state. Explore the timeline with major milestones

2 designers

2018

Internal adoption inside JetBrains

• Git hosting
• Team Directory
• Code Reviews
• Calendars
• Blogs
• iOS app

4 designers

2019

Announcement on Kotlin Conf

• Inbox → Chats
• Android app
• CI/CD
• Dashboards
• Checklists

Design management

Managing design team, helping them grow, facilitating critique sessions

Product management

Dashboards, Search, Onboarding, Entry point, To-Do lists, Navigation

Marketing comms

Visual communications, including the Space website, are also part of my responsibilities

問題の解決策

* Solution

Well-designed issue trackers, Git hosting, and chats already exist. However, these apps are often detached from one another. The goal of Space UX is to introduce seamlessness.

Solution Breakdown

軒並み All-in-1 App

 

一歩一歩 Visual style

↓ coming soon

外出先で on the go!

軒並み

* All-in-1 App

Dev tools are usually intertwined or even combined in one set...

 

...while task tracking, chats and sharing tools are separated both from dev and from each other

Let’s explore how Space fixes the detachment 💥 of the tools

スペース の歴史

001

002

003

004

005

001

Alpha version focused Repositories and friends. Not yet Space

VCS, Code Reviews, Team Directory, Blogs

002

Initial customization flow with ⭐ stars. Starred projects appear on the navbar

Issue tracking, Automation, Chats

003

Your avatar is in the first place = your Space. Rich Widgets for pinned entities

To-Do, Availability status, Packages, Boards

To create the MVP of rich widgets, we analyzed the adoption chart in which the size of each box represents its usage. The features that were used the most were the first to receive a new design.

1 project

2-10 projects

10+ projects

To get from 003 to 004 we looked into the distribution of projects per org and focused the UI on working with 1 project, yet remaining scalable

004

Less axis, focus on a project work. Widgets are getting popular. Admins now can pin widgets for everyone, easy onboarding to new projects

Documents, Plugins, Remote development, Time tracking and reports, Deployments

005

Continued simplification of the main navbar, the layout adapts to the sidebar width.

Floating toolbar with supplementary action no longer distracts from the main navigation flow.

006, 007...

It is a continuous journey!

Zen mode has always been a part of software oriented towards PROs. Space is no exception. Infromation density requires flexibility.

Collapsed mode provides access to additional screen real estate

スペース
ビジュアル
スタイル

Space Visual Style

空間 (くうかん) space

all sub-teams

空間 hoodie back-print

You might have noticed a character featuring prominently in Space mockups That is, in fact, a specific character we designed to serve as an avatar placeholder throughout our diverse range of interfaces

🔊 Space Sakura chimes, original melody tune for Space Calls experiment

Availability status

Poster / T-Shirt design for JetBrains booth on Kotlin Conf 19 where Space announcement has happened

Key tag designed for one of the team gathering

Personal dashboard

フリと

* Fleet What is up with this new code editor?

Take loved UX from IntelliJ IDEA, used by millions of developers...

...focus on the essentials to make it work without pre-config...

 

...season with the unique visual style that differs from market offerings...

...and, with that, create a brand new code editor

スタイル
参照。

* Moodboard

Gaming in 90s. Early connectivity

Half-Life, game console

Futuristic, yet down to earth

Computer displays of Devs Ep 1, 2020. Very down to earth as the UI resembles EMACS

 

Preliminary display palettes

PLATO V Terminal with plasma display 1981

It all sums up to a “first shot” which heavily influenced the resulting design
↓↓↓

 

The idea of something precise, crisp transition to other visual pieces such as typography, and the logo

As the era of the personal computer revolution of the 1980s and the early days of the World Wide Web is the main reference, various elements in the UI followed the same vibe

Even in the early stages, we thought about consistency and complex scenarios...

...such as debugging, remote dev and workspaces. Ensuring that simplicity allows scalability was instrumental

Reviewing the code inside fleet and style of git chunks

The team myself included had a lot of fun building this app; we commemorated the end of the initial phase with the swag

too cool for (old) school

but just right for a scarf

Hope you will have fun creating your apps with Fleet.

作業方法

* Introduction to workflow

Notes for designers and product managers with guidance on how to approach product work efficiently and also things to avoid.

Kri Danilina and I designed a comic to guide through the process. Rejoice!

Outlining user journeys

Product Discovery

Always form a product squad. QA, PM, Designer, Developer, Marketer. Promote equal weight of voice.

Explore the market and establish an initial vision and business strategy. Product + Marketing = 🤍

Before launch, rely less on product analytics and instead prioritize customer interviews, early prototypes, and MVPs.

Describe user journeys and solved pain points. Do not focus on features; define an outcome. Map the user journey onto product roadmap directions and prioritize.

If possible, establish a community and gather quantitative feedback.

Pre-Design

Before pixels

Treat your time and the time of your peers with respect. Initiate meetings and, the creation of design/product documents only if you need to. No need to formalize.

Speaking about saving time, some tasks can be solved by just speaking with teammates. Do not formalize; there are more low-hanging fruits than you think.

Goal = improve the UX...

...mockup, UX study, commit to a design system — these are tools.

Initial design

Re-using existing patterns and UIs helps to maintain an efficient codebase == 🤍 from the engineering team.

Stay up to date with OS guidelines, and account platform-specific UX (eg. keyboard Interactions). Try including accessibility in the early stages. Enough contrast, and support of screen reader.

Localization and extensibility are usually left out until it is painful to add them as an app may not be scalable and too fragile.

With fellow teammates

Manage expectations. Provide rough estimates and meet regularly with a cross-functional team.

Contribute to async knowledge sharing. Eg. just a few lines with links to Figma or to tickets, each Friday. Folks will know what to re-use.

Design Demo is a short pitch focused on 1 user journey. It is a tool served to create a platform for the product team to engage in the discussion

Start discussion in async mode (without any meetings). Record a video with a voiceover, post it on a channel

Present to the largest group possible. i.e., make a post and announce it on a daily standup.

Value concise information. Quickly get to the point, and stay focused.

Emphasize how your solution (and its underlying problem) maps to strategic initiatives in place.

Definition of Done (DoD)

After the Design Demo stage, designer or product manager prepares a task with a definition of done and transfers it to the backlog.

DoDs section precisely describes functional and core visual changes required for the fulfillment of the user journey.

Avoid focusing on polishing up to pixel perfection. Base UI on the components library, no matter how small the new thing is.

Always verify wording with UX writers before proceeding to the demo, and one more time before handing the ticket off to the dev team.

Do not miss your chance to learn. Decide which metrics to measure and what to track. Product insights are waiting for you.

Here, prioritization happens. We won’t focus much, but remember to stick to product strategy and chosen directions

Dev sprint

During the implementation & After the roll-out

Establish regular syncs with the product team working on the feature. If you follow Scrum, demo / retro works fine.

Employ a feature flag to access even a raw product state. Try to find a way to review various builds with different data.

It is OK to correct the direction and find shortcuts, tradeoffs. No matter how well you prepare, surprises await during development. Do not be rigid, respond.

At least once in 3 months, revisit collected metrics analysis. If you have a team of analytics, make them part of the product team

Regular customer interviews and churn surveys. Dial it back a step to equalize the feedback. Vocal one should not extinguish key input said in low-profile.

Dogfooding. Eg. JetBrains has 2000+ employees who use Space and IJ on a daily basis.

Don’t be shy to sunset the MVP, if all the signs suggest you that. It is a way to test the assumption, first and foremost.

Iterate

Task types Disclaimer