CenturyLink offers an incredibly powerful and valuable cloud platform for enterprise customers, but finds themselves lost in complexity and confusion. How might we create a cloud ecosystem that speaks directly to developers and business leaders with clarity, focus, flexibility, and humanity? By breaking down the digital ecosystem into individual components, I'm working with a team of strategists, developers, and designers to craft, test, and refine an experience that best articulates and demonstrates the power and value of CenturyLink Cloud.
1 Reorganize CenturyLink Cloud's system of products in a clear, quick, and direct way
2 Improve the navigation by creating a simple, intuitive, and effortless experience
3 Improve the individual page systems for stronger consistency and flexibility
• Collaborated with Content Strategist to break down and assess the current ecosystem
• Leading the experiencing mapping process–content structure, user flows, IA, and wireframes
• Building low-fidelity code prototypes to articulate design intentions
• Defining and articulating UX guidelines to directors and stakeholders
• Working with engineers to ensure quality implementation of visual design and interactions
• Writing usability testing scripts and facilitating qual and quant testing sessions
• Leading the creation of the visual design system
Designed at WINTR
In order to better understand the problem and empathize with the people using this experience, I set out to conduct interviews with CenturyLink Cloud customers, stakeholders, and other subject matter experts. I also created an in-depth competitive analysis and analyzed the current platform by doing an audit of how the system currently worked.
After synthesizing this research, it was important to define guidelines for the experience to maintain focus and priority as we continually improve the experience. The guidelines were focused specifically for the people who use this experience. For business leaders–who are looking to experience the platform from a broad view, and for ITDMS and developers–who are looking to quickly dig into the details.
Embarking on a journey to humanize and organize CenturyLink Cloud's system of products, we noticed through our research and observations that there was no existing 'Product Overview' page to help ease business leaders and developers into the content. Establishing the UX guidelines upfront helped us to create and articulate the need for an overview page, giving people control to first scan broadly at the system of products, and then dig into the details when ready.
Category squares show a mix of words and illustrations to differentiate the various product categories. Upon hover, the category card reveals a hint at some of the product details–giving users a preview of the details they will see if they click into the square. The arrow at the top right corner of the square gives the affordance to the user that more information will pop out from the page. Upon click, business leaders and developers can fully see all the products identified, with more products to explore further. They can also easily exit this view by either clicking the 'X' or by clicking anywhere on the page. This interaction was designed in order to create a simple, immersive experience of the product details–without directing people to an entirely different page.
Moving forward on our journey to humanize and organize CenturyLink Cloud's content and visual system, it was time to rethink the navigation. I set out to create an organized, flexible system that would perform well on multiple devices, for multiple types of people–from business leaders to developers. In order to understand if the navigation performed well, I created various navigation options that we tested in-person, with multiple people, on multiple devices. This allowed us to actually observe how they used the navigation, and then iterate on the design quickly and intentionally.
Navigation was designed to be simple, intuitive, and scalable. It was key to pace users through the various layers of information to ensure a smooth and understandable wayfinding system. Certain categories show descriptions upon hover, harkening back to the UX guidelines by providing previews when dense tasks or information is displayed. The panel interaction of layers gives business leaders and developers freedom to drill down and across to navigate through the content, making it easy to navigate in and out of the system. The dark overlay offers better focus and creates a sovereign posture that enables developers to dig into details. This design also makes it easy for CenturyLink to scale and flex their content as the cloud ecosystem evolves.
Upon clicking into search, an overlay appears, providing focus for a direct search. To guide developers through all the various entries they could search for, suggestions appear as they begin to type a word. Developers can begin their search through two ways: 1) by clicking on 'Search' at the top header, or 2) through a keyboard accelerator where users can immediately type into the page which will begin their search–an action that fits the behaviors of developers who use keyboards as their primary method of navigating through software.
Our challenge was to create the design and content structure for the product page system in a way that:
1 Brings clarity and focus for business leaders and developers
2 Guides the CenturyLink Cloud team as they create new content and products
3 Works across multiple screen sizes and devices
For the redesign of the individual page systems for CenturyLink Cloud's Products and Solutions sections, I led the team through an affinity diagram exercise. This exercise is a culmination of patterns and observations gathered from quantitative behavioral data, surveys from stakeholders, competitive audits, and a breakdown of the current page structure. This synthesis is bringing insights to the foreground, helping us define and articulate design recommendations. These specific recommendations are guiding us forward as we redesign a system that harkens back to the UX guidelines–better clarity, focus, flexibility, and humanity.
Through the process of prototyping and iterating, I'm working closely with the CenturyLink Cloud team to understand the goals of the page in order to build a consistent, yet flexible system. Specific guidelines are shown as annotations on the page, offering tone of voice and interaction guidelines for future content creation.
I'm setting out to use various design and interaction cues to help break up the dense content through imagery, previews, diverse layouts, and subtle interactions. These cues include: dynamic placement patterns, bold colors, using scale and space for stronger focus of content, and clickable boxes that provide previews before digging into the details. A fixed sub nav is also shown to enable business leaders and developers to go directly to the section that is most relevant to them.