Collections

A lightweight experience that helps users easily collect from the web and organize their content.

Timeline

May 2020 - July 2020

My Role

Visual Designer

UI Designer

Tools

Figma, Photoshop

PowerPoint

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.

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

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

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

FRE (First-run experience) exploration A

FRE (First-run experience) exploration B

Exploration

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)

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

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.

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

Co-workers add more collected cards to the shared collection.

Ken wants to do more research, he closes the right screen by swiping the middle divider to the right.

Ken switches to another tab, He finds a good game to play with co-workers at virtual happy hour.

Ken drags current tab from the tab bar, the mini view of Collections panel appears on the right side of the screen automatically.

The dragged tab turns into an entity card as it crosses over the line of Collections panel.

There are plenty of ideas in Ken's Collections now. It's time for virtual happy hour!

Design

Takeaways & Next Step

By closely collaborating with motion designers in the team through the project, I gained a deep understanding of how they are positioned in the team and how motion graphics can give an immersive experience of a product. Adding motion arts and animations is a fun way to keep users engage and create a delightful moment. I am determined to learn more about motion design and animations in my future study.

The next step of the project include:

  • Exploring adding micro-interactions such as making the Collections icon animate when users collect something, enabling users to flip collected cards and see the backside, etc.

  • Suggesting fun titles as placeholder text to new Collections

  • Gamification

  • Collections change over time (based on themes, time of day)

  • Usability testing of current design

CONTACT ME

xuyiyun0126@gmail.com

Tel: 425-591-2560

If you want to collaborate on crafting amazing experience for people, get in touch!

I am available for contract, full-time and part-time employment.

Feel free to connect me on LinkedIn or shoot me an email. I am always happy to chat.

  • LinkedIn
  • Facebook
  • Instagram