top of page
3973343.jpg

Project 

  • Redesigning Microsoft's Newsletter 

Client

  • Microsoft 

Role

  • UX/UI Designer

  • Visual Designer

Team

  • Stakeholders

  • Project Manager 

  • Marketing Team 

  • Programmers

My Approach

I met with the client to set up our priorities and answer the questions like, What's the goal they want to achieve after this revision?  What is it that our users want to get out of this newsletter? and is there any style they have in mind?

​

Screen Shot 2020-08-11 at 10.21.30 PM.pn
Research

Content Hierarchy

Auditing the Current Design

What can be improved in the current design?

 

  • Visual hierarchy and focal point to help the user's eyes.

  • We can improve engagement by humanizing the newsletter by adding face photos or illustrations. 

  • The current design is text-heavy and not easy for the user's eyes to read.

Screen Shot 2020-07-12 at 12.55.16 AM.pn

Current Design

Content Hierarchy

I synced with the content strategist to decide on the content hierarchy before I designed the wireframes. 
 

Screen Shot 2022-12-10 at 2.53.18 PM.png
Screen Shot 2022-12-10 at 2.53.05 PM.png

Design Suggestions for Internal Review

Based on this information, I started redesigning the layout based on the content hierarchy. I prioritized visuals based on the editorial interest. I presented a few options, explaining how each design works, the design goal, and how they solve the user’s problem. I designate areas for different content categories that are consistent each month.

I chose a modern and dynamic style since our client's references were all modern designs with limited color palette illustrations.  

Next, I explained some of my solutions:

Ideation
Screen Shot 2020-08-11 at 10.31.52 PM.pn
Screen Shot 2020-08-11 at 10.31.52 PM.pn
Screen Shot 2020-08-11 at 10.32.32 PM.pn

01- Using Elaborative Illustration â€‹

Helping users to get an idea about the subject through pictures and/or illustrations. 

Screen Shot 2020-08-11 at 10.32.08 PM.pn

02- Author's Avatar

​

Top of the page: next to the hero image, it may decrease the impact of the hero image, but it humanizes from the beginning of the newsletter.

Screen Shot 2020-08-11 at 10.32.42 PM.pn
Screen Shot 2020-08-11 at 10.32.48 PM.pn

03- Flexible Layout to Meet Each Month's Needs

Creating a flexible and responsive layout in which we can add more stories/content to each section based on that month's needs. 

Wireframes for Clients's Review

Screen Shot 2020-08-03 at 7.28.19 PM.png
Screen Shot 2020-08-03 at 7.28.39 PM.png
Screen Shot 2020-08-03 at 7.28.55 PM.png

Creating Visuals for High-Fidelity Design

After a few iterations with internal and client feedback, we decided to test 3 different options 

with our actual users. Our primary focus was the task completion rate to measure our success. 

Visual Design
Screen Shot 2020-08-11 at 11.03.45 PM.pn
Screen Shot 2020-08-11 at 11.04.35 PM.pn
Screen Shot 2020-08-11 at 11.03.57 PM.pn
Screen Shot 2020-08-11 at 11.04.17 PM.pn
Screen Shot 2020-08-05 at 4.40.21 PM.jpg

Presenting Few Options 

​

  • Version A:  Using elaborative illustrations, create a fun and friendly design for the newsletter. Inspired by the New York Times newsletter.  

​

  • Version B: Using Microsoft's library's photos to create a more formal looking for our audience. It can be a good choice because of our audience. ( Mid-senior level managers and business owners )

​

  • Version C: Combining pictures and elaborative illustration, add more formality to the newsletter.

Desktop.jpg

Version A

Desktop3.jpg

Version B

Desktop1.jpg

Version C

Design Results

I have set up some indicators of success to understand how I can measure success, some examples are:

​

  • Scroll Rate:  We measured how thoroughly our audience consumes newsletter content by tracking where on the page they stop reading.

​

  • Click Rate: Analyze CTA click-through rate 

​

  • User Engagement: The average session duration or average time spent on the newsletter

Results

Based on the early User Testing results, we went with option C, which was a combination of elaborative illustrations and photos. Version A had the highest scroll rate. However, version C had the highest click rate and user engagement. 

THANKS 

bottom of page