About

Abstract intro illustration

 

18:51
Tokyo-based artist, journaler & sofware designer

I am keen on launching new experiences, ranging from immersive web or offline projects to software designed to increase productivity, which is precisely the focus of my work at JetBrains.

Most of my projects are called “Half of Something,” which is derived from my moniker, ½8. Though it may seem simple, it holds multiple meanings. Arithmetically, ½8 equals 4; graphically, splitting 8 horizontally gives two 0s, while splitting it vertically yields 3. Additionally, 8 resembles ∞, and ∞/2 remains ∞. To my mind, these facets 0, 3, 4, embody the diverse and layered nature of any work.

For inquiries info@halfof8.com or LinkedIn

 

 

Recent recognition

Awwwards, TechCrunch, CSS Design Award, MarCom Awards, CommArts WebPicks, S5

Contributors

PixelJam, SoniClay,
ChrissKa

Currently

Design Lead, Code Collaboration @ JetBrains

Previously

Design Director @ Wrike, Sr. Design Manager @ Veeam

Recent activities

Design Matters 24 Tokyo | Spectrum Festival 23 Japan | Design Talks Tokyo 24 | JB Design Conf | Solo exhibition @ 現実 Oita
...

Upcoming activites

🟢 Awwwards Conference NYC 2024
🟢 Design Matters Copenhagen 2024

 

 

* Recent projects

 

½ of the
Journal

An infinite grid displaying 3×4 artworks and their accompanying stories on the flip side.

Semi [½]
Tone

A page highlighting a select few artworks where audio plays an essential role.

½ of
Mt Fuji

Interactive art project shaped around collecting Iron Stamps

½ of the
Book

Half of Journal but as a truly tangible experience. Coming in 2025

JetBrains
Space

18’–..’ Space. Chat, task tracker, ci/cd, and code storage.

Next-gen IDE Fleet

19’-21’ Fleet. Multi player code editor.

 

Scroll this page for case studies

 

 

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

 

jetbrains.com/space

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

 

5 designers

2020

Public Beta

  • Issue tracker
  • To-Do list
  • Packages

7 designers

2021

General Availability

  • Remote Development
  • Dark Theme
  • Issue boards
  • Time Tracking
  • Documents

8 designers

2022

Listening to feedback

  • Revised Navigation
  • Extensions & Plugins
  • Remote development
  • Code quality control

8 designers

2023

LLM, Planing 🔗 Coding

  • Top-Down planning (backlog, saved views, matrixes)
  • Revised Go-To & Search
  • AI assistant
  • Deployments

 

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

 

We strive to create a navigation that entails all the things while remaining easy to grasp. Let’s do a deep dive and go through the changes

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.

 

Space UI

 

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

jetbrains.com/fleet


* 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

0.6

Feedback from users, market

1.1

Product discovery

1.2

Defining user journey

1.3

Design Demo, Discussions

1.4

Definition of Done, EPIC

1.5

Dev sprint, Testing

1.6

More testing, feedback from users, market

2.1

Product discovery

Task types Disclaimer

1 Short Term

Supporting experience within the zone of responsibility, being helpful to the dev team, trying not to be a bottleneck while being an advocate of UX.

2 Long Term

Designing UX according to not-yet fulfilled user journeys and creating concepts. It makes sense to have up to 3 long-term tasks per designer per quarter.