Image Rotator
Role - Product Designer
Tools - Balsamiq, HTML/CSS
The Problem
Our platform had no way to generate or maintain a image rotator/slideshow/carousel. The closest thing we had was a admin panel configuration that allowed admins to choose "featured content". This module was clunky, not easily stylable, and had limited ability in what could be displayed. Customers who wanted something more robust and modern had to turn to 3rd party code and custom implementations to achieve the desired affect. This required community consultant or community admins to upload images & custom javascript needed to the file directory in the admin panel; add a custom HTML module to the page they wish to use a slider; build out custom HTML to structure/style the UI and call the correct images/JS files for the rotator to work; and finally style the rotator in their community specific custom CSS. It was a very manual process that needed to be repeated for each and every community and ate into implementation and engagement hours for clients.
User Story
As a community admin I need the ability to quickly create and manage images to be displayed in an image rotator so that I can show more dynamic content without reverting to manually adding custom/3rd party code.
The Solution
Create new functionality to enable admins to create and manage multiple image rotators through a new admin panel CRUD UI interface. Users would then be able to place a Image Rotator module on any page and through the configuration options select which of the ones generated in the admin panel they wanted to show on that page.
New admin panel screen. Users are able to click the "+ Add Rotator" button to generate a new rotator.
Once a new rotator has been created users are able to edit the rotator's name, to make it more distinguishable, as well as add image slides or delete the rotator entirely.
After a community admin clicks the add slide icon they are presented with a modal to upload and configure they're new slide. Users are able to upload an image, set the slide's title, and give it a description. By updating the upload to drag & drop you increase the speed and ease at which users can upload their desired image.
Once a user has uploaded and configured slides for a rotator they are presented with a list layout that they are able to reorder to set the order in which slides will be displayed on the front end. Users are able to see the slide image, it's title, and description. Clicking the edit button presents returns the user to the modal shown in the previous wireframe.
Users are able to create multiple slides so that they can quickly change what content is shown in different parts of the community.
When a user places the Image Rotator module in a content through the Page Editor section they are presented with a standard module configuration modal. If a user has created a rotator they may select which one they want to display and whether they want to use a "wide" or "skinny" layout. Since we were updating and replacing the outdated Featured Content module we gave users the option to choose between a standard slider layout (wide, for larger column use) or the traditional featured content layout (skinny, for asides or small column use).
Example of the traditional Featured Content layout (skinny) being used on a page.
Example of updated layout (wide) being used on a page. Both layouts are able to be achieved with almost the exact same DOM with minimal CSS required to style either.
Final comp showing how we could better style the wide layout.
Design Process
• Begin by adapting (C)reat(R)ead(U)pdate(D)elete screen patterns used for previous functionality User Badges.
• 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
• 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.
• Adapt and expand previously generated HTML structure from User Badge functionality to be reused with Image Rotator CRUD UI.
• 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.
• Ensure that both skinny & wide layouts can be used to achieve different styling affects with almost the exact same DOM structure.
• 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.
