Floral Designs is an upscale company offering discerning clients select Orchids, Roses, and choice green plants, while also offering custom, one-of-a-kind cut flower arrangements, hand-crafted by an award-winning floral designer.
I began the project by making a list of questions I would ask the client about their business and the future of their company. Next, I researched the competition, making notes on each web site. One shortcoming I noticed with many websites was that the type was quite small and difficult to read. Also, I noticed that many sites used the same predictable colors. I wanted the Floral Designs web site to stand out from the competition, with bold colors picked from the images themselves, but still with easy-to-use navigation and an easily read font.
Next, I created personas and generated scenarios to highlight tasks that customers might need to complete. I also created several wireframes for the website. I have been reading about interactive wireframes that are created in the browser with HTML5 and CSS3: I have tried this method, and it seems to shorten my development time considerably. Finally, I created the content for the website, using an Adaptive Content strategy, with content laid out in chunks, sized to fit onto a small screen, in order to minimize scrolling on mobile devices.
“Arthur and his wife Monica have an anniversary coming up shortly, and he wants to send her a custom-designed cut-flower arrangement. Arthur hasn't been able to find any stores in his area that offer the kind of arrangement he is looking for. He begins Googling "custom floral arrangements" and immediately finds Floral Designs' web site. Arthur is impressed with the beautiful photographs of orchids and roses on the home page, and notes that Floral Designs has their own award-winning floral designer on site. Because the Floral Designs website loads quickly and is easy to navigate, Arthur is able to quickly choose the flowers he wants for the arrangement and complete his order.”
“Hugo's girlfriend, Victoria, has a birthday next week, and he wants to surprise her with cut roses. Hugo's first inclination is to surf the web on his iPhone, and when he searches Google for "Cut Flowers", he quickly finds the Floral Designs website. He notices how easy the website is to use on his phone, not the case with many other websites. Hugo likes the idea of sending Victoria a custom arrangement by an award-winning floral designer, so he searches the list of suggested designs, and after spending several minutes reading descriptions, he chooses one, and checks out, satisfied that Victoria will be completely surprised by the custom arrangement.”
1. Closeup of the Home Page Wireframe.
2. Closeup of the Mobile Home Page Wireframe
I created a logo for Floral Designs and chose a very simple palette of colors, taken from the images. I designed the website using Adobe Brackets as my code editor and Chrome's development tools.
For the Floral Designs logo, I chose the “AlexBrush” typeface from Font Squirrel, as it was an elegant script that seemed well-suited to the style of the company.
Finally, here are two examples of product pages from the Floral Designs website: