Role - Product Designer
Tools - Balsamiq, HTML/CSS
User Story
As a community group admin I need the ability to more easily added group specific branding to my group's page so that I can provide clear indication that users are browsing the community within my sub group and add more personality to my group's page.
The Problem
Due to the current HTML structure and functionality of the module community consultants were consistently receiving requests to either use custom JS or heavy amounts of CSS in order to layout and style the Group Display module. The Group Admin module provided some configurations to change elements within the Group Display module but not many.
The Solution
Reorganize and add new inputs tot he Group Admin module Details tab to facilitate more customization configurations for community group admins. Provide the ability to change background color or photo, create a tagline, and restructure the HTML DOM of the Group Display module to create a more stunning, modern look and feel.
Reorganized the Details tab form so more related content is grouped together. Included toggles to introduce new functionality without increasing initial clutter of the already busy form. Provided example of updated layout with new inline SVG icons.
A side by side comparison of the capabilities of the old Group Display module with the updated module with new configuration options in the Group Admin module.
Design Process
• Explore current implementation of Group Display within major community sites and speak with community consultants about the pain points both they and their clients run into when using the hand rolled solution.
• Explore potential functionality requirements and white board ideas with Product owner.
• Clean up white board sketches into lo-fi wireframes to show general user flow and expected functionality.
• Present potential workflow, functionality, and layout to stakeholders from development, client services, and sales. Discuss changes to functionality based off platform or logistic limitations or revised goals and needs from stakeholders.
• Revise and update lo-fi wireframes from design presentation feedback and submit mockups to ticket for backlog grooming.
Front End Process
• Research best practices for using inline SVG icons and how to make them accessible.
• Create box model as visual aid to help communicate to backend focused developers how to generate the front end DOM to facilitate the correct layout.
• Determine how much of the new UI pattern can be made from already built reusable components or which ones will need to be made from scratch.
• Create prototype of DOM structure. For all new elements provide accessibility attributes if needed, demonstrate usage of BEM class naming standards, include placeholders to signify what kind of info should be pulled from the database.
• Once the development team has built out the backend logic and tied it in to the generation of the appropriate DOM, provide base css styling for the new module to work and function at all screen sizes.
• Submit ticket for QA.