Reinventing the Donation Experience: MSN's Interactive Philanthropy Campaign
Key Goal
A redesign of MSN Causes landing page based on competitive analysis and business requirements
Deliverables
User experience (wireframes, mockups, hi-fidelity prototypes), Product Management (competitive analysis, feature priority list)
Microsoft
Key Goal
A redesign of MSN Causes landing page based on competitive analysis and business requirements of the Microsoft News Editorial Team
Deliverables
User experience (wireframes, mockups, hi-fidelity prototypes), Product Managment (competetive analysis, feature priority list)
Microsoft
Key Goal
A redesign of MSN Causes landing page based on a competetive analysis and business requirement
Deliverables
User experience (wireframes, mockups, hi-fidelity prototypes), Product Managment (competetive analysis, feature priority list)
Microsoft: MSN Causes Landing Page
Key Goal
A redesign of MSN Causes landing page based on competitive analysis and business requirements
Deliverables
User experience (wireframes, mockups, hi-fidelity prototypes), Product Management (competitive analysis, feature priority list)
Microsoft
Key Goal
A redesign of MSN Causes experience based on competitive analysis and business requirements
Deliverables
User experience (wireframes, mockups, hi-fidelity prototypes, competitive analysis, feature proposals)
1. Background
The Microsoft News Editorial Team is responsible for all editorial content on Microsoft Edge, the Microsoft News mobile application, and Microsoft Network (MSN).
MSN Causes is an initiative that the Editorial Team launched to educate MSN users about social causes (e.g. homelessness, gender equality, water crisis, diversity in tech, etc.) using articles, videos, quizzes, and other editorial content.
The Editorial team wanted a new design for MSN Causes landing pages with information about a cause, links to articles about that cause, quizzes, animations, and updated graphics to help tell its users a more compelling story and provide a more engaging experience.
1. Background
The Microsoft News Editorial Team is responsible for all editorial content on Microsoft Edge, the Microsoft News mobile application, and Microsoft Network (MSN).
2. Problem Statement
How might we educate MSN users about social causes in a more compelling way to motivate them to get involved?
2. Problem Statement
How might we educate MSN users about social causes in a more compelling way to motivate them to get involved?
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
3. Users & Audience
MSN Users (mainly those ages 50-64)
3. Users & Audience
MSN Users (mainly those ages 50-64)
3. Users & Audience
MSN Users (mainly those ages 50-64)
4. Roles & Responsibilities
As the sole UX designer/researcher for this team, I worked alongside two editors to redesign the new MSN causes landing page section to be more innovative and engaging to MSN users. Additionally, I proposed new features that MSN to showcase the opportunities for more user engagement.
4. Roles & Responsibilities
I was a UX Design/Development intern on the Starbucks Web Engineering team in the Global Digital Products (GDP) department. I was responsible for this project.
My final deliverables were mockups, a digital prototype (required), low and mid-fidelity wireframes, and a Github repo with a code application codebase.
4. Roles & Responsibilities
As the sole UX designer/researcher for this team, I worked alongside two editors to redesign the new MSN causes landing page section to be more innovative and engaging to MSN users. Additionally, I proposed new features that MSN to showcase the opportunities for more user engagement.
5. Scope and Constraints
To help resolve a lot of confusion from the beginning it was important to define the scope. This helped me understand how broad my design could be and determine was what was feasible before I dug deep. Here are some of the questions that this process triggered:
How much time do I have?
approximately 3 months
Which platform? mobile or web?
Mainly Web because the majority of MSN users are 40+ but should be optimized for mobile
What are some technical constraints?
The capabilities of Editorial Team's developers are limited, so it's important to keep that in mind when designing the landing page. However, the Editorial team may consult another team to build out the landing page if they desire a more complex design (to be determined once a final design is decided).
What will be required from design going up to a certain date? How will it evolve over time?
After about 2 weeks of onboarding, the business determined that it wanted 3 preliminary design proposals of the landing page within the course of two weeks.
5. Scope and Constraints
To help resolve a lot of confusion from the beginning it was important to define the scope. This helped me understand how broad my design could be and determine was what was feasible before I dug deep. Here are some of the questions that this process triggered:
How much time do I have?
approximately 3 months
Which platform? mobile or web?
Mainly Web because the majority of MSN users are 40+ but should be optimized for mobile
What are some technical constraints?
The capabilities of Editorial Team's developers are limited, so it's important to keep that in mind when designing the landing page. However, the Editorial team may consult another team to build out the landing page if they desire a more complex design (to be determined once a final design is decided).
What will be required from design going up to a certain date? How will it evolve over time?
After about 2 weeks of onboarding, the business determined that it wanted 3 preliminary design proposals of the landing page within the course of two weeks.
5. Scope and Constraints
To help resolve a lot of confusion from the beginning it was important to define the scope. This helped me understand how broad my design could be and determine was what was feasible before I dug deep. Here are some of the questions that this process triggered:
How much time do I have?
approximately 3 months
Which platform? mobile or web?
Mainly Web because the majority of MSN users are 40+ but should be optimized for mobile
What are some technical constraints?
The capabilities of Editorial Team's developers are limited, so it's important to keep that in mind when designing the landing page. However, the Editorial team may consult another team to build out the landing page if they desire a more complex design (to be determined once a final design is decided).
What will be required from design going up to a certain date? How will it evolve over time?
After about 2 weeks of onboarding, the business determined that it wanted 3 preliminary design proposals of the landing page within the course of two weeks.
6. Process
– Competitive Analysis: audited in-house applications clarified what the Editorial team was responsible for, how Microsoft Causes fit into the picture what competitors were doing, what features MSN could add, etc.
– Conducted Editors about what they wanted, determined best methods for moving forward
– Generated a range of ideas and iterated designs (wireframing, mockups, iterate)
– Meet with stakeholders to gather feedback
– Integrated feedback and developed final design
6a. Competitive Analysis
I first wanted to get a better understanding of the applications and tools the Editorial team worked with as well as who their competitors were in their market. How are these sites structured? What is the experience like, for the user? Have users offered recommendations for improvement? Are those recommendations any good? By gathering this ethnographic data, I would be able to understand what users were currently experiencing and could propose new design solutions for the future.
I spent time on MSN as well as competitors’ sites (Yahoo, Google, Whatsapp). I tried to identify what each did well, and opportunities for improvement. Words are the most useful for me so, instead of a matrix-version of a competitive analysis, I did a high-level text version.
6a. Competitive Analysis
I first wanted to get a better understanding of the applications and tools the Editorial team worked with as well as who their competitors were in their market. How are these sites structured? What is the experience like, for the user? Have users offered recommendations for improvement? Are those recommendations any good? By gathering this ethnographic data, I would be able to understand what users were currently experiencing and could propose new design solutions for the future.
I spent time on MSN as well as competitors’ sites (Yahoo, Google, Whatsapp). I tried to identify what each did well, and opportunities for improvement. Words are the most useful for me so, instead of a matrix-version of a competitive analysis, I did a high-level text version.
6a. Competitive Analysis
I first wanted to get a better understanding of the applications and tools the Editorial team worked with as well as who their competitors were in their market. How are these sites structured? What is the experience like, for the user? Have users offered recommendations for improvement? Are those recommendations any good? By gathering this ethnographic data, I would be able to understand what users were currently experiencing and could propose new design solutions for the future.
I spent time on MSN as well as competitors’ sites (Yahoo, Google, Whatsapp). I tried to identify what each did well, and opportunities for improvement. Words are the most useful for me so, instead of a matrix-version of a competitive analysis, I did a high-level text version.
1. Competitive Analysis: MSN/Microsoft News
1. Competitive Analysis: MSN/Microsoft News
1. Competitive Analysis: MSN/Microsoft News
STRENGTHS
– Wide range of services like messenger, news, search, email and customer base
– Strong brand name as the website & its services have been among the top since 1995
– Services like HotMail, MSN Messenger, MSN Explorer are popular sub-brands of MSN
WEAKNESSES
– Bugs on the home page
– UI is cluttered and makes it hard to focus
– The color scheme is not particularly compelling, extremely dull
– No key differentiator feature compared to competitors
– Not appealing to a younger audience
– Increasing usage of social media has diverted users from MSN & similar websites
OPPORTUNITIES
– Competitors present in the market can affect the business of MSN
– Upcoming dedicated websites single service like e-mail or news
– New innovations in contemporary competitors
STRENGTHS
– Wide range of services like messenger, news, search, email and customer base
– Strong brand name as the website & its services have been among the top since 1995
– Services like HotMail, MSN Messenger, MSN Explorer are popular sub-brands of MSN
WEAKNESSES
– Bugs on the home page
– UI is cluttered and makes it hard to focus
– The color scheme is not particularly compelling, extremely dull
– No key differentiator feature compared to competitors
– Not appealing to a younger audience
– Increasing usage of social media has diverted users from MSN & similar websites
OPPORTUNITIES
– Competitors present in the market can affect the business of MSN
– Upcoming dedicated websites single service like e-mail or news
– New innovations in contemporary competitors
2. Competitive Analysis: Yahoo
STRENGTHS
– Simple and easy to use interface
– Fast and very relevant search, free for customers & users
– One of the most recognized brands with over 350 million users. Yahoo! itself claims it attracts “more than half a billion consumers every month in more than 30 languages
WEAKNESSES
– Tough competition from players affecting advertising revenues & allegations of data leaks
– Losing ground to the competitors despite first mover advantage
OPPORTUNITIES
– Acquiring more partnerships with different companies and smaller websites to widen the market of integrated products and drive more traffic to Yahoo
– Ads from businesses not having an online presence
3. Competitive Analysis: GOOGLE NEWS
3. Competitive Analysis: GOOGLE NEWS
STRENGTHS
– Google has a simple interface and it gives comprehensive results without confusing its users.
– Google also weights the votes and ranks web pages with its Page Rank technology to give its user access to most important pages first.
– Google is not biased towards advertisers. It clearly separates advertisements and actual results by giving “Sponsored Links” tag to sponsored results when user searches to get information with some keyword. Moreover, it also ranks sponsored links to keep the most relevant sponsored links on the top.
– Google News quickly routes the user to the webpage and doesn’t linger for ad revenue.
WEAKNESSES
– Many spammers manipulate Google’ s ranking technology by creating dummy sites with thousands of links to pages that they wanted Google to rank highly.
– Google’ s contextual advertising was perceived by marketers to be less effective in generating sales because visitors to web pages showing editorial content were less likely than searchers to be ready to buy.
– Google‟s localized search algorithms too sometimes result in errors due to automated indexing.
– Google doesn’t have “sticky” like Yahoo! and MSN have which can attract users.
OPPORTUNITIES
– It can relive the trend like Yahoo! and MSN and become a mass market portal for users that will increase switching costs for its potential users.
– It can provide more services to the hand-held devices to capture more market that goes past the conventional internet.
– It can increase internet usage which will render the usage of google.com to be increased as well.
STRENGTHS
– Google has a simple interface and it gives comprehensive results without confusing its users.
– Google also weights the votes and ranks web pages with its Page Rank technology to give its user access to most important pages first.
– Google is not biased towards advertisers. It clearly separates advertisements and actual results by giving “Sponsored Links” tag to sponsored results when user searches to get information with some keyword. Moreover, it also ranks sponsored links to keep the most relevant sponsored links on the top.
– Google News quickly routes the user to the webpage and doesn’t linger for ad revenue.
WEAKNESSES
– Many spammers manipulate Google’ s ranking technology by creating dummy sites with thousands of links to pages that they wanted Google to rank highly.
– Google’ s contextual advertising was perceived by marketers to be less effective in generating sales because visitors to web pages showing editorial content were less likely than searchers to be ready to buy.
– Google‟s localized search algorithms too sometimes result in errors due to automated indexing.
– Google doesn’t have “sticky” like Yahoo! and MSN have which can attract users.
OPPORTUNITIES
– It can relive the trend like Yahoo! and MSN and become a mass market portal for users that will increase switching costs for its potential users.
– It can provide more services to the hand-held devices to capture more market that goes past the conventional internet.
– It can increase internet usage which will render the usage of google.com to be increased as well.
4. Competitive Analysis: WhatsApp
4. Competitive Analysis: WhatsApp
STRENGTHS:
– With an increase in telecom services, the app has had a cascading effect in terms of installations
– Ad-free service and hence higher customer satisfaction
– WhatsApp has a strong loyal customer base of over 1.5 billion users worldwide
– Available in all major smartphone platforms like iOS, Android, etc.
– Bug-free compared to its competitors (Works smoothly without any problems)
WEAKNESSES:
– The vulnerability of encryption, promotion of hatred, etc. have all been linked to WhatsApp
– the fear among users that data might get leaked due to cloud
OPPORTUNITIES:
– Increasing internet penetration especially in developing countries can be leveraged by WhatsApp
– Increasing smartphone users would help in keeping customers engaged
– Technological development & better services can help WhatsApp reach to a wider audience
– Ensuring better security & privacy of user data, and controlling viral outbursts can help improve its image
– New innovations in contemporary competitors
5. Competitive Analysis: Findings
5. Competitive Analysis: Findings
Even though these were done very quickly, this was enough to help make suggestions and propose new features and to my product manager, going forward:
– Eliminate as many bugs as possible, especially on the home page
– Work on developing more compelling brand guidelines for Microsoft News
– Simplify the interface. There’s way too much going on and it is to hard follow
– To engage a younger audience, consider adding content that emulates the content that’s found on BuzzFeed or dedicating a theme (i.e Millenial) to content that’s specifically for younger users like Entertainment, Lifestyle, Home
– Ease up on the advertisements, especially on the home page. It annoys users and creates a visual dissonance amongst the editorial content and the advertisements
6b. Whiteboarding & User Wireframes
I began wireframing design solutions, keeping in mind what I learned from the competitive analysis. At this point in time, I wasn't provided with the content or a particular cause to design the landing page with, so I produced lo-fi wireframes and focused on information architecture based on the business requirements that were given to me. Below are two of the wireframes I presented to my editors.
6a. Wireframes
I began wireframing design solutions, keeping in mind what I learned from the competitive analysis. At this point in time, I wasn't provided with the content or a particular cause to design the landing page with, so I produced lo-fi wireframes and focused on information architecture based on the business requirements that were given to me. Below are two of the wireframes I presented to my editors.
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Feedback
The editors liked the layout and information architecture but both felt that they wanted to see something more innovative. They also mentioned that the vertical scroll wasn't particularly conducive to a positive user experience given that the majority of MSN users are older and use desktop applications rather than mobile applications.
Feedback
The editors liked the layout and information architecture but both felt that they wanted to see something more innovative. They also mentioned that the vertical scroll wasn't particularly conducive to a positive user experience given that the majority of MSN users are older and use desktop applications rather than mobile applications.
6c. Mockups
After I was given feedback, I was also provided with content to display on the landing page, which provided me with more context and was helpful when making edits.
I focused on creating a horizontal layout that was more desktop-friendly and that had a more eye-catching design that the Editorial Team wanted.
6b. Mockups
After I was given feedback, I was also provided with content to display on the landing page, which provided me with more context and was helpful when making edits.
I focused on creating a horizontal layout that was more desktop-friendly and that had a more eye-catching design that the Editorial Team wanted.
6d. Prototypes
6c. Prototypes
6d. Prototypes
7. Outcomes
Takeaways
I was able to help the Microsoft News Editorial Team explore some design solutions to making the MSN Causes experience more engaging as well get the opportunity to work on a team where I was the only designer. While this was challenging, I learned to speak the language of both the Microsoft News Editorial and Design teams and became a liaison between the two.
7. Outcomes
I was able to help the Microsoft News Editorial Team explore some design solutions to making the MSN Causes experience more engaging as well get the opportunity to work on a team where I was the only designer. While this was challenging, I learned to speak the language of both the Microsoft News Editorial and Design teams and became a liaison between the two.
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Thanks for visiting
my portfolio!
Thanks for visiting
my portfolio!
Thanks for visiting
my portfolio!
Thanks for visiting
my portfolio!
Thanks for visiting
my portfolio!
Made with 💕 by me!
Made with 
by me!
Made with by me!
Made with by me!