CCC FACILITY MAP
The CCC organization needed to update an interactive map that is used for booking rooms in the facility.
This project contains content that cannot be disclosed and have been modified for this portfolio.
PROJECT
Remove unnecessary lines
Improve functionality of hover, select, and deselect, through visual design
Highlight the stage
Enhance visual design, particularly through use of color
Goal:
Enhance the visual appeal and function of the illustration by removing any unnecessary lines, highlighting the stage, and increasing accessibility through use of color.
Challenge:
Intuitive way to display interactive steps within the map.
Accessibility - unavailable rooms were intentionally inaccessible since they can’t be interacted with.
Align with Azure branding so the map is part of the cohesive Azure story
This design process was created by Azure PIE visual designer, Jacob. We followed this process as we worked together to develop a new approach for visual design on the Azure PIE team.
KEY WORDS
Accessible
Bold
Technology
Bright
Clean/crisp
INSPIRATION
Visual Design
Exploring interactive themes that are visually intriguing and have potential to align with the brand aesthetic.
Theme: abstract technology
UX
Feedback
The project manager had suggested that we explore both a light and dark version of the map.
Aligning with the Brand:
Throughout the design process, I met with our lead visual designer to make sure the design was in sync with the Azure brand as it was being developed. After I selected colors for the map, we decided the version with a dark background aligns with the brand aesthetic best.
PATTERN
Visuals made with Adobe Illustrator to enhance the visual appeal of the map.
BEFORE & AFTER
Please note: the before and after designs have been modified due to content that cannot be disclosed.
Design: my goal for the redesigned color palette was to improve accessibility and visual interest. I used minimal gradients and visual effects, such as a glow on selected, to enhance the experience by adding dimension and an intriguing look. I then simplified the color palette to two similar colors, for the purpose emphasizing the selected & hover commands, as well as the stage.
ACCESSIBILITY & FEEDBACK
My intention was for unavailable rooms to be inaccessible, since they can’t be interacted with, and to draw attention to necessary information. Examples of this are in my “UX inspiration” section above, which I sought out UX designers to review.
Some valuable feedback I received was the unavailable rooms should still be accessible. I presented this design in a design review consisting of UX researchers, UX designers, and UI designers, for feedback, and we decided it was not necessary for the unavailable rooms to be accessible.
