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.

New Environments & Me

When I started looking at what subjects were available, this subject, Design for New Environments, stood out as being outside of my comfort zone - something that both excites and scares me at the same time. As a primarily print focussed graphic designer, I am not often exposed to design for electronic media or 'new environments'. I can design layouts for websites - informational pages for clients offering a multitude of products and services - but for more than pretty buttons and colour schemes and I am not really sure which way to go.

So what experience do I have with new environments?

I was happy to be one of the first of my friends to get a Gmail account when they released the service in Beta stage on the invitation only basis. I also relied on the web service Backpack to keep my study and work life in order. Nowadays I use the calendar on my iPhone, linked with the calendar in my Gmail account, to keep track of my appointments, and I can check my emails, get Facebook and Twitter feeds and weather updates direct to the palm of my hand.

Like some of my fellow class mates, I was late joining the new environment/social media bandwagon. I refused to get a Facebook account for a long time, just like I had refused to join MySpace before that. I eventually caved in and joined Facebook as a way to keep in touch with my friends and family both interstate and overseas. In fact, Facebook is the reason that my husband and I got together. After 10 years apart, we rekindled our friendship online, and we were married last October - just over 2 years after becoming Facebook "friends".

Obviously I am grateful for these new environments helping me to find my soulmate. The sense of community and involvement that comes with social media can be wonderful and empowering, humanity tying us together across the globe, though I do wonder how healthy it is to be spending so much time online, plugged into the rest of the world via the internet. I am constantly connected to people, some that I have never met in person, which you'd think would mean that I never felt lonely. Quite the opposite in fact, when there is no one else online I can feel more alone than if I never had the friends in the first place.

Unfortunately (or fortunately?) I don't get to use new environments much for most of my work. The very small graphic design/marketing company I work for doesn't have a blog on the outdated company website. My boss refers to Facebook as having a "face page" (which just goes to show how behind the times the company is!).

I also have a second job, freelancing at Channel 9 studios where I use various news and image websites to source material for stories. Viewers can text in news tips and photos taken from their mobile phones can be uploaded to the Channel 9 Perth Facebook page - which we can then use in the 6pm News bulletins.


I am going to have to wrap it up for now. This post is already several days overdue thanks to technical issues and work/life hassles in general, and I have so much more to say still. But it will have to wait for another day...

Back to the grind...

2011 sees me start another year of study towards my Master of Design. After taking the second half of 2010 away from study (to get married - yay!) I am looking forward to getting back into it.

I am a bit scared too, though.

I worry that I have once again 'bitten off more than I can chew', or some such metaphor. It seems rather silly of me to enrol in 2 subjects, technically a full time load, while I am working full time AND on weekends. But I don't want to be working towards my Masters for the next 5 years. I am almost halfway through - 5 subjects done so far, 7 to go - and this will be my third year at it. I must admit am pretty happy that I have managed to do it so far. And have managed to get much better marks than I could hope for too!

Initially I was driven to enrol in the Masters program because I wanted to learn all the things about design that were skipped over in my Tafe studies. Although the practical education from the Advanced Diploma allowed me to set out as a graphic designer and feel like I actually know what I am doing, I felt that understanding the theory behind design, the why and how it works, is crucial to being a 'good' designer.

Another factor in my feeling of dread is that I am in the middle of searching for a new job to replace the full time one that I hate, as well as trying to find somewhere new to live. It's a bit of a mad house at home at the moment, but as much as I would like to sit around vegging on the couch after work, I have committed myself to learning and discovering and exploring. And I am rather excited about it!