Being a designer who codes allows me to work with a rough UI mock and see the code through the pixels. It brings me great satisfaction to break down a UI into components, eventually writing markup that allows for dynamic edge cases.
An example of this is when I wrote the front-end code for the new and improved mobile listing blades. In this scenario I was given a mock to work with, but that only accounted for the best case scenario and lacked insight into the many states of the blade.
Identifying edge cases
I took screen shots of all possible blade combinations (both US and International sites)
So many things shoved in there, eh? Cool, lots of things to account for!
Determining the grid
Here’s a look at the redesigned mock:
I identified this as a card component with image. But the content of the card is unique, and perfect for CSS grid. I began breaking it down like this:
This is really a visualization of CSS grid thinking in terms of row/cols and grid-area. It worked out really well and was incredibly easy to lay out the content. I also mixed in some flex for scenarios when content isn’t displayed on one side so the remaining content should expand (something probably subgrid could handle in the future.) Rachel Andrew approved of this solution!
So what about all those tags?
Grouping similar items together
I started to see some patterns on the blade. Most of the data is always displayed, like listing title/price/dealrating. Logos and dealer information are also pretty standard.
But all those “tags” seemed related, so I renamed them to be “attributes” and gave them one home. When an engineer needs to add a new attribute down the line (we know that will happen) it’s much easier.
Here are some iterations on what attributes could look like on the new blade design:
And the final product:
Muted colors because listing images are usually chaotic. These are not clickable either, really just a list of additional nice-to-know things.
The mobile redesigned experience has been rolled out and viewable anytime you preform a search on mobile. Personal wins for me:
- Overall my markup/css was much smaller than the old site. It’s fun to make a big visual impact with as little code as possible.
- Page load increased
- 5% increase in leads (conversion)