Website Builder

Over the last few years at this company, I've done a lot of different work, but it's difficult to show it. Some projects were small, some took months. Some were consumer facing, many were internal and under NDA. The bulk of my work has been in the last 18 months on a responsive website builer.
Here's a list of the things I've done:

  • UI Design
  • UX Design
  • Research
  • Presenting
  • Running usability tests
  • Usability note taking
  • Wireframing
  • Prototyping
  • Storyboarding
  • Whiteboarding

Low fidelity

Whiteboarding two different content outlines for clients that have different business focuses.

Style, Pattern, Level and Content Combo Exploration

What we are building is very complex; a product for a client with average internet knowledge to build a responsive, clean looking website. A wesbite building system that is content agnostic, almost endlessly configurable, looks good on a 30" monitor down to the iPhone 4 and everything in between... Oh, and that can switch between a growing number of themes at the click of a button.

Exploring some ideas for a responsive header solution.
Playing with what different content combos would look like at diferent nested levels.
Sketching out ideas for what the same content combination would look like at different levels to show visual hierarchy and differentiation.
I came up with a dynamic and randomized card style that had different angles depending on it's level, then the angled corner was randomized on top of that.
We started to notice a lot of common patterns. I tried to find less common patterns on other sites or come up with my own for differentiation and to stretch the platform.

Wireframing

Exploring what a configurable, responsive header would look like with a unknowable amount of content.
Manually working through thr process of content outline translates into a wireframe and from there becomes a website.

High(er) fidelity

With one of the color palettes I picked that no client will actually use.

I came up with the design, style tile, mini mocks, specs, and 5 color palette options. I updated the design based on manager feedback and needs for differentiation. I also paired closely with multiple developers on a tight deadline to fix design problems and code bugs in order to see the theme become a reality before NADA.

This one was fun but never got built.

This was a theme I made during an explorations phase. It shows how we used the idea of "cards" and "levels" to create rules and a design system to create websites that look good, even if we don't know what the content will be; how many cards, images, buttons, or how long the titles, or copy are.

Skeleton Screens

There was a requirement from the client that we couldn't show the product until a zipcode had been entered. I worried that a user wanting to see inventory and either getting a popup, or blank page with just a zipcode form was not expected behavior. I knew I had seen Facebook and other websites and apps showing a "wireframe" or placeholder of the content while it loaded. Later, I learned that Luke W. calls them "Skeleton Screens". The client loved this proposal and we went with it.

See it live here

The placeholder > the default state > after user input.