Who What Why Brand & UX/UI DESIGN
Before
After
Objective: Develop a new brand identity system including the logo, website, UX/UI, editorial imagery, newsletter/email, marketing materials, and a comprehensive brand book for an independent news brand.
Process: After multiple conversations with the leadership team and previous failed rebranding efforts we agreed a brand refresh was needed through a new approach. Our new strategy was focused on building on top of the current brand. The qualities we wanted to integrate in the refresh were maintaining the simplicity, legibility, and typography of the before logo. We also wanted to continue to emphasize ‘Why’, since it is powerful and can be interchanged with different color combinations.
Key areas for improvement: Correct a major branding issue which was the confusion created by the period after each word (Before logo). Our audience did not know whether the organizations’ name was: Who. What. Why, Who.What.Why, or WhoWhatWhy. One of the most visible brand assets unintentionally miscommunicated the actual name of the organization.
Old logo horizontal with tag line
Old logo stacked
The arrow in the horizontal logo is lacking conceptual grounding and was underutilized as a branding element for the organization. Neither logo says enough about who we are, what we do, and why we do it.
Early explorations
These early concepts were met with honest feedback from the leadership team including “There is nothing about these that says professional, news, or trust me” and “Looks more like a logo for a modern day Agatha Christie or Clue murder mystery series.“ Despite the honest feedback, the creative leadership team determined there was something in these concepts worth keeping and we tried to refine these ideas unsuccessfully. The next round of feedback included “I’d much prefer sleek, understated line delineations between the three lines of text.“ After this feedback, I decided we needed to pivot and review other concepts from our early explorations.
Brackets positioning, width exploration
Brackets Concept pitch deck
Final Brand Design
Color applications
Color palette
Corporate font
Animated logo over white
Animated logo over black
Editorial photo collages
UI/UX Design
Objective: Develop a modern site that conveyed trustworthiness, impartiality, while improving user experience that was in line with competitive news networks.
The website of the news organization is the main point of contact between users and the brand.
Key areas of improvement: The site was dated, homepage lacked hierarchy system, and the blog format did not convey trustworthiness to the reader. All of these pain-points were even bigger when visiting from mobile devices which lacked any dedicated user experience work.
Old landing page desktop
Old landing page mobile
Initial desktop design (interactive)
Process (Phase 1): As soon as I inherited the project, I connected with the analytics team to fully understand the audience needs and experience. Through the data we found the site skewed older, male, and +65% of the traffic was coming from mobile devices.
Audience skews male
Audience skews older
65% Traffic is from mobile devices
Phase 2: When I analyzed the data, I realized it was time to change gears and take a mobile first approach to the design of the site. However, at this point all information architecture was pretty much ironed out and all stakeholders were on board with it.
Mobile key screens