Leap1.jpg

LeapDrive Cloud Storage Suite


LeapDrive Cloud Storage Suite

The Problem

When I started at Beatport the email design templates being used were not responsive and followed a pretty straight forward formula that primarily leaned on curated lists of albums or tracks laid out in a grid. The click through rates were low and general feedback from customers and internally at Beatport indicated that the marketing was stale and predictable.

Overview

LeapDrive is a cloud-based, file storage, Infrastructure-as-a Service application that was offered by Digi-Data. We worked to build a cloud-based, transparent, fast, backup utility for Mac, iOS, and Android from the ground up and to make subsequent enhancements.

Goals

  • Allow user to do Scheduled and manual backups
  • Show visibility into backups in real time, file statistics, and file histories
  • Backup preference setting
  • File restoration from the cloud to device
  • File access from Mac, PC, iOS, and Android
  • Integration with other Apple applications (iTunes, iPhoto, Aperture)
  • Easily “skin” with custom logo and branding

Research

Before starting on the user flow or site maps for campaign templates, I worked with developers and marketing strategists to pull analytics on the previous 3 years of email sends. We referenced emails that had unusually high click through rates that resulted in sales as well as the results of any segmentation and A/B testing to inform which UX and visual elements worked well in previous sends. 

We also noted which email campaigns had unusually low responses and sent out surveys internally and to industry experts to get feedback on what about these campaigns might have caused them to perform poorly. Compiling this information gave us the full picture on how to approach the new email design. 


Information Architecture

I was able to begin mapping out my information architecture (IA). The goal was to create intuitive emails that a new and/or returning customers would be able to navigate and understand with ease. From here I was able to develop a customer journey map which I then used to develop the hierarchical structure of the emails and the landing pages I needed to design.

Features

  • Responsive design that allows the emails to look very intentional on any device
  • Clear CTA button placement
  • Interchangable content sections that allow emails to be design efficiently while still giving each one a unique structure.

Wireframing

Low Fidelity: I started the initial wireframing process using paper and pen to create very rough sketches and moved to Balsamiq for wireframing. I produced multiple iterations of the layouts, navigation and tested certain pages/features on usability websites (preference tests) and with friends. 

Hi Fidelity: I used Illsutrator for the high-fidelity wireframes. It was during this process when I was able to add the color and typography and focus more on the visual design. I tested different iterations of the emails by conducting a series of usability tests including quantitative and qualitative testing. Feedback from various recipients of test sends allowed me to improve and refine the design. Recipients wanted emails to feel less transactional while at the same time having clear CTA placement and multiple opportunities to click through the email to learn more. Their input helped me design better email templates. Click through rates and A/B testing showed that the final email designs were straightforward and simple to navigate.


Prototyping

I used Invision to create a clickable protoype of the new email templates. I conducted additional usability studies using this prototype via test sends. 

View The Beatport Play Email by Clicking  Here .

View The Beatport Play Email by Clicking Here.

View The Beatport Stems Email by Clicking   Here  .

View The Beatport Stems Email by Clicking Here.