inspireUX Redesign Preview

Below are three screenshots of my proposed redesign for inspireUX.  This is not final nor complete, so I welcome any feedback that you may have!  Click on the thumbnails for a larger screenshot.

Updates in this redesign:

  • Brand new quote archive that will allow you to view all plain text quotes, sort by author, and sort  by topic
  • Toned down the design overall to put the focus on the quote images
  • Changed homepage layout to show the most recent quote followed by recent quotes in a two column grid
  • The quote image at the very top of the homepage will rotate between 10-15 different quotes every ~7 seconds
  • Instead of a submit quotes page, a submit quotes widget has been added to the sidebar
  • http://coda.co.za/ coda

    Hi Catriona

    I don't really visit this site (receive the tweets and that suits me perfectly), so my opinion isn't worth much, but figure I'll share some quick thoughts anyway if it's going to help.

    - The logo is way too big. Not so sure about the drop shadow and large glow effect on it either. Maybe it's the yellowish tint I don't like.
    - Not so sure about the random quote rotating below the navigation. Guess I'd have to see this one in action, in the static screen shots it feels distracting and steals focus from the most recent quote. It also throws the balance off a bit.
    - The “Submit a Quote” form looks awkward. The fields are potentially too short, the text area definitely too small. I'd also move it to above the tag cloud so that it's more visible. Maybe wrap the fields below their labels and left-align everything.
    - The layout of the quotes themselves is much nicer than the existing site. I like how they're more compact like the cards themselves. I don't think it's necessary to repeat the quote author right after the quote though, since they're already credited below the title of the quote. I'd also remove the “Comments:” text, just have the “0 Comments” link or whatever.
    - Vertically align the subscribe icons with their text links.
    - “Read the full article” links seem redundant.
    - Rename “Older Posts” to “Older Quotes”

  • inspireUX

    Thanks for all of the feedback!

    I'll play around with some of your suggestions. I'd be interested in seeing your feedback of the rotating quote in action. My main rationale for including that is that the problem with the blog today is that it's very difficult to discover older quotes. Having that rotate and take you to the associated posts gives me an opportunity to post some of the best quotes that a lot of more recent subscribers may have missed.

    I like the smaller tweaks you mentioned like changing the labels and alignment. I'll work on those. I'll probably keep the quote author link somewhere by the posts, mainly because it allows you to retrieve all quotes by that author. But, I can put it down by the tags or something to save space.

    Thanks again!

  • nonperishable

    These are impressions based on a visual overview and how I am associating content via position, color and hierarchy. (which is what most people do when browsing.)

    Logo:
    I think it might be better to try darker colors on your logo so that it could sit directly on the background. Or, perhaps try an outline…or darken the background and make the logo lighter? Right now it feels like you have a lot of effects going on and it’s competing a bit with the pattern you have behind the logo. I’m also having a tough time reading the tagline. Agree logo could also be a little smaller. I do like the warmth of the yellow, but it’s not working as a shadow.

    Color:
    You might want to pick a stronger or brighter color scheme. This palette feels very muted. Also, what about changing up your card colors since you are redesigning? You could also try different shades of the same color. Also thinking you could try a color instead of the gray bars and/or try to complement your lighter tones. Right now one is cool (gray) and one is warm (tan). Here’s a tool I like to use: http://colorschemedesigner.com As a sample of a stronger scheme, see this illustration http://frogers.net/wp-content/themes/frogers/_m… it’s a nice differentiation between background color and a strong color for the type.

    Hierarchy:
    Home page: I like what you are doing with the larger type, but right now it feels a little awkward with the quote card on the left side. If you want folks to read the large type first, you might want to position it on the left, since most folks scan left to right. Because of the position and similar heights, it feels like the larger type is supposed to correspond to the quote. (But I don’t think that’s what you intended.)

    I also don’t think it’s working to have the same basic layout right below this main section. Of the two, the top version is more successful at putting text together with the card, because the 2nd version feels like you are not fill the same space comfortably, versus the columns of quotes below, where the type feels nicely stacked with the quote card.

    At a glance, because both top treatments of the single card are so similar, I am unsure which I should read first or why you are repeating it. Because you have similar quote cards all the way down the page, hierarchy is a little confusing as to what should stand out first when I look at the page as a whole. Do all quotes have to be on the same page? Can some appear less “active?” Also, they are so close to being aligned that it feels like they should be aligned or that I almost want to read across as if they are a continuation of thought.

    Quote Archive:
    I love the idea that you can sort the quotes! I’m as your list grows and the columns get longer, if the user will have to scroll up and down to view the same list as they switch columns? You might also want to consider adding short links to the top of the page so people don’t have to scroll down to see their sort options. I like the idea you begin to present here, that is collapsing the lists you are not currently viewing. So if I am sorting by author/viewing the author list, I should see a collapsed state of the other choices and only see the active list. Then allow users to toggle between the lists as they navigate.

    My favorite page:
    Is your quote archive page. This page makes it clear to see who is the author and their associated quote and the separation is very obvious. Thinking this might be something to try on your home page?

    Bravo:
    Love your site – still such a unique idea. I'm so in awe that you opened this up for a public critique. Redesigning your own site is one of the most difficult (and painful) tasks!

  • jarod

    it would be great if there's a voting system ( Inspired, Feels so so, etc )

  • theredheadsaid

    Hi there! Ok here are my comments.
    1. On the second section (For Usability Enthusiasts), the four columns appear to have uneven spaces between them. Also could you justify the text on right edge as well? would look cleaner.
    2. On the strip for “Sign up now…” the “sign up” button looks like belongs to the Enhance Your Career section above it. How about making that strip pink all the way to the right edge, and reversing out the button (so it's white with pink text?)
    3. On the bottom “books” section, the bottom edge of the footer is creeping up on the book text description for the Steve Krug Rocket Surgery book.
    4. Also, I didn't realize the diagonal “more” strips were links for a while, it just looks like decoration.

  • inspireUX

    Just to prevent confusion with others, I'll mention that these comments were meant for another site, not this blog :)

  • inspireUX

    Thanks, Mitzie!

    Just to clarify a few things… I'm a little confused about your hierarchy comments. The very top part of the screen, right below the navigation, is a featured quotes area/short about summary. The quote that is directly under the navigation rotates every 7 seconds. Below that, below the gray bar that separates the header from the primary content, is a full post that represents the most recent quote. Below that are all of the other recent quotes in 2 columns. Is the most recent quote what's causing the hierarchy confusion? If so, it might work best if I just put all quotes in the 2 column format below the header.

    It might help with the two column quotes if I put some sort of container around them so that it's clear that they're two separate quotes in two columns.

    With the quote archive, I think it might be a little more clear in an active page than what's in the screenshot. Basically this is just a list of topics and authors, and when you click on any of those, it takes you to the third screenshot that lists all of the quotes related to that topic or author. I think I get your point though about the list being too long, and changing that some way to make it easier to scan. The difference between this section of the site and the homepage is that the homepage is really your way of getting a daily (well, 3x a week) quote and that is what you subscribe to. I'm not sure if I could really make the archive and blog align design wise, since they kinda serve two different purposes. I'll see what I can do, though.

    Thanks again!

  • inspireUX

    Thanks, Jarod! I actually considered putting a rating system in place before, but held off because it really would have worked best if I implemented it at the very beginning. Also, since most of my readership reads the blog through RSS or Twitter, the amount of people rating the quotes will probably be limited. It couldn't hurt though, so I'll definitely consider it. Thanks!

  • inspireUX

    I just tried a layout that removes the larger most recent post and just has the featured rotating quotes at the top and the double columns below. I think I actually like that a lot better

  • Amber

    I noticed your redesign is live so I hope I am not too late for feedback. It has been a rough week or month.

    - The rotating image of the quote at the top may be too quick. How do you get back/find that quote again if you miss part of it?

    - Your tag line is “Save, print, or share the quotes with others to serve as a visible reminder of how design impacts people, business, and the world.” I am not sure how to save or print the quotes by looking at the home page. I only know how to share the quotes.

    - Are the blue headings names or summaries of the quotes? It is not clear to me at first how they relate. I expected them to be the first sentence of the quote or something. Maybe you don’t need a summary maybe use the quote category that you will be filing it under in your archive.

    -The source of the quote could be emphasized in some way.

    - Nit – should the search box say search quotes?

    - Should the submit a quote information be on the home page or should it take you to another page with the form to submit a quote? The space to submit a quote looks scrunched.

    Overall looks great! Just some tweaks. Great Job!

    Amber

  • http://www.inspireux.com Catriona

    Hi Amber,
    Thanks so much for the feedback! Turns out you caught me – as you were posting your comment I’ve been “elevating” if you will… and you probably caught it in the midst of some updates (in particular, the submit quotes area).

    I’m going to look into how to add forward/back arrows to the quote at the top, but in the meantime I’ll at least slow it down. It’s going to require some custom coding to get the forward/back arrows.

    The blue headings are the post titles, so they’re more like summaries than the beginning of the quote. Other people have complained in the past that I shouldn’t have to repeat the quote in text below the quote image, so making the post title the beginning of the quote might make it too repetitive. The main use of the titles is for the sake of RSS/Twitter postings

    I’ll update the search box (once I find where that setting is ;) )

    Thanks again!