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.
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 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.
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.
UI Development and Component Libraries
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.
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.
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.
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.
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