Visually Branding a Company CMS
Adding a modern light and dark theme to a newly created CMS. Implementing it using full Agile methidology.
Enterprise CMS Visual Design
Overview
I was tasked with taking over 100 complex low fidelity Balsamiq wireframes from the development team and transforming them into high fidelity branded sketch designs. During this project I not only managed a team of designers under me but I also managed agile interaction between the development team.
Platform
Desktop
Timeframe
7 months
Work I Completed
Visual Design, Q&A
Research
After researching the project goals, limitations and thought process of the development team and project manager. I also researched light and dark themes as that was of interest to the project manager running the project.
-
![Woman Taking Notes in Meeting]()
Initial Research
After being given the Balsamiq wireframes to visually design I reviewed them thoroughly in order to ask follow up questions. I Interviewing the Development team who created the CMS to do my best to understand their original project goals, limitations, and thought process behind the design shown in the balsamiq wireframes given to me. I also interviewed the project manager on the general idea of what they wanted visually.
-
![Design Style Guide]()
Synthesis
From the onboarding interviews with the development team I learned they wanted limited deviations as the back-end was already built. The project manager wanted it to be visually appealing enough to show at trade events and loved the idea of a light and dark theme. From there I started created light and dark theme component and text styles with appropriate contrast.
-
![Sketch App Design Compnents]()
Outcomes
Once I landed created WCAG compliant dark and light theme components and font styles to ensure design accessibility I presented them to the team. The project managers and Development team were thrilled with the visual direction so with that approval I began the visual design of the applications pages.
Balsamiq to High Fidelity Sketch Wireframes
Every week I visually designed several new sections for review. Once approved I designed the opposite theme.
Iterative Updates
If I noticed an issue in the design, I created the exact design requested and a potential solution design to discuss with the team.
Design and Development Management
Since the application needed was large and needed to be completed quickly for a particular trade show event I was tasked with being the senior UX designer with a team to assist with designs while I manage development feedback.
-
![Sketch Components being detached from symbol]()
Delegating and Reviewing Designs
For this project after the initial project visual design was developed I was given a team of 2 additional user interface designers to assist and manage. I delegated sections of the application updates to each team member and organized adequate review and update time for each team mate before I presented the designs to development.
-
![Abstract Comments on Design]()
Verifying Development Understanding
To verify understanding between development and design I engaged in quick chats with visual reference guides. Initial design questions came in Abstract. Jira was utilized for component and page flow questions that required visual guides. Microsoft teams was also always open for general questions between all team mates as well.
Final Concept
Created a sleek and professional WCAG, and apple store approved application with light and dark themes.
Testimonial
“The team did a good job of thinking though how to make the system simple but effective, We’ve already got a number of great clients on the platform with several more clients launching apps soon,”
— Stephen, Project Manager