top of page

Hot Mess Millennial

Project:   Re-Branding & Blog Redesign
Client:   Hot Mess Millennial
Capacity:   Freelance Designer
Role:   UI/UX Design & Visual Identity
HeroImagePhone.png
HeroImageHotMessComp.png
finallogo!.png
A9.png
A9.png
ProductImageMobile2.png

Project Background:

Challenge:

Hot Mess Millennial is a blog that delves into the adult world of millennials. The author, Kendra Brown, wanted to reinvent her brand and update her blog design. With some style guidelines and free reign to explore, how might we translate her specific aesthetic into a strong brand identity that can also be applied in a website that is accessible and gains a strong online presence?

Solution:

  1.  Create a strong logo and brand that clearly depicts the personality and style of writing to market to the target audience. 

  2.  Redesign blog layout to create interest and a positive user experience.

Outcomes:

Created visual identity that accurately targets the target audience and sign of approval from client

Created UI/UX design that increased brand name recognition by 72.85%

Created a web layout with breath ability from white space and less clutter that decreased user confusion.

Jump to Prototype

Solution #1

Research:

I interviewed the client and learned about who she was writing for to understand the target audience.

I also gathered key words and images from her mood board to better understand what she was trying to convey.

Vibe

       -    Dark

       -    Tropical

       -    Miami nightlife

       -    Bohemian/Biker Chick

       -    "Soul Cycle Room"

       -    Minimal but VIBRANT

Personality/Voice

       -    Honest, Raw, Relatable

       -    Wild, Unapologetic

       -    Conversational, laid-back

       -    Good hearted

I visited the current blog to understand what was visually disjointed from what she was trying to achieve. Below were the original designs for the homepage and a blog post.

screencapture-hotmessmillennial-2020-05-
screencapture-hotmessmillennial-2019-01-

       -    Boring -- seems more like a chill coffee shop vibe, more artsy

       -    Neutral colors -- bland palette and contrast do no reflect personality & Vibe

       -    Inconsistent imagery

Ideation:

I wrote down a list of 20 of the first ideas that came to mind (neon lights, frayed edges, leather, grungy, etc.), then created a mood board based on the information and inspiration photos, with an added few of my own as well as some color options I enjoyed.

HotmessMoodboard.png

I then sketched over 100 logo options. I put everything in my head onto paper and expanded on ideas that intrigued me the most.

1stSketches.png

I narrowed down my top 10 logos and created a low fidelity sketch of each to present to the client. I conducted this presentation since I had such free reign on the design, I wanted to make sure where I was headed was aligning with the client’s vision. 

HotMessLogoLowFidelity.jpg

She was able to narrow it down to four of her favorites, therefore I redesigned them in a higher fidelity mock up (and with correct spelling - whoops!) for her to better understand what the final product would look like. 

logosketch2.jpg

I chose option 4 after some discussion with the client. This design gave off the grungy/vintage Miami light up signage vibe, but was still felt more visually appealing and soft to the eye because of the circle. I also thought it would stand out on the page more and draw the eye, since the rest of the blog would be more rectangular and blocky. I also liked the fact that the shape would fit nicely into other shapes such as a square for future branding applications, or a round social media icon.

I also played around with the idea of creating a smaller, alternate logo with the initials HMM. In the end, I decided that type of logo was not needed in this case, as the brand of Hot Mess Millennial only exists within the digital space and there was no product or smaller avenue in which an alternate logo would be needed. I tested multiple color variations by swatching colors from neon signs and Miami at dusk. I pulled my favorite colors together to create a cohesive palette.

Palette3.png
Palette2.png
Palette1.png
colorpalettehotmess.jpg

I then finalized the design and got approval from the client.

finallogo!.png

Based on the logo and the mood board I designed a style guide including, the logo, color palette, typography, and some imagery guidelines. 

Web 1366 – 1.png

I chose the sans serif font Caviar Dreams because although it was modern and clean, it had a hint of funk and vintage-appeal. I also chose the font Stronger for the titles and headers because I wanted the blog to feel personal, like a friend talking to you through her journal. Stronger was able to give that personal touch, but with a hint of edge because of the brush stroke lettering.

Impact:

I defined success for this solution as creating a strong visual identity that satisfied both the client and me.

How will this design benefit the business?

This new brand will ensure Hot Mess Millennial will stand apart from the multitudes of competitors. This strong brand identity will stand out in the readers mind and unique and different and will help retain reoccurring readers.

How will this design benefit the customer?

This new brand identity helps set the tone and personality for what the reader will receive from the blog, ensuring less confusion and a create a comforting connection with the blog.

Solution #2

Research:

I went through the layouts of the current website and noted the users main pain points.

       -    Title of blog is small and not the focus on the homepage
       -    Header image is too large – focus should be on the information on each page
       -    Blog post text is too close and cramped with sidebar information – needs room to breathe
       -    Blog post boxes seem like an after thought and down at the bottom of the main page

Ideation:

I sketched 15+ ideas for the blog layout design based on inspiration I found throughout my research and my own ideas.

LayoutSketches.png

I created a wireframe for each page.

       -   Removed the large header image and replaced with a visual collage
                   -   Conveys the personality and vibe upfront in a visually appealing way
       -   New letter mark logo as the focus
       -   Blog posts are the “product” and the main selling point therefore they are listed in large boxes to have

            more emphasis on screen
       -   Share, Comment, Follow moved to bottom of the blog post to appear less cramped and focus on blog

            post itself

Home Expanded.png
BlogPostW.png
AboutW.png
SearchResultsW.png
ContactW.png

After discussing with the client, I made some minor visual alterations and produced a high fidelity mockup & prototype of the finalized design for both desktop and mobile devices. For larger images: Desktop & Mobile.

HeroImageMAC.jpg
ProductImageDesktop.png
HotMessPrototype

Web Prototype Video:

click a screen to learn more

HomeExpanded.png
About.png
SearchResults.png
BlogPost.png
Contact.png
ProductImageMobile.png
HomeMobile – 1.png
ProductImageMobile2.png
BlogPostMobile.png
BlogPostMobile_–_bottom.png

Impact:

All the needs were met and the client was very happy and satisfied with the outcome. This website has yet to be launched, therefore quantitative data on how the designs performed is not available yet. 

How will this design benefit the business?

A more impactful website that will gain more followers and intrigue.

How will this design benefit the customer?

Blog posts easily accessible, a more visually appealing experience, and a better understanding on what to expect from this particular blog in comparison to others.

 "Kendall worked with my vision, checked in with progress along the way, and kept on the right design path while adding her own eye for detail to create a cohesive look for my personal brand and blog. Her work both fit my unique style and is marketable to a vast market."
-Kendra Brown; Owner/Author of Hot Mess Milllennial
bottom of page