Hearts n Roses

Hearts n Roses - homepage

Website: no longer online - view screenshot

Size: WordPress website, approx 50 pages of content at launch

My professional status: independent web designer/developer

Website client: Deborah Harris

Dates: November 2013 - April 2015

Categories: Scoping/pitching/quoting, Client liaison, Project manager, IA & UX, Content designer, Website designer, Front-end developer, Writing for the web, Content-loader, Responsive web design/dev, CSS-based layout, CSS3, HTML5, WordPress, E-commerce, Small sites

Brief: to build a website in WordPress for Deborah Harris, who made and sold handmade heart pendants. She was selling most of her jewellery "in person" - often to people who admired the pendant that she was wearing - and she felt the time was right to branch out and put her artwork online.

The website needed to be a fully-functioning e-commerce site where she could display and sell the individual heart pendants. She also wanted a weddings section where she could showcase her custom-made bespoke hearts that are made to order to match the wedding flowers, outfits and colour palette.

I was responsible for client liaison, project management, hosting and Domain name management, scoping, information architecture, site schematics, content design, selection and re-styling of the WordPress e-commerce theme, HTML5, CSS3, LESS, some PHP wrangling, building the skeleton site, testing, CMS training, QA and ongoing support, some content production management, writing and editing, creating product and portfolio graphics. The website is built using the WooThemes WooCommerce theme, SMPL.

Achievements:

  • Adapted and restyled an existing WordPress theme to provide my client with a powerful e-commerce solution that she could not have afforded otherwise, enabling her to sell her jewellery online and also showcase her more bespoke custom-made creations.

My responsibilities included:

  • Project management and ongoing work alongside Deborah, in order to make the site do exactly what she wanted, and to work through a range of technical and implementation issues with her
  • Selection of a suitable WordPress theme, SMPL by Woo Themes, in order to keep the price down and achieve all the functionality we required for the website; and then building and content-loading the initial site skeleton in WordPress
  • Selection of a web host (BlueHost) and liaison with their technical team as Deborah changed the Domain name of the site three times during the build - and then transferring the site to WPEngine managed hosting before launch
  • Restyling the website to incorporate Deborah's new logo and to match her colour palette preferences
  • Re-jigging the stylesheets to improve the responsive design/layout behaviour of our particular content
  • Writing the content for all the product descriptions and the slide text
  • Incorporating a number of CSS3 techniques including box-shadow, border-radius, and text-shadow
  • Wrangling various bits of the PHP in order to get the website to function exactly as I needed it to
  • Sorting out and setting up the e-commerce side of the website including content design of the microcopy
  • Collating and sorting through the dozens of photos of Deborah's jewellery and the flowers that inspire her, and optimising these for use on the website - both in the products section and in the bespoke and weddings section
  • Extensive testing of the WordPress site at all stages of the development process, ensuring consistency across the following browsers and platforms:
    • PC: Internet Explorer IE8, IE9, IE10; Chrome, Firefox
    • Mac: Chrome, Firefox, Safari
  • Extensive device testing at all stages of the development process, across actual devices running the following operating systems, using Adobe Edge to speed up the process:
    • Android 2.2 (Froyo)
    • Android 2.3 (Gingerbread)
    • Android 2.3.6 (Gingerbread)
    • Android 4.0.4 (Ice Cream Sandwich)
    • Android 4.1 (Jelly Bean)
    • iPhone 3
    • iPhone 4s
    • iPad 4
    • Windows Phone 7
    • Windows Phone 7.5
    • Windows Phone 8
    • BlackBerry OS 6.0
    • Firefox OS
  • Additional responsive testing:
    • Using Firefox to emulate different device widths - every pixel width tested from 0 to 1500px
    • Using Chrome to emulate a range of other hand-held devices, filling the gaps in my own device collection
  • Training Deborah how to use WordPress, so that she could update the website and add new products as she made them
  • Editing, proof-reading and tidying up all the pages once the content had been added
  • Ongoing support post-launch, adding and changing elements as requested by Deborah.

Hearts n Roses responsive screens

Deborah and I were both members of Wellington Batucada, which is how we met, and she's an artist as well as a musician. We began the website together on a bit of a whim, and it took a while to get finished because life kept on getting in the way for both of us. However, we plugged away, getting bits and pieces done whenever we could, and we worked together on it a lot - sitting together in my little office working through endless product photos and sorting out Deborah's various pieces of writing.

We decided to use a WordPress theme to keep the project manageable. The trick is to find a theme that works for your project in terms of functionality, as it's much easier to change the design via CSS styling than it is to change the functionality. It's the first time I've used a WooCommerce theme, although I have used WooThemes before, and I'm really impressed with the way the whole shopping cart process works, once you've got it set up.

The website has two main areas of focus - a straightforward e-commerce shop where Deborah could showcase and sell her heart pendants, and the bespoke jewellery that she custom-made for weddings. I was able to showcase the heart pendants on the homepage slider and in the homepage store display, linked to an individual product page for each heart pendant in the Hearts store; and I used the theme's portfolio functionality to create a set of pages for the Bespoke and weddings section, linked from images displayed on the homepage.

I was pleased with the end result. We didn't radically change the design, as it already provided a nice simple backdrop where Deborah's brightly-coloured jewellery could shine. The e-commerce part of the site worked really well, and was simple enough that Deborah could update the site herself. Her jewellery deserved an online display case, and we achieved that with this website.