Project Overview
Microsoft Sway is a Microsoft Office product that allows users to create and share interactive reports, presentations, and more with the help of AI. Users utilize an authoring space where text, images, and interactive elements are inserted as cards.
Sway takes those cards and outputs an automatically-designed presentation based on the user's content.
During a contract role as a visual designer on the team, I was asked to explore options to optimize the UX of the authoring page .
Timeline: March–April 2017
My Role: Visual Design, UX Design
Tools Used: Sketch, Adobe Photoshop, Adobe Illustrator
Team: Visual designer (me), product designer, creative director
The Challenge
Within the Sway authoring space, users can group cards to keep content together. This is visualized by using containers with three varying shades of gray.
This created a visual communication gap for users as they are now required to interpret what the shades of gray mean within the authoring space.
The project also introduced another challenge: I had to design within the existing visual design language of the app. Solutions I came up with needed to be easy for developers to
ASSESSMENT
The coloring system was intended to show a nesting hierarchy of content – the lightest shade being the parent, a darker gray being a child, and the darkest gray as the final level.
As users add cards into either sections or groups, users ran the risk of flooding their window with a single colored group container, providing them little context of what items belonged to parent cards, or where they were in their presentations
Additionally, with the shades of gray being similar, it may be challenging for some users to determine the subtle differences between the shades.
GOAL
Using the current card structure of the Sway authoring experience, develop a solution that give users a better understanding of what a group and section are.
Process
Initially, I created a few dozen different visualizations for groups in the authoring experience. As I started playing with the product, I too felt like I needed more context. Given that users have a maximum of three to four cards on a given screen, I thought about how we could provide that context visually without dramatically altering the product.
I was inspired by global navigations that followed you as you explored long pages of content.
Solution
I proposed adding indicator bars as users scrolled past content cards to show users how their content related to each other within the authoring space. These indicator bars have a drop shadow, helping communicate to users how content is nested within parent sections.
Given the shades of gray were so similar between each level, I felt adding this drop shadow helped make the delineation between the shades more clear.
Reflection
Next STEPS
Unfortunately by the time this project finished, my contract ended and wasn't able to gather results of my work or explore further. If I had more time I would have considered...Research: I would have liked to survey or interview employees to get an initial idea of how much of a problem this was or to better understand what other challenges users had when using the Sway authoring space. I would have also liked to utilize resources like the Sway feedback reports to see what trends existed and create a prioritization grid for future projects.
Testing: Gathering user data to either validate or invalidate my design would be nice to see if what I created was a step in the right direction towards solving the user problem.
Speak to the Devs: Understanding the technical restrictions would have been great to inform my design process. This would have allowed me to narrow down the scope of what kind of solutions could be designed to address the needs of the user and to be able to communicate that to my team. This may have saved time and resources if what I created wasn't feasible within the technical limitations.