ROLE

UI/UX Designer

CLIENT

Personal Project

AGENCY

Personal Project

YEAR

2017

Side Note: The views from this case study are strictly my own. Unlike the siteInspire designers at Howells-Studio I don’t have full access to all the user data that influenced their current design, and as a result this case study is not exhaustive.

Project Overview

SiteInspire is a resource I’ve used dozens of times, usually as a jumping off point for inspiration on a new project. Although I wouldn’t refer to it as a resource for amazing UX work, practices, and patterns, it does contain a carefully curated library of the most innovate web designs and interactions out there. It does a great job of kinda getting you off on cool sites that are breaking the boundary of what web design is capable of at the moment.

That said, there is massive room for improvement. SiteInspire’s design isn’t breathtaking; it’s actually straight up dull. And that’s okay. There’s a lot to be said for keeping online libraries barebones (pinterest, behance, dribbble, anyone?). Besides a seamless user experience, the library of work should really be the only stunning design on the page. Otherwise you’re just taking away from it.

SiteInspire’s user experience is lacking — the dropdowns of mutually exclusive category filters are archaic, the site is chockfull of content hidden behind hover states, and removing tags from generated results forces multiple page reloads, among other headaches. I consider myself a target persona for siteInspire, and I know I’m in good company. I also know there’s no shortage of designers who would benefit from seeing siteInspire get a little facelift. So here goes.

My goals for the redesign:
  • Utilize successfully tested and tried UX patterns for searching vs filtering
  • Remove confusing and limiting features
  • Make experience relevent for the 2017 user
  • Eliminate roadblocks
  • Create an intuitve experience
  • Impart trust in the user
What sets siteInspire apart?

Unlike Pinterest, siteInspire is:

CURATED by designers and not the general public

Unlike Behance, siteInspire has:

LIVE SITES that have been developed – not a collection of concept work

Unlike AWWWARDS, siteInspire has:

A much more ROBUST list of FEATURES

Unlike Designspiration, siteInspire is:

Only WEBSITE FOCUSED

Unlike dribbble, siteInspire is:

COMPLETED, LAUNCHED WORK and not design snippets & interactions

Known Issues

Collecting a list of known issues found only on the homepage, I have to assume the siteInspire design hasn’t been updated in several years. Most issues are minuscule quick fixes, but the largest user handicap is by far the dropdown tags. That will be my Everest.

1

LOGO

  • siteInspire and Pinterest have virtually the same logo, same color, and provide similar services

2

NO RESET BUTTON (not seen here)

  • only individual tag deletes
  • real-time page load requires ie. 3 page loads to delete 3 filters
  • valid argument for a submit button?

NO “SUBMIT A SITE” LINK

  • building their inventory of results isn’t a priority?

FIXED NAV & FILTERS

  • filters aren’t visible and accessible as user scrolls/browses

3

SIGN UP / SIGN IN

  • only entry point is hovering over generic avatar
  • hiding crucial links in a hover is a big no no

4

CAROUSEL

  • negative impact on load time
  • buried content
  • adds no value

5

POST DATE

  • post date/time isn’t correct
    • marked as “less than a minute ago” over period of hours I numerously reloaded the site
  • all sites are chronologically ordered new to old with no option for alternate sorting
  • specific post dates add no value to high-level view

6

LINKS TO LIVE SITES

  • icon isn’t intuitive (share/forward icon)
  • access restricted to hover

7

“SITEINSPIRE FAVORITE”

  • red star isn’t intuitive
  • info restricted to hover
    • what happens on hover-less mobile and tablet devices?
  • only gateway to siteInspire favorites is clicking star on individual site post
    • of 30 sites on homepage view, 1 had red star
  • why isn’t siteInspire favorite a high-level browse or filter option?
  • what criteria makes a siteInspire favorite? Is this even a useful feature?

Research

With a quick turn around I needed to focus on producing an Minimum Viable Product, with the possibility of adding new features and “nice-to-haves” down the road.

I have an arsenal of “designer personas” within reach that I did use for quick A/B tests and prioritizing feature lists, but for the most part I had to piggy back off published user tests and studies of services in the same arena.

Boolean Operators

A classic filtering conundrum: AND or OR filters? Should NOT be an additional filter type?

AND: smaller number of more on-target results (ie. all criteria must apply), which greatly narrows the search.

OR: large number of less precise results, broadening the search by connection two or more synonyms (ie. 3 filters produces unique results containing one term, the other, or both.

Based 0n several user tests, ‘AND’ makes the most sense – specificity outweighs scope in their expectations and desires from this type of resource. However, the redesign needs to be transparent as to what possible filters remain as the user narrows their selection.

New Terms

The category terms were in need of a serious refresh. It’s 2017, and the site design filters should reflect that.

I reached out to a couple designer friends to prioritize a list of features that included siteInspire’s current list, as well as a list of design trends from each of the past four years. Then I cut out the bottom 40%.

Out with a couple old terms, in with a couple new ones.

Filter Bar Location

The filter feature and its location on the page has seen a lot of trial and error. No one solution works for every scenario, and although siteInspire currently uses top bar filtering I’m finding it unsuccessful at A) transparency between the four filter categories, B) hidden content, and C) intuitive activation and removal of tags.

Sidebar Filtering

PROS

  • unlimited vertical space

CONS

  • too many filters hides content in a scroll
  • takes up large amount of real estate and restricts content space
  • tests poorly
Top Bar/Horizontal Filtering

PROS

  • ample screen real estate
  • tests well

CONS

  • only works with a small number of filters
  • not ideal for siteInspire
Main Content Filtering

PROS

  • immersive experience of filtering
  • personal and helpful
  • UX trend of designing full screen search filtering is becoming popular, and is an attractive approach (ie. AirBnB)

CONS

  • this is relative: Requires Submit instead of Real-Time
  • no side by side comparison with generated content

Wireframes

I created several bare bone wireframes in Sketch, to test a few filtering assumptions I had right off the bat. Most failed, for example prompting the user by asking what they’d like to filter by – similar to TurboTax handholding. Users felt too much in the weeds, and after two clicks felt lost as to where they were.

Eventually one assumption (minus a few tweaks) did test well, and provided the path of least resistance for my user’s goal.

Design

I kept the design as minimal as possible. Just like siteInspire’s competitors, the design can’t take away from the work being shown. And this is not the place to reinvent the wheel.

I stuck to a neutral color palette, but selected a new primary color to contrast the Pinterest-esk hue they currently use. Links and buttons are simple and easy to find. Navigation has opened up. I eliminated all hover states.

I also introduced a slight alteration to their homepage browse, buy adding “Popular” categories – similar to Netflix and AirBnB. These can be curated by siteInspire, or generated by simple analytics of sites with the most clicks.

Thanks for reading —
I hope you enjoyed