Kim Tapia St. Amant

Interactive Space & Design, LLC

Project 1 of 6

Redesign and rewrite within an established codebase

image
This was the first dialog I did that circulated for a style approval, which was approved to move forward with.
Product:
Microsoft Visual Studio Team Services
Job title:
Sr. UX Designer
Roles:
UX design, visual design, project lead, front-end development

We all know sharing code is the right thing to do. In practice though, it’s challenging for many dev teams. I’ve encountered many team cultures where each dev is responsible for their code and delivers to the fold a nice functional package that tests out fine. Over time however, this practice generates lots of little CSS files and components that all look the same but have different underlying code. Making product changes, maintaining consistency in the UX, and any visual redesign, becomes difficult and expensive.

New to the team, I’d been asked to think about a visual refresh. I created a plan showing a way to move forward with a single set of styles and got approval. Having struck a nerve, it was easy to find people who wanted to participate in the project, it was time for new code.

Here’s what we did.

  1. Established the scope of re-work to dialogs and forms. Not sexy, but check boxes, radios, fields and the such are a big part of managing VSTS and areas are owned by different dev teams in different parts of the world.
  2. Establishing a work flow with global teams needs to happen early. Enthusiasm grew for the project as it gained momentum, and I had awesome people assigned to work with me.
  3. I created new designs and went through the approval loops.
  4. I set up a CodePen account where we created all new dialogs and forms, and we could play with and finalize our HTML and CSS.
  5. We considered different CSS naming conventions and made decisions (BEM, OOCSS, SMACSS, BEMIT= ITCSS + BEM). This will forever make me laugh when I think of it.
  6. My seriously awesome front-end dev took the CodePen stuff and worked it into the product.
  7. I was able to pick up daily builds and copied the SASS files to code pen making sure nothing broke. It was really nice to have a live style guide.
  8. After the environment was set up in the product, feature owners could copy the HTML they needed from CodePen making adoption that much easier.
  9. We had a roll-out schedule of dates people had committed to.
  10. Viola! A single set of maintainable styles. So gratifying.
image
We rewrote and restyled all form controls and created a repository for Devs to copy from.
image
Controls such as tabbing, shared the same markup making switching from one layout to another a snap.