Day 2 - Data Science App in 45 days - Design the look

Day 2 - Data Science App in 45 days - Design the look

Tags
Engineering
Product
Published
Published July 19, 2022
Author
Having a fruitful collaboration this morning ended with some images and designs.

Settling on the design language

We took inspiration from the UI of MonkeyLearn and Miro, both possess a quite similar style. They both
notion image
We started with a simple draft for the layout, based on the design of monkey learn.
notion image
The Design is quite simple and we kinda stuck here, so decided to wait a bit before proceeding further.

Designing user roadmap

Realizing that drawing designs only make more confused, later we agreed that it would be better to have a user roadmap (how the users hypothetically use the system) lined out before crafting the design further.
notion image
The design revolves around workflows and models. Where:
  • We import the data into the workflows
  • For additional feature (e.g: prediction, charts), we install models from the “marketplace”.
  • > By this way, users can start as atomically as possible - a plain dashboard and customize it as they want, without sticking to an opinionated statistics that our team see fits.

Typography

notion image
Bach gave me 6 font suggestions to pick from. As a software engineer who spends most of my day looking at equally-spaced font, these fonts are just in their proprietary realm.
At first, I started to think that these fonts are identical, but that only makes me more racist, (you know) to put all fonts in one bucket… At the time, I realized that I was just looking but not genuinely observing. Realizing that, I start digging deeper into the font universe.
After doing some research, I found that: apart from mono-spaced, there are more than 1 other types of fonts, instead … 4, tldr:
  • Serif: has some projection at the end of the stroke + contrast between thick and hard strokes
  • Sans Serif: Minimal or no contrast among strokes
  • Script: resembles (or is) handwriting fonts
  • Display: font that looks unconventional
Initially I gave credits for the IBM Plex Sans, maybe… because I spent time on IBM Cloud so that I grow a bias towards their looks. The font looks professional and trustworthy, like if I see a product with this font -> I’ll buy them immediately. That was until I knew that it was used for Vietnamese Tiktok that I changed my mind: Roboto is not too bad.
Until next time..