Redesign Keboola Connection UX — part 2 Ready to go
I am back again after month and a half. It was a great time. I had one week of vacation and also my UX mate Jack spent 3 weeks in spa. Rest of the time we worked hard.
There is no visible change in Keboola Connection so far, but we have been analysing, discussing and preparing for gradual big changes.
I am not able to count how many UI/UX case studies and inspiring articles I have been reading here on medium.com.
In order to get things moving I need to know a lot of both conceptual and technical backgrounds. So I started my research before beginning the redesign.
Conceptual chit chat
My first question was really simple: “Who are our users?”. This was a good one, because it got the team to think from a different perspective. The answer, unfortunately, was not very clear. But with help from Matejkys and his analyst brain we reduced it down to 3 main types of user as in the picture below.
In my first blog post I suggested a naive roadmap of milestones (= next blog posts). Some things have changed, but we can stick to it. So this post should be about creating a manifesto.
I kicked-off discussion about creating manifesto over Slack. Why? I wanted to adopt higher principles of our company as a guide to help us create UI/UX stuff. When I was searching for Keboola principles I found even more disunity — in branding, absence of graphic manual (let me handle this), naming conventions.
Anyways I found 1 manifesto and one motto. The manifesto was written on our website keboola.com but I found it too long and weak. The motto is written on Keboola merch T-shirts. “We fight for data”, which is cool and strong but needs a little description. So I put them into shared document, simplified them and added my explanation. I also added some more principles I feel in Keboola. Odin added his thoughts too. I am still not satisfied with the result so I am going to do one more round before we start to create new interface concepts with Jack.
Technical chit chat
Padak has granted me veto privilege over UI/UX issues, but I want to use it wisely, no need to put ego into code.
I asked tech team a question: “Do we want to persist in using Bootstrap v3?”. I have worked many times with apps based upon Bootstrap. I think it’s a good quickstart, but not really useful for big modular apps. I think Keboola Connection and future apps deserves their own frontend framework (inspired by Bootstrap). Things I don’t like about Bootstrap v3 are: absence of methodology (like BEM do), unused and also missing code, no futureproofness (at this moment). My main opponent was true Bootstrap lover Ujovlado. I understand the reasons for keeping it, the main one being that to move away from it would cost a lot of time which we can’t afford at the moment. I will bring this up again later, but for now the new styleguide will be build upon Bootstrap v3.
Another question (not raised by me) was: “How many styleguides will we have?” Most of tech team suggested it’s too dangerous to have single styleguide. Small changes need a lot of testing. At this moment I agree. But if the code provided by styleguide is used strictly (that’s what we want) it will be more predictable.
I can’t imagine having more than one styleguides. I see more disunity in this. What if we have new app with new styleguide? We manually copy most of the code from previous styleguide? This was the moment I played my veto card (after discussion of course). To clarify my thoughts I created this scheme.
So we are looking for a tool which will help us bond visual unity and also provide copypastable code for developers. After further and deeper reaserches made by Ujovlado we elected Storybook as a tool for building styleguide app. It works with react-bootstrap that we use, it’s easy to import components we already use. So far, so good. I can provide more details in comments if you want.
Last step for me was to choose a wicked name for the styleguide app. I don’t want to call it “our bootstrap”. So I came up with “Indigo”. No one was offended by this name so we carried on.
Ready to go
All minds synced, so we made the first step. Created public github repository, added desired dependencies, set compilation process of styles and scripts, added test component.
We are going to add more components to Indigo-UI and make sure it’s used consistently over Keboola Connection.
Than we are going to improve customer journey. Since we know what our user roles do, we can create user flow diagram which will help us to improve overall UX.
I feel that UI/UX of Keboola Connection is not in good condition (it’s not critical). But I take this as my responsibility to repair it asap. If left unattended, it could grow into a painful weakness versus our competition.
Can’t wait for another post. Stay tuned!
