UI/UX Designer
cameo email redesign mockup.png

Cameo

EMAIL REDESIGN

Before

cameo email before

After

cameo-email-redesign-by-kari-huang.png
 

OVERVIEW

Client: Cameo, an app that helps you book personalized shoutouts from your favorite people

Project Type: Email newsletter redesign

Tools: pen, paper, Adobe Photoshop

Duration: 3 days

Goal: 

  • Design a new layout for email newsletter to showcase new talent and current talent to get people to return to the website,
  • Facilitate bookings and repeat purchases, and
  • Minimize number of unsubscribers of email list

Solution: 

  • Provide visual breathing room to e-mail by dividing sections of newsletter via minimal color blocking, almost-invisible gray lines, stand-out headings, and modern, minimal font types
  • Make call-to-action links more prominent and present to ensure viewers are aware of call-to-actions (showcase new talent, get people returning to website and facilitate more bookings)
  • Give viewers more options to view more content in the same area at bottom of e-mail to minimize unsubscriptions
  • Use copy that brings out Cameo's brand of being authentic, engaging, and not serious

PROBLEM FINDING

I was tasked to redesign Cameo's e-mail newsletter within a few hours. I was given a copy of the previous month's newsletter and my job was to redesign it however I saw fit.

I asked them some questions about the newsletter before I got started designing anything because I wanted to find out their goals and anti-goals with the newsletter and get any information about an existing brand style guide they may have used and want to keep in place with the new design.

  • How often do you send the newsletter? 
    • I want to see if they needed a certain structure that all newsletters had to follow. If the newsletter is sent out every day, it would be boring for viewers to see the same sections every day. If newsletter is sent out more periodically, it would make sense to keep sections consistent with similar types of content so viewers know what information to expect from the newsletter.
  • Who are the newsletters sent to? How do people sign up for the newsletter?
    • I wanted to find out who their target audience is, and depending on the ways people sign up for the newsletter, what their intentions may be for signing up (did they unknowingly sign up for a newsletter at an event, did they go to a specific page that said they'd be notified of updates of the app, or did they sign up specifically for just the newsletter). I'd design the newsletter to hold certain sections of information if needed and cater designs to their audiences.
  • Do the newsletters usually contain the same sections for similar content or does it vary from newsletter to newsletter? Do you run newsletter campaigns (i.e. promote booking cameos one period, promote talent recruit one period, showcase reaction videos, showcase featured artists, etc)
    • I'm asking another question to clarify any varying sections of the newsletter they'll need for different purposes (because then I'll need placeholder sections that work for multiple types of content, or sections will be same across all newsletters).
  • What do you want viewers to do while going through your newsletter? Are there any links you want them to click on, specific information you want them to see, take them to your website, merch links, etc.
    • What other information should I include, and what information should I highlight to ensure it stands out so you can deliver your messages effectively?
  • What do you NOT want viewers to do; what messages do you NOT want to convey through the newsletter?
    • What things should I stay away from and be mindful of not conveying?
  • What are a few words that describe the Cameo brand?
    • Taking hints for any style guide they may have.
  • What are some words that do NOT describe the Cameo brand?
    • Taking more hints for any branding style they don't want to convey.

DESIGN ASSUMPTIONS

I compiled a list of assumptions I'd base the newsletter design off of based on the answers from Cameo and the previous month's email newsletter sample they provided:

  • Cameo brand is authentic, simple, modern, engaging, energetic, iconic, sleek, playful. It is not serious, high quality, or professional.
    • Sans serif font, bright colors, clean lines, casual-tone copy.
  • Newsletters sent out weekly to existing customers, people who have requested talent on website, people who have requested updates to unavailable talents who return to the site.
    • Newsletter should have a regular structure for sections with similar content. Content should include sections for showcasing new talent added to the site.
  • Newsletter contains same format and sections with exception of promotions such as Black Friday, Valentine's Day, etc. Sections: reaction video of the week, who's new this week, best cameos of the week.
    • Organize newsletter so there's room for repeating sections and one section for varying content. Include space for the 3 mentioned sections.
  • Goals of newsletter are to showcase new content/talent to get people returning to website, and to facilitate bookings and repeat purchases.
    • Include elements that highlights new talent and give viewers some information about the talent. Include easy call-to-action buttons that make it easy for viewers to book talent upon seeing the newsletter.
  • Does not want viewers to unsubscribe to mailing list.
    • De-emphasize unsubscribe link currently at bottom of newsletter.
  • Based on the information provided, I decide it is best for me to assume that the sections are in the e-mail for specific reasons that are out of my scope to understand at the time, which is why I choose to keep most of the material the same and not change too much of the previous design. 

INSPIRATION

For inspiration, I looked at Cameo's website and several email newsletters from different companies from the web and my own email inbox. I sought out minimalist elements with clean lines and a playful energy.


CREATE

With the above design assumptions in mind, I sketched out a rough outline for what the newsletter sections would look like along with content placeholders with boxes and lines. I used a pad of paper and pencil from my desk.

cameo email newsletter sketch draft

I took this sketch and opened Adobe Photoshop CC to start building out the elements. I dragged the content (photos, copy, and button) from the newsletter sample Cameo sent to me onto my computer desktop so I could use them in the new design.

cameo old email newsletter content

Organizing assets. I started arranging the elements onto the Artboard and grouping them into their own sections. The layers were stacked on top of each other according to their order in the Artboard so I could easily go back to change anything and move things around if needed.

artboard assets organization

Building new assets. I realized that I needed to add more clear call-to-action elements in the design, so I took a screenshot of the button in the sample newsletter as reference and built a new button that I could change the text and color in.

I first arranged everything onto the Artboard as the previous e-mail looked, then moved sections around to reflect my previous design assumptions.


SOLUTION

Final e-mail redesign after several iterations:

cameo email redesign

DESIGN NOTES

1. Created background so e-mail content can stand out and feel contained in the white space. Color feels energetic and playful. Clean lines feel modern and sleek.

Also put New Cameos in first section of e-mail. The reason why is because the Call-to-Action buttons take viewers to pages where they can further book talent (perform more actions instead of one). The list also makes people want to scroll down for more info. Since 2 main goals of newsletter are to showcase new talent and facilitate bookings, I placed this section first.

2. Reaction of the Week section goes into 2nd section after viewers scroll through new cameos. This makes viewers consume more info (booking links) before they get to the anticipated reaction of the week to see if they got featured or anything.

cameo reaction of the week

3. Use different button colors for different types of call-to-actions. Also adds more color to e-mail so viewers know what different types of links they can interact with.

◦ Browse more content.

purple button

◦ Book now gives more information and gives a clear call-to-action to facilitate more bookings.

red button

◦ Watch highlighted video in full

blue button

4. Used light-gray dotted line to separate different e-mail sections. Used larger text for section headers so it’s easier to read when scrolling quickly.

Added optional section for some text in case you want to shout anyone out or if you received a new batch of people from a specific friend group/media group.

Added option to Browse All New Talent right underneath in case they want to see all other talent instead of just new ones – additional call-to-action gives users more opportunities to click on links.

who's new on cameo

5. Added a social-media link section to very bottom so people can click on more Cameo-related stuff when they get to the bottom of the e-mail.

Also added link to website so viewers can browse even more. Places this info close to the unsubscribe links so they have more options to check Cameo out instead of just unsubscribing.

social media unsubscribe cameo

6.  Put e-mail fine print in lighter text so it doesn’t stand out as much as main content since you don’t want people to unsubscribe.

Added a subscribe button in case it’s a forwarded e-mail and new people want to follow your newsletter. Having it here makes it easier for them.

fine text

STYLE GUIDE

cameo email newsletter redesign style guide.png

FEEDBACK/REFLECTION

I asked for feedback after delivering the design and Cameo said the redesign looked nice, although it was hard for them to see what my personal style was.

Going into the design, I wanted to only address the problems that they wanted to solve with the newsletter, which was to showcase new talent encourage more bookings from customers. I maintained the style guidelines they wanted their brand to have and followed a similar style that I saw on their website to stay on brand. I started the project with that as the focus -- to solve a problem. 

Upon hearing their feedback, I realized that they wanted something more from the design, something that showcased more of what I personally would have liked to see with my own design style applied to their brand.

The reason I changed very little with this redesign was because I had recently learned the perspective of only addressing the most important problems of the product due to technical limitations. In a different experience with another client, I made numerous changes and suggestions to improve their current app, which led to major pushback on my design suggestions because it seemed like I was saying their current product had 99 and more problems to fix. That previous client also said they could only implement so many changes from my design suggestions due to their technology abilities at the time, so from that experience I wanted to focus on the most important problems with my next client, which happened to be Cameo.

With this, I want to develop more of a balance between problem solving and implementing my own design taste. It's always important to be mindful of business needs and development limitations in mind. I want to be more aware of what design flavors clients want to see from my designs as opposed to only solving a problem. I want clients to feel like I'm adding a personal touch of my own style into my designs for them so that they know I'm doing work that only I can do and not any other designer can create.

In order to do this, I want to continue doing more projects, work with more designers, and explore more styles to build a stronger sense of who I am as a designer and what I can personally bring to the table, while being flexible with providing what clients really need from me as a creative problem solver.