Company:

Microsoft




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 mockups into interactive prototypes.

Card image cap

Functional

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

Card image cap

Adaptable

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

Card image cap

Accessible

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 we faced was editing from a UI development level. The tool certainly didn't lack features. However, there wasn't a clear path to access those important features. 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, and how quickly will they do it?"

I led and facilitated between teams to try and address issues with usability/accessibility and develop cohesive and consistent UX and UI patterns.

UX/UI Design and Prototyping

XBOX UI Development

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/JavaScript that took designs to the next level and could be easily incorporated by developers on the team.

Accessibility

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 [WEBAIM.org]



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.

Responsive

Company:

POSSIBLE

Client: Microsoft



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


I was part of a team that designed the web sites for XBOX and HoloLens and created design treatments for the then-upcoming Microsoft Azure.

UI Design and the Microsoft Web Framework.

Ideation and Prototyping

Ideation and Prototyping

Utilizing MWF standards, I designed redlines and wireframes that were later implemented into Microsoft e-commerce web store fronts.

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.

Responsive

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