Collections

A lightweight experience that helps users easily collect from the web and organize their content.
animat-calendar-color.gif

Timeline

May 2020 - July 2020

animat-diamond-color.gif

My Role

Visual Designer

UI Designer

animat-designsoftware-color.gif

Tools

Figma, Photoshop

PowerPoint

animat-lightbulb-color.gif

Skills

Graphic design, Prototyping

Overview

Microsoft Collections is a lightweight experience that helps users easily collect from the web and organize their content. I worked on Collections for almost a year from November 2019 to September 2020 covering a lot of topics such as improving the usability of organizing Collections, creating Collection cards with different entities, premium publishers in Collections, etc. This Collections Design Sprint is, however, mainly focus on the future envision of Collections.

Right now Collections feel very utility, focused and enterprise.

Group 41901.png
Template1.png
Template.png

Can we make this become the more flexible visual system to a wider range from consumer to enterprise?

The project goal is to engage users with expressive and rich content experiences that deliver a sense of delight and unique identity to Collections. I added in custom illustrations and the use of 3D artwork across different areas of collections when contextually appropriate. With richer micro-interactions, I wanted to provide users with a truly interactive experience that guides users through the experience and celebrates key moments in the user journey. Lastly, I pushed the visual direction of the UI itself, evolving how entities appear inside a collection, exploring and incorporating latest trends on the web and pulling from the Microsoft design direction deck.

Design Goal

Make Collections more Appealing and Engaging.

Let Collections stand out as a delightful feature

Invite users to engage with their Collections more through expressive interactions and richer content experiences

Underline Collections core value through emotive design elements

Expressive

Goals
Personality, Rich, Human
Style
3D, Color, Airy
Deliverables
Branding, First-Run Experience (FRE), Illustration

Visual

Goals
Dynamic
Style
Embrace Imagery, Colors
Deliverables
Cards, Views

Delight

Goals
Unexpected, Humor, Personalized
Deliverables
Customization, Microinteractions

Direction

Concept 01

Layering / Pushing the Boundaries

Illustrated UI elements coming together and extending out of the frame as a metaphor for the dynamic drag and drop of the collections window.

Moodboard

Moodboard1.png

FRE (First-run experience) exploration A

FRE (First-run experience) exploration B

Concept 02

Abstract Metaphor

Various interpretations and angles on collections - in type, shapes and patterns.

Moodboard

Moodboard2.png
Moodboard2.png

FRE (First-run experience) exploration A

FRE (First-run experience) exploration B

Concept 03

Curated Compositions

‘Real’ 3D compositions that explore the nature of collecting and curating in material, shapes, texture, color and light.

Moodboard

Moodboard2 (2).png

FRE (First-run experience) exploration A

FRE (First-run experience) exploration B

Exploration

Group 628494.png
Personality (5).png
Personality (6).png
Personality.png
Personality.png
Dynamic.png
Dynamic-1.png
Personality-1.png
FRE2 (1).png
Personality-2.png
Group 628212.png
FRE2.png
FRE2-1.png

Storyboard

Ken opens Edge (desktop)


Ken’s doing event planning with co-workers. Since Covid-19, he and his coworkers haven’t met in person for a half year.

Ken gets inspired by other collections:

- from exploring collection feed (public) from other people
- from other platforms (Linkedin)

Group 630839 (1).png

As Ken clicks on the “+” button, the flyout opens with a list of collections to add this card to.

Group 630840.png

Ken clicks on "Add to new collection".


Collection pane opens, Browser resizes into 2 half sizes, Splash animation starts inside the collection screen.

After adding the first item in the collection, there is a celebrating moment in the pane.

Collected card is now inside Ken's collection and Ken shares this collection to his co-workers.

Group 630843.png
Group 630841.png
Group 630842.png

Co-workers like the collection Ken just shared. They react to the collection with stickers.