Wireframes expanded

The wireframes from the previous post were very simplistic, and did not show in detail how the various functions would be used. I have now updated the wireframes with more detail, as shown below.

Home Page

1. The featured on the home page is currently a transitioning image with arrows for selection, no thumbnails included and no indication of how many images make up the set. The carousel function shows thumbnails of the various images, and the dots indicate where in the set the current selection sits. The thumbnails are scrollable left or right on hover. Showing how many images are in the set and allowing users to select thumbnails increases interaction and play, which will hopefully translate into more click-throughs to the artwork and potential sales.

Art Map

The Art Map shows "hotspots" across the globe, areas/regions that have a lot of RedBubble artists. Users can select a hotspot and see a set of thumbnails of artists in that area. They can then click on a thumbnail to see further information and follow through a link to the artists profile and artwork.

Sketching User Experiences

After putting the wireframes on here, I thought it was important to show the user experiences that were outlined for the redesign. The two focus areas of the redesign are to create clearer communication of the site's home page, and to add a new function, the Art Map, which will allow users to search for artists by location.

Here is one of the user experiences sketched out (badly) that influenced the redesign:

Helen looks for Artwork

1. Helen is walking down the street when she see a street artist selling paintings.
2. She likes one of the pictures, but doesn't have the money on her to buy it right now.
3. The artist tells Helen that the picture is for sale as a print on RedBubble and tells Helen her username.
4. Helen and the artist chat about other things for a bit.
5. Helen gets home and goes to look up the artists username - but she's forgotten it! Damn!
6. Helen tries to search for the artist under her location, because she remembers from the chat that they both come from the same town. Unfortunately all Helen gets in the search results is photos of that town...

Wireframes

After working out the personas, and creating some sketches of scenarios and writing a User Design Brief, it's time to put together wireframes of the revamped environment.

Wireframe 1

This shows the improved RedBubble home page design. First time user feedback indicated that when landing on the home page purpose of the website is unclear - the large feature hero shots distract from the links underneath to buy t-shirts or artwork, especially if the user has to scroll down to see them.

1. The new header has the logo and a tagline explaining what the site is for. This replaces the text previously underneath the the hero shot.
2. The links to the shop have more prominence on the left side of the screen, including a new link to the Art Map function.
3. The feature work hero shot has been reduced in size and moved to the right side of the screen to allow room for the shop links.
4. The sign up & login links remain to the right of the screen, but are now underneath the search box (which was previously next to the logo on the left). The Cart and MyBubble links have been taken off the Home Page until a user is logged in .

Wireframe 2

This shows the new Art Map page. The user can scroll, spin and zoom the globe and see which locations registered artists/sellers are from. Artists locations are indicated by a red dot, and when the user clicks on the dot a list of artists from that location appears on the right side of the screen (see Wireframe 3).

Wireframe 3

Shows how the list of artists will appear once a location has been selected on the Art Map globe. Clicking on the artists link will take the user to the artists RedBubble profile page.