pre-design

find the value proposition

competitive analysis

validated user research

UX Strategy

Rapid prototyping

flow charts

interactive prototypes

usability tests

Specs, pattern library, and documentation

high fidelity mockups

brand's fashion

iteration plan

Please view the examples on a desktop or tablet device

Find The Proble

one of the original newsletter

the original template in the system

it's the brand color but the use of it is not smart

client

  It's our color, we have to put it there, it's kinda a trademark. But yeah, it needs to look sleeker in the email blasts...

"

"

images are small which doesn't look good on mobile

90's underlined hyperlink style

  We don't want the underscore, it looks silly, and old-fashioned. But our templates don't have the option to remove it and we don't know how to remove it in the code. We are not coders.

client

"

"

rounded rectangle buttons are OK but the font size's not constant.

client

  We know it doesn't look fancy, but you can't imagine how much effort we put into it in order to make it look just OK! This is so hard. We need some coding tutorial.

"

"

too much freedom, not good for people who's not familiar with HTML/CSS

do not have pre-customized sub-templates for labels under Capitol

not friendly with buttons, links and other frequently used interactive elements

  We feel like we need something called 100 useful code snippets you need to know so that we are not like looking at the templates and don't know what to do.

client

"

"

client

  And even if it had templates for each label, it would still take us 4 hours or more to make just one newsletter!

"

"

client

  I made the button on my own, I'm so proud of myself! Though it doesn't even look good...it took me days or weeks to figure out how to do it!

"

"

Competitive Analysis

High-level Flow And Paper prototypes

User Research And Mental Models

Hi-fidelity Mockups

  • Medium
  • Facebook Basic Black
  • Black Instagram Icon
  • SoundCloud Basic Black