Delicious Designs By Tiffany
2015-2016

Mobile, Tablet, and Desktop views of

Project summary

This newly started custom dessert business needed to establish a brand and a web presence, as well as accept complex and detailed orders.

Project Phases

Planning

I started this project by getting an understanding of the business, the procedures for receiving and fulfilling orders, and the goals for growth. From these conversations I established the needs for the website and recommended Drupal as the content management system for several reasons:

  • the client could easily add and edit content as the business grew
  • orders could be received and managed efficiently using Drupal’s forms and views
  • eCommerce options could be integrated easily in the future

I worked with the client to determine the architecture of the site, including the pages and navigation hierarchy. We also determined the Order form fields during this stage. I created wireframes of the planned site pages to determine the layout of content in both small and large screen devices, including several drafts of homepage layout options.

Design

Since the business was newly formed, a logo, color palette, and typography for the brand were all needed. After sharing a few drafts of different logo options, I created the final logo using feedback about the aspects that the client liked from each different draft.

Delicious Designs by Tiffany Logo, a cake and the business name
The final logo

Color palettes and typography were decided upon through the same iterative process.

The 6 colors chosen for the branding color palette, green, dark green, light purple, dark purple, two grays
The branding color palette

Using the established branding, I created style tiles that would be used to inform the style of the site. Style tiles include the fonts and sizes of headings and copy as well as the style of website elements like buttons and images.

Style tile for the site including font sizes, colors, and the style form elements
The style tile that all of the site styling is based on

I derived mockups of the site by combining the layouts in the wireframes with the typography and color schemes from the style tiles into prototypes created in HTML and CSS.

Development

Homepage and navigation

The homepage showcases the latest images of custom desserts created by the business and invites the user to see more images. Throughout the site, the Place an Order call to action is always present.

Managing products & site content

One priority for this site was to make sure the client had the ability to easily add or update products, content, and copy on their own.

The client needed to be able to quickly add or update products as their business grew. I created a Product content type that was simple to use. The client can add or remove photos, and easily manipulate their order on the homepage and the individual product pages using a drag and drop interface.

I set up an interface for the client to edit the various blocks of copy in the site, such as the homepage tagline and the footer contact information. I also created an interface where the client could add additional social media icons as the business grew.

Order form

An integral function of the site is the order form. Simplicity, clarity, and ease of use are all important to the user experience of a form. Presenting customers with all the possible options at once would overwhelm and discourage them from placing an order. Instead of listing all the fields, only the necessary fields appear as the customer fills out the form. For example, if the customer selects delivery, an address field appears as the next part of the form. If they choose 3 tiers in their custom cake, frosting and filling options for each tier appear.

A screenshot of the order form as the user first sees it
The order form asks for only the essential information before expanding based on the customer’s responses.

The order form allows customers to upload images or provide links to example desserts that would help the business get an idea of what the customer is looking for. The form includes a confirmation email for the customer, a notification email for the business, and an admin area on the site for managing orders.

Contact form

A simple contact form is included in the footer of the site. The Contact link in the top navigation smoothly scrolls the user to the contact form.

Testing & Launch

The site was tested in modern browsers and various mobile devices, as well as evaluated for performance issues using Google’s Page Speed Insights. I also set up Analytics and Search Console so the client could use these tools to review and understand the site traffic after launch.

As part of the launch phase, I provided documentation on how to edit content and update different portions of the site. Launching the site also included assisting the client in obtaining a domain as well as setting up a hosting plan. The client also chose a monthly maintenance plan that includes security and maintenance updates to their Drupal installation, as well as support and bug fixes.