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.
Determined functionality of software features while adhering to UX design best practices.
Designed adaptable and responsive UI that can be used across multiple platforms including mobile.
Using W3C standards, I developed and designed UI components that met W3C accessibility requirements.
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.
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.
UI Development and Component Libraries
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 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.
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.
Utilizing MWF standards, I designed redlines and wireframes that were later implemented into Microsoft e-commerce web store fronts.
I designed web applications using assets and libraries provided in the Microsoft Web Framework that were used for XBOX Live and Hololens site redevelopment.
Designs, mock ups, and redlines were developed using Adobe Creative Suite, Sketch, and InVision, then translated into vivid interactive web apps.
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
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