Case Study: The Evolution Of A Homepage Design

As a designer I know that I enjoy reading about the process of other designers and the stories behind their design projects which is why I thought I'd take this opportunity to share my own design story on a recent project. I've spent the past couple of weeks designing for a new photo hosting site that Zoto is developing. It's an offshoot site called fotofluff that's set to launch in January. What follows is the story of the fotofluff homepage design and its evolution from initial concept to its final design iteration as a static HTML page. Although not every project is exactly the same I hope it provides a little insight into my design process, and the project itself, for anyone who's interested.

Why is the homepage so important? It establishes the look and feel of the site, communicates the brand, and directs the user to action.

The Initial design



Challenges:
1. Create a simple form on the homepage that could serve two functions. The user could either:

a) upload a photo for hosting or
b) create a fluff of photos (multi-user pool of photos)

2. No existing logo or design collateral. No copy or content. I had to write the copy, organize the content, create a logotype and drive the creative direction.

Client's Design Requirements:
Make it look as 2.0 as possible.

Communication/Design Goals:
Keep it fun and simple. Communicate what fluffs are to new users.

Creative Direction:
With this particular project I knew I wanted to do something dark and rich with the overall "look and feel". I sourced color palettes for inspiration and knew right away that I wanted the site to be brown. I had good sense of the kinds of elements I needed in this design for it to meet my client's requirements. Illustrated artwork and the diagonal lines were elements I incorporated to give the design a 2.0 aesthetic. After I had my palette in place I opened Photoshop and started creating my initial canvas. A day or so later, after adding and refining the visual elements and polishing up my comp a bit, I had a homepage design to present to my client in a meeting.

Second Pass (per post meeting notes)
After review and discussion the process of design revisions began.



Client Changes:
1. Get rid of fluff character and replace with a sheep character.
2. Modify the form (per the client's specific directions).
3. Add text explaining that unviewed fluffs will be "swept up" after 30 days.
4. Add option for users to link to photo or video (explored as a future option).
5. Remove top links to photos and fluffs (no system searching to be implemented for these items).

My Changes:
1. I balanced out the top bar and bottom bar elements on the page.
2. I centered up and tightened the content.
3. I brightened up and simplified the design by softening the bubble element. I modified its color and the form field color to a warmer shade of brown.
4. I lost the brown buttons completely and made my form buttons the same uniform, bright green.

Third Pass



Client Changes:
1. Remove divider in the form.
2. Remove the Already have a fluff? text.
3. Remove option to link to photo and video.
4. Add the word optional next to the name your fluff field.

Fourth Pass (further simplifying the form)



My Changes:
I shortened the form by making the enter mgmt code option an on demand element that would only appear after the link was clicked (a good usability decision).

Fifth Pass (Refined homepage. Overall simplification of elements.)

I have a bad (or possibly good) habit of constantly revising my designs. For me, design is a lot like writing something. I compose a rough draft and keep revising until either I'm satisfied (which is rarely the case) or it's deadline time. Usually the latter.

After working on the design for the interior pages I revisited the homepage design again (with a fresh set of eyes). I didn't feel satisfied with it. I wanted the logotype to be simpler and I wanted to remove the 2.0 treatment. I kept the same typeface (a rounded type that would still be reminiscent of the 2.0 "look and feel"). I also felt that overall the page was still too busy (too many colors, elements, and typefaces competing with each other). I wanted to do a better job of keeping the user's eyes focused on the important elements. My goal was to distill the design to its most important visual elements.



Changes & Notes To Myself:
1. Remove 2.0 treatment from logotype and add more breathing room between the characters. Change the color to something light.
2. Center up the logo with tagline on the page. Keep it direct and focused.
3. Increase font size for the form and increase length of form field (helps to create a better visual balance between the elements).
4. Darken the 'swept up' text so it attracts less visual attention.
5. Modify the text bubble by:
a) incorporating a cloud shape with rounded curves to offset the hard lines of the composition.
b) using color to bring visual attention to the text and brighten the overall design.
6. Remove photo elements.
Details: By this point I knew the site would eventually support video and possibly music so I wanted less 'photo' focus. I also felt the photo elements were too visually distracting. They just didn't work in the composition (even though I liked them). Removing them made the composition much cleaner and focused.
7. Increase font size for the form field description and button text and increase length of form field to create a better visual balance between page elements.
8. Reduce overall color elements to bring more visual attention to the upload button (which should be the focus of the page - it's our call to action).
9. Modify the sheep to keep a sense of the multiplicity that should be associated with fluffs (which was lost when the photo elements were removed).
10. Integrate the 'no sign-ups' and 'no hassles' text into the bubble text to remove unnecessary text elements on the page.
11. Change bubble type to standard Trebuchet used for the forms and default text for visual consistency and to bring visual emphasis to the tagline.

Final Design Iteration

After the final design was approved I began construction on a static version of the page that could be handed off to the developer. I tweaked the fonts and form elements slightly in the HTML version, but overall, it retains the look and feel of the final comp.

You can view the static HTML here: http://www.colorspretty.com/fluff/home/

Look for the fotofluff.com site to launch in January. I'll be posting when we are ready launch the site.

Please feel free to share your case studies and design stories (just leave your links in the comments). I'm always interested in learning about the process of other designers.