HELLO SENDGRID PEEPS!
Welcome to my process mini-site. Here you'll be able to read and check out my thinking process.
If you have any questions, please don't hesitate to get in touch.
DESIGN BRIEF: EMAIL MARKETING CAMPAIGN TOOL
Imagine that you are a design intern at a new marketing agency. Your boss has asked at the last minute that you put together an email to send to about 100 clients announcing your upcoming holiday event. You have very limited experience with HTML or sending emails and the agency doesn’t have an email tool in place yet. So you set off to Google to find a tool and stumble upon SendGrid.
- Sign up for a Free SendGrid.com account and login.
- Make your way into the Marketing section of the product.
- Create a basic email for the holiday event and send a test to yourself.
a. Note: don’t spend a lot of time on the email design itself as this is not the focus of the challenge.
- Perform a light heuristic/expert evaluation of your experience.
a. Note: A sample is fine; we want to make sure you have time to dive into the solution section of the challenge (below).
- Identify a specific usability or information architecture problem that you feel is important to solve and tell us why.
- Create a new design for that problem, showing us as much of your process and design evolution as possible from low to high fidelity.
a. Note: if you choose a problem with large surface area, you can work mostly in low fidelity and bring a small portion of it to the pixel-perfect level.
b. Optional: If you’re passionate about visual design, feel free to break out from our styles and experiment with applying a different look and feel.
- Describe a plan for how you might validate the efficacy of your proposed solution.
I do have some experience thinking through email marketing products as a user…
While working at Hord Coplan Macht, I was tasked with managing our national email marketing campaigns to our previous and current clients – beginning with finding the right tool for our business. I conducted a competitive analysis of four different products to be able to use across three different offices focusing on features, cost, and usability.
LET'S GET STARTED...
For me, I think the trick will be to leave my biases and presumptions aside for the moment while I put my “design-intern-at-a-marketing-agency hat” on to begin the process.
And we’ll also have to channel Stephen Convey and “begin with the end in mind.” The ask is to use the product, identify a problem to design around, and produce a solution and validation strategy. I’m thinking a prototype would be an effective way to test possible solutions…and a flow will be critical to show how the UI/UX support multiple flows. But with the time constraints let’s focus on optimizing a few most likely paths.
BREAKING DOWN THE BRIEF
Let’s start with some initial context based on what we know…
- I’m a design intern at a new marketing agency
- I need to send out an email announcement about our holiday party which is happening really soon. So this tool needs to be easy to use…maybe they’ll even have templates for me.
- I need a tool that doesn’t need a lot of coding since I don’t have very much experience with coding
- I’ll also need to be able to put something together quickly since it’s last minute and my boss said this needs to go out ASAP…which really means it should have gone out yesterday.
- Hopefully it will allow me to do some styling to make it a little festive since it’s a holiday party and all.
- I’m hoping to use a tool that includes some helpful tips and suggestions around email marketing since I don’t have a lot of experience sending these types of emails.
HERE WE GO.
Let's go check this thing out and see how it goes.
Ok, just got done being a design intern trying to get out the Holiday invite for our clients. That was fun!
Since this evaluation is just a sampling, I’ll focus on few select categories to review briefly from my experience using the campaign builder. I’ll base my review on Weinschenk and Barker’s usability guidelines which is an updated version of the Nielson heuristics. Along with a short description, I’ll also include a rating based on the below scale:
1 = Cosmetic problem only—Need not be fixed unless sufficient time is available on a project.
2 = Minor usability problem—Low-priority issue that is less important to fix.
3 = Major usability problem—High-priority issue that it is important to fix.
4 = Usability catastrophe—It is imperative to fix such an issue before releasing a product.
Although, there were many UI elements and flows that worked flawlessly and just as I’d expect, I’m going to focus on the UI/UX that have the most potential for improvement and conversion.
#8 Predictability: The interface will behave in a manner such that users can accurately predict what will happen next.
There were a number of instances that the overall predictability of the elements could have improved. Specifically I would have liked to see better user feedback and feed-forward loops.
a. For instance, during the login/setup flow there was no notice that I would be receiving a verification email. And ever after I noticed it, I later had to verify it again during my campaign build. This could be improved by better user notifications. (3)
b. Once in the dashboard and opening the Marketing section, there wasn’t a clear CTA for me as the design intern just trying to send a holiday party invite. Maybe I don’t know what a campaign is and was just looking for to send an email. (This is probably a small use case and a specific newbie user persona, but the conversion rate might be affecting new users with limited experience with HTML email). (2)
#9 Interpretation: The interface will make reasonable guesses about what the user is trying to do.
I believe this section has the most potential for overall improvement and impact on the UX. There were few times throughout the overall setup of my holiday email where I was either bounced back to the main dashboard out of the editor or within the editor itself where there might be some more interface intelligence that allows for more user flow leading.
a. An example of this was towards the beginning of the campaign work flow where the editor accurately told me that I needed to add a sender and sent me to the right area, but then left me at a very blank screen without much guidance. This “blank” feeling causes user stress especially in this instance since it forces the user back to the dashboard with little navigational bearings. (3)
#10 Accuracy: The interface will be free from errors
a. In the ‘Add Sender’ section, scrolling while in the side modal was simultaneously also scrolling the main window. Fix might be to only allow scrolling on modal while inside that particular modal. (2)
b. While building out the campaign and editing elements of my email, the inspector was not sliding to appropriate area to edit that particular element. (I only noticed this with the CTA button). (2)
c. And the banner that says “Unverified Accounts are limited to 100 emails…” actually never went away even after I had gone through the verification process. (3)
#20 Responsiveness: The interface will inform users about the results of their actions and the interface’s status.
a. The main UI feedback loops of the banner notifications potentially could get lost and not seen by the user because of contrast and size issues. The issue here mainly is due to the top banners being too close in contrast to the notification. In fact, I almost missed the most important one that said my campaign was successfully sent because of the screen change bounce as well as the issue of contrast and size. (3)
PROBLEM FOR SOLVING
As I saw this issue arise in a few different ways, I’m going to address the user feedback & feedforward loops for new users. I believe this is important for conversion rates for the freebie users as well as new paid users. You know what they say about first impressions and all…
Challenge statement: As a new user of SendGrid products and platforms, I need to be able to clearly see what has happened and what I need to do next as I create and edit marketing campaigns.
- Improved email verification process that breaks that step out more clearly
- Additional UI Elements to eliminate steps during campaign creation to improve user efficiency
- Clear next steps during Dashboard and Editor switch
- Switch templates during creation (maybe even a preview option to see things once a campaign is created before actually switching)
- Interaction elements for visual queues regarding next steps
SUPER ROUGH SKETCHES
Super rough sketches showing:
- Focused notification modals
- User flows to accommodate for email verification process with opportunity to do it later
- New choose from Preview option in template to start a campaign
- Arrival point post campaign send with options to dashboard or specific campaign tracking
- Sender Management bounce with clear next step within list for initial visit
Time to jump in...time is ticking!
INITIAL PROTOTYPE TEST
OK, I have the optimal flow set up – Begin Campaign – and now I have to get it running on Invision and make sure it's working properly. Tried to embed the entire prototype, but it turns out that's not possible with a desktop prototype. Here's a link to it though...
Phew...not bad. Optimal path is running smoothly as well as the Sender Management update.
Next, I'm going to try in fit in the completion screen. Since it's such a distinct moment getting out a marketing campaign...it sort of feels like there should be some reflection of that in the experience of sending one off. Maybe a confetti canon?
VALIDATION & TESTING PLAN
Now that the prototype is up and running, let's discuss a validation plan. If we take the MVP mentality, the quickest way to get feedback is to put the prototype in front of users for some in-person moderated testing. Ideally, we'd get 5 users to test it and allow them to play with it to see where they get lost, have pain points, as well as confirm some or design decisions we've made along the way.
Once we get some initial feedback and make revisions, it would be a good idea to make a more robust coded prototype and dig into some more thorough evaluations such as tree testing, first-click tests, and some good old A/B testing. Once these designs went to production, it would also be necessary to plan out data analytics and tracking to make continual improvements.
For extra bonus points, I'd like to see some failure mapping and do some usability testing of different micro-interactions (button hovers, click states, modal animations, etc).
Here is my prototype for the design challenge: