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.

Personas

Considering my understanding of RedBubble's current and targeted audience, I have developed three different personas to represent the website's user base.

(It should be noted that all information here is fictional and any similarity to real people is coincidental. The images used have been sourced from various websites and I do not hold any copyrights over them.)

Heidi Miller, Artist

Heidi is a 26 year old artist from Melbourne, Australia. She lives in Coburg with her long time boyfriend, their 2 cats - Molly and Nemo - and Harry the goldfish.

Heidi studied graphic design at Bendigo TAFE before transferring to RMIT and moving to the city. After graduating, Heidi has worked in varying part time jobs, mainly hospitality, until finding her current job in a local art gallery in Brunswick.

Heidi is a social person who likes to meet new people. Working at the gallery allows her to meet artists and art critics and she has been building up a useful network of industry contacts. As a budding painter, Heidi has had her work in a few small, local exhibitions and has even sold a few pieces of art here and there.

Heidi discovered RedBubble through friends. She decided to try selling her work on RedBubble as prints and started to experiment with other media to design graphics for t-shirts and other products sold through the site. Heidi's artwork has been featured on the RedBubble home page and she now averages 4 sales a fortnight. Heidi would like to become a full time, self sufficient artist one day. She is happy to exhibit when she gets the chance and keeps her RedBubble profile as a means of promoting her as a serious artist. Being able to sell her work online without having to actually print the items or manage payments and shipping allows Heidi to easily add art to her RedBubble portfolio and she has built up a strong catalogue of work over the 2 years she has been using it.

Evan Thomson, Student

Evan Thomson is a 17 year old student, completing year 12 at Sydney Boys High School in Surry Hills, NSW. Evan lives with his parents and younger brother at their home in Randwick and catches the bus to school every day. Evan's

parents both work full time, and own their home (under mortgage). Evan's parents have always encouraged their sons to work hard an

d do not spoil them with over the top gifts or spending money, yet they also encourage creative expression and support their children in all endeavours.

Evan first discovered RedBubble when searching online for a t-shirt printing service. Evan wanted to create typographic t-shirts that would separate him from the crowd, statements about life and popularity etc. Designing t-shirts is a hobby and will most likely remain that way. Evan aspires to be a film producer and to that end has done some work experience in a local film production company. Evan plans to take a gap year to travel overseas after finishing school at the end of this year, but does not intend to move away from his family in Australia just yet.

Helen Morrison, Office Manager

Helen Morrison is a single mother, divorced, in her late 40's living in Austin, Texas. Helen lives with her teenage daughter in their family home, which she took over in the divorce settlement 7 years ago. Helen has a boyfriend of 2 years - Ken Rogers, mid-50's - who is a Business Manager at an air conditioner manufacturing company. Helen works as an Office Manager in a local insurance brokerage, in the same job she has been in for over 12 years - the job she got after her daughter, Sarah, was old enough to go into day care. Helen is happy in her job, she has a good salary, commands respect and has excellent rapport with her co-workers and manager. Helen feels respected and valued as an employee and returns that respect by continually improving work flow and procedures. She keeps up to date with the latest technologies and undertakes external training when she has the opportunity.

Helen started using RedBubble after her daughter asked her for a specific t-shirt from the site for her birthday in 2010 (it was a Twilight inspired 'Edward' design). Although Helen was familiar with internet banking, she has never before used a website to purchase an actual 'thing'. Although she was a bit apprehensive at first, the transaction was successful and Helen now uses RedBubble as one of several online marketplaces to source gifts for birthday and christmas presents.

Construction Technologies

Dynamic vs Static content

The RedBubble website contains primarily dynamic content, managed by a Content Management System (CMS). The home page has a transitioning image from a set that changes regularly - based on varying themes, focussing on specific styles of artwork or featured artists.

There are numerous blogs and articles being updated on a weekly, if not daily, basis. Collections of 'featured' artists and work based around different themes are changing on a regular basis.

The search options start within different base categories (t-shirts or artwork), flowing into subsequent categories based around defined 'tags' for each piece of work. The CMS can serve up narrowly defined search results, eg: t-shirts + for girls + funny + humour + cool + red = 2 results on date of posting.

The amount of work that gets uploaded every day means the CMS needs to be able to cope with large volumes of work. The ability for each user to update the artwork files and details for their account also requires the CMS to be able to keep up with overwriting existing information, as well as uploading new details.

Programming Languages

The site is based on XHTML with programming languages such as Ruby on Rails used to extend the basic functionality. The job description for potential programmers to work (http://www.redbubble.com/jobs) specifies Ruby on Rails, Java and C# as key languages used. The ad also specifies RDBMS (Relational Database Management System) and NoSQL (Not Only SQL) as database solutions.

Ruby on Rails is an open source programming framework, and is the basis for other dynamic websites/applications such as Twitter (http://www.twitter.com/), Backpack (http://www.backpackit.com/), JustinTV (http://www.justin.tv/), Urban Dictionary (http://www.urbandictionary.com/) and Writeboard (http://www.writeboard.com/).

The transitioning images on the home page seem to be done using Java and CSS, making it accessible for people that don't have the Flash plugin. The Fancy Uploader for users adding work is created with Flash, but there is an alternative "old school uploader" available for those without the Flash plugin, which uses XHTML instead.

The Design of a New Environment

The use of Communication Design/Graphic Design on Redbubble.com

At first glance it might seem that the RedBubble website suffers from a lack of graphic design & design elements. There doesn't appear to be a lot of thought put into the design of the site - it may even seem unfinished to some. There is a noticeable lack of fancy rounded buttons, gradients and shadows, there is a lot of white space and straightforward styling of navigation and links.

In actual fact, it becomes obvious that the design of the site has been engineered to focus on the artwork of its members. I am reminded of the advice one of my TAFE lecturers gave me for preparing my design portfolio - the folio must not be better (designed) than the work it contains. In other words, the content should be the focus - not the vehicle of delivery. By maintaining a minimalist, restrained design, RedBubble is keeping the focus on the artwork of its members. As I mentioned in my previous post, it is obvious that the site values its members and the contribution they make towards creating a successful community/marketplace.

Expression of Identity

The Redbubble identity is composed of a mix of design elements, graphics, colours and type styles. The standard RedBubble logo is a sans serif modern font, in medium weight, all lowercase and using the colour contrast to highlight the two separate words that make up the website name.

The RedBubble logo also appears in other formats - there is a 3D logo used as the avatar for the site's own account, as well as different logo designs/interpretations used for promotional artwork & t-shirts.

Keeping to it's namesake, the site uses a primarily red & grey based colour palette, with blue and red highlights for links, in a straightforward style and down to earth style. By keeping the navigation as plain text links, the pages have plenty of clear space and help to keep the focus on the artwork or articles on each page.

Searching for a specific type of product is easy with clearly defined categories based on the 'tags' artists apply to their work on upload. The plain text links show clear the hierarchy of sections and allow the user to narrow down the criteria to find exactly what they are looking for - or to simply browse the numerous categories of artwork and see what's out there.

Geek >

Geek > Star Wars

The About Us page makes use of quirky imagery and bold type headings that reference hand-crafted collage/cut & paste graphics. A red text box with bubble watermarks to highlight dynamic/changing text. Small speech bubble icons next to the links are cute symbols indicating the type of article that the links lead to (blog). The quirky & fun graphics & type carry through to articles about the team, with the imagery and text informal and friendly, even 'taking the piss' out of themselves.

The site also uses illustrations as a way of providing information. Realistic style illustrations throughout the site represent types of artwork as well as the different styles of t-shirts and products available. The standardised "models" wearing the t-shirts are also a way to put the focus onto the actual artwork, keeping visual distractions to a minimum.

Communicating with members

The language used throughout the site has been "designed" to portray the personality of the team behind the business. Down to earth, straightforward, and friendly text clearly instructs the user how to go about signing up, uploading artwork and buying products. There are numerous pages and articles detailing the RedBubble objectives, the team behind the site as well as opinion pieces written by staff for the benefit of the community. Every article in the blog has commenting enabled so community members (users) can give feedback. This shows a desire for openness and a respect for members by the RedBubble team. Regular blog articles (such as the Weekly Wrap) and 'Featured' items give frequent praise to the members - fostering a friendly relationship between users and the RedBubble personality, eg:

"With the risk of sounding like a broken record, we’ll say it again. You’re really are an impressive bunch! We love compiling the wrap each week but it often takes longer than planned as we’re easily distracted by the great things we find in your journals."

and:

"We’re a spot for positive encouragement and feedback, somewhere to display work, admire work and talk about work. We’re into discussion, learning and collaboration and getting lots of people smiling."

There is even an inspirational piece of artwork available for purchase that sums up the values and goals of the site:

Design contributing to the user experience

All the design elements, graphics, colours and language have been specifically used to position RedBubble as a no-fuss, straightforward, accessible and functional service. Although it can be argued that visual design is primarily used to make sites look 'pretty' or 'appealing' there is no doubt in my mind that the visual design has a huge impact on the actual experience a user has on the site. By maintaining a clean, easily navigatable layout, the user can quickly find what they are looking for without any hassles - whether it be instructions on how to upload work or to buy a cartoon style t-shirt featuring Super Mario or the Ghostbusters. Plus, the more pleasant the initial experience is, the more likely users are going to return to the site later on!

Analysing a New Environment

Redbubble is an online marketplace/community for creatively inclined people to sell their art to the general public. Originally based in Australia, the site has been running since early 2007. It started out as an idea to bring on-demand printing to Australians - originally focussed on custom t-shirt printing, and eventually moving into calendars, cards, stickers and more.

The process

Landing on the Redbubble home page - www.redbubble.com - it's obvious that the site values the artwork of it's thousands of members. A large, changing main image of selected artwork takes centre stage, with links to the main categories underneath. There are links to Explore, Shop, Community, Login, Signup etc to help navigate to specific parts of the environment.

New members can sign up with a simple form to get them started. Unlike many other sign up forms, the RB form has only 5 fields to complete, plus a security image/text box. After that, users can set up their accounts as buyers or sellers (or both). Adding an avatar, basic details and a brief description about yourself, connecting to facebook and inputting tax details for sellers is all relatively straightforward. Every step is explained in language easy to understand for the average person - not too technical, but not over simplified either.

Once an designer/artist has set up their account the steps to upload artwork is very straightforward. A bright red button saying "ADD YOUR WORK" appears on the main screen of their RB account. From there, they select what type of work they want to upload - art & photography; t-shirts, hoodies & stickers; calendars; writing; or journals. On selecting t-shirts, a new screen reveals 2 link buttons - a template with instructions on setting up the artwork, and the "fancy uploader" link to select the file.

The next screen allows the user to put in the details of their work - title, description, tags (for organising), privacy options, what kind of products the art is for (t-shirts, kids clothes, or stickers), colour options, default style & colour (for display), print location and markup. Then, all the artist has to do it click 'save & publish' and the t-shirt/sticker is ready on the RB website for purchasing!

The feel

Overall, the whole Redbubble site is very 'basic' and easy to use. The processes for signing up and submitting artwork is very straightforward, and explained along the way with easy to follow instructions and links to further information when available. The language is easy to understand - not overly technical - and maintains a friendly tone of voice that relates to the individual user like a one-on-one conversation, informal 'peer' style.

The design of the site is uncluttered, leaving the artwork to speak for itself. The amount of information on each page is kept to a minimum, making it easy to find specific links or sections on a page, yet the pages never seem bare or lacking. Navigation between pages is simple and easy to follow. The process of uploading artwork for sale is so easy, no wonder there are thousands of artists using the site to sell their work.

The experience

Using Redbubble is relatively similar to other social network/sharing websites. The process of uploading artwork is very much like uploading photos to Flickr or Facebook, just with different information added onto the image. Instead of tagging people or putting in camera data, there is product options, pricing markups, colour variations etc. The options when uploading images doesn't overwhelm or overload.

Because there are similarities in data uploading & management between Redbubble and image sharing sites, users are likely to be familiar with the process of uploading images, and therefore not intimidated by it. The straightforward, instructional language gives all the details without overloading.

Overall, Redbubble is a successful, functional application/website making it easy for artists and designers to have their work seen and bought by people the world over.