Skip to main content




Developing component libraries and introducing accessibility features to an enterprise-level Content Management System.

As part of a team tasked with scaffolding the UI for an enterprise-level CMS from the ground up, I undertook an ambitious project that redefined how people at Microsoft published web sites and e-commerce pages intended for Microsoft customers.

Translating vivid designs into interactive prototypes.

Card image cap


Determined functionality of software features while adhering to UX design best practices.

Card image cap


Designed adaptable and responsive UI that can be used across multiple platforms including mobile.

Card image cap


Using W3C standards, I developed and designed UI components that met W3C accessibility requirements.

UX Challenges

Designing a complex application using research and UX methodologies

Decreasing cognitive load on a complex application

Tackling a complex CMS may seem daunting, but our team was able to address usability concerns and cut down on the application's complexity by at least 50%.

One of the biggest challenges I faced was taking the ambitious amount of features the tool already had and editing that down from a UX Design/UI development level. The tool certainly didn't lack features. However, there wasn't a clear path to access those important features and there needed to be a heirarchy of features that are in order of importance pertaining to navigation and functionality. By addressing bugs, usability concerns, and human-computer interaction challenges, the team was better prepared for launch.

During user testing, I gathered useful knowledge about a wide range of users and came up with creative ways to solve their UX concerns. For example, one user had issues with fine motor skills and muscle spasms. In order to make it easier to click an item on the page using a mouse, I made the select area larger and easier to click, as well as adding selections to a tab order for easier navigation.

Ideation, sketches, and user testing

During ideation phases, I designed mock ups and wireframes using tools like Sketch and Adobe XD. I would develop those designs into interactive prototypes that were clickable web apps. Prototypes were developed using HTML, CSS, JavaScript, and jQuery, then commited to the team Git repository.

Whiteboarding ideation was common practice on our team. We tried to get into the mind of the user and how they would navigate the app without frustration or cognitive overload. "How will the user get from point A to point B?" "What does the user select on the page first?" "What does the user prefer visually when it comes to data input, minimalist layouts or more robust designs?"

I led and facilitated between designers, developers, and project managers to try and address issues with usability/accessibility and develop cohesive and consistent UX and UI patterns. I presented my observations and UI components/pattern library to stakeholders and project managers and inspired interest in Accessibility and brought up its importance in good software.

UX/UI Design and Prototyping

Haylee Nighbert

UI Development and Component Libraries

Utilizing mockups, redlines, and sketches, I built interactive prototypes and component libraries for a Microsoft Content Management System using HTML5, CSS3, Bootstrap, JavaScript, jQuery, and React.js that took designs to the next level and could be easily incorporated by developers on the team.

Along with prototyping the UI for the application and creating consistent pattern libraries, I facilitated between designers and developers to translate design mock ups into feasible web applications and assess any possible challenges along the way.

Prototypes and high-fidelity wireframes were utilized during A/B testing and user research.


Inclusive and Human-Centered Focus

Why is accessibility important in software?

Beyond point-and-click usability, accessibility ensures users of any ability can have a good user experience and an easy way to access necessary information with tools like tab order and screen readers.

As an internal-facing tool, the Microsoft authoring tool/CMS had to be fully accessible and fully inclusive. Users of the product like Designers, project managers, and other teams need to use the product regardless of ability. That is why it is important to follow W3C accessibility standards across every aspect of the application.

Learn more []

Accessibility and User Experience

Accessibility principles provide ways for potential users, regardless of ability, to navigate software with ease and still have a good user experience. Empathizing with the user is vital to good software.

Using screen readers and specific code snippets, software can become even more alive and tangible for all users.

Accessibility is extremely important for good software. Best practices should be implemented throughout the design process.




Client: Microsoft

Developing UI and creating mockups, redlines, and prototypes for XBOX, HoloLens, and Microsoft Azure.

As Product Designer, my role was to facilitate between designers and developers to create web designs for e-commerce sites like XBOX, Hololens, and other Microsoft product store fronts. I was tasked with creating mock ups and prototypes using Microsoft design assets and layout parameters that were later implemented into Microsoft e-commerce store fronts.

UI Design and the Microsoft Web Framework.

Ideation and Prototyping

Ideation and Prototyping

Using MWF (Microsoft Web Framework) design standards, I designed redlines and wireframes that were later implemented into Microsoft e-commerce web store fronts and used for prototyping.

Component Libraries

Component Libraries

I designed web applications using assets and libraries provided in the Microsoft Web Framework that were used for XBOX Live and Hololens site redevelopment.

UI Design

UI Design

Designs, mock ups, and redlines were developed using Adobe Creative Suite, Sketch, and InVision, then translated into vivid interactive web apps.


UX/UI Design & Application Development

Foxtrot Foodies


Cooking-themed blog design with simple UX. Inspired by Bon Appétit and other foodie blogs. Designed and developed using Jekyll and Ruby. Users can search for recipes by post, categories, and tags and the blog can support multiple profiles/authors. All photos taken by me.

Jekyll Sass Ruby Photoshop

Penny Post

Penny Post is an app that uses photos from Facebook and Instagram to create unique postcards to send to friends. I was part of a team that developed the front-end of the application and I assisted in UX and design decisions for the home page UI.

Bootstrap CSS3 HTML5 node.js

Space Cats

Space Cats is a Virtual Reality experience set in a space station at zero-gravity. It was developed using the Unity3D engine for the HTC Vive during a Women In VR Hackathon at University of Washington.

Unity3D C# HTC Vive VR/AR

Rare Colors


Rare Colors is a UX color story and responsive web design featuring some of the rarest pigments found in the natural world. Using those pigments as samples, I created a bold web design color palette for site themes and gave in-depth history of the pigments.

Sketch Photoshop Materialize HTML5 CSS3 jQuery

Back to home