Night Owl Mode for Microsoft Edge

Emotional Design | Digital Health | Night Time Specially

cover page.png

Background

Gen Z (born 1997–2012) is the largest generation, comprising 32% of the global population by 2019. In the U.S., they wield $44 billion in direct spending and influence $600 billion annually. With 98% of Gen Z (16+) owning smartphones, mobile is central to their lives. Businesses must prioritize mobile strategies to engage this digitally native and increasingly influential demographic.

Design goal

Design open and inclusive mobile browsing experience that Gen Z trust across work, home and school.

My role

This design sprint, initiated at Microsoft, was completed over four weeks during our spare time. Collaborating with three talented designers, I actively contributed to brainstorming sessions, user research, and concept development. My key responsibilities included crafting the initial storyboard, designing prototypes, and conducting 4 of the 15 user tests.

Highlights

videoim 1.gif
videoim 2.gif
videoim 3.gif
videoim 4.gif
videoim 5.gif
videoim 6.gif
videoim 7.gif

Understanding user needs

We conducted 6 in-person interviews (1 hour/session) to get insights into the user needs, behavioral pattern, their daily routine, device usage and the perception of the internet.
🔷 Age 18-23.
🔷 Mixed of male and female.
🔷 Mixed of Android and iOS users.
🔷 Mixed of different browser users.

user survey.png

Insight

  • Want to have a healthy and adequate sleep time, but at the same time can't help staying up late.

  • Like to read articles or watch videos that they’re interested in before going to bed.

  • Feel lonely in daily life, especially at midnight.

Initial concepts & User testing

Initial concepts

Based on the result of research, we brainstormed and summed up 30 challenges that the target users may encounter in their daily life, and invited 16 designers to vote. Finally, we selected the three opportunities with the most votes.

  • Usually feel lonely and want to keep a pet, but cannot keep it due to economic conditions or small living space.

  • Want to read articles or watch videos I am interested in online, but don’t know how to find them.

  • Stay up late and live an unhealthy lifestyle.

How might we?

Storyboard

Storyboard.png

User Test

After completing the paper & low-fidelity prototyping, we had a test with 12 users. The feedback is after the picture.

Sketch.jpg

User feedback

  • The entrance of the night mode can be designed into a "second-floor" style, which will be more attractive and more conspicuous on the homepage.

  • The content on the Feeds page should not be mixed together, but be grouped into different categories. At the same time, a waterfall layout can be adopted, which can attract users to swipe down to view more content.

  • Adding more emotional elements to the page just like making the cat appear in more places.

  • Users can set the sleep time by themselves. When the sleep time is reached, a reminder will appear on the page.

Product team feedback

The Night Owl Mode for Edge designed by our team got the most votes in this design sprint (there’re 5 teams in total), which is selected for further in-depth design and added into the development plans.

Feedback.jpg
Page.png

🎓 What I learned

  • Collaborate and Learn: Working with other designers is an opportunity to both contribute and grow. Beyond applying my strengths, I gained new skills and methods—like creating GIFs in Figma during this design sprint.

  • Prioritize Communication: Effective communication deepens understanding. User interviews are a rare and valuable chance for designers to directly uncover needs and pain points, which are often filtered through product managers or UX researchers.

  • Document the Process: Always take photos during the project. They’re invaluable for documenting the process, clarifying design ideas, and revisiting key insights later. :)