Microsoft Sway Groups UX/UI

User Experience, User Interface, Visual Design

Overview
Microsoft Sway is a Microsoft Office product that allows users to create and share interactive reports, presentations, personal stories, and more. Users utilize an authoring space where text, images, and interactive elements are inserted as cards. Sway takes the cards the user inserts and outputs a designed story based on the user's intent.

Proposed UI solution of adding bars to label group hierarchy as users navigate through the authoring pane.

Challenge
Within the Sway authoring space, users can group cards to keep content together in the consumption mode. This is visualized by using containers with varying shades of gray up to three. This creates a visual communication gap for users as they are now required to interpret what the shades of gray mean within the authoring space.

The current Sway organization structure: Containers filled with shades of gray to depict sections, groups, and subgroups.

This coloring system poses certain issues in the current product. Users have a limited window of their active authoring space. As users add cards into either sections or groups, users run the risk of flooding their window with a colored group container, leaving little context to to their place in the authoring experience. 

The current Sway product does not provide an easy to understand visual language for groups and sections. The product does not give users any cues to what the colors mean in the visible authoring space of the product unless users make active decisions to create groups or sub-groups. 
Goal
Using the current card structure of the Sway authoring experience, develop a solution that give users a better understanding of groups and sections.
Task
I was asked to develop visualizations to develop better ways to organize groups within the Sway web product.
Actions
Initially, I created a few dozen different visualizations for groups in the authoring experience. As I started playing with the product, I felt like I needed more context. Again, users have a maximum of three to four cards on a given screen. The more I thought about this, the more ventured toward user interface considerations that could be added to enhance the experience. 
I began thinking about ways to better inform users as they scrolled through the authoring pane. 
I drew inspiration from website menus and mobile websites for this bar that would follow you as you navigated past the group container title.
Back to Top