Servicenow - brand center
Agency: Media.Monks / Role: senior UX designer
—————————-
Creating a world class Digital Asset Management (DAM) system for the ServiceNow brand center where users can pull from approved brand assets to create sales funnels and landing pages from a companywide repository. The engagement also included points of education where users were shown when and how to use brand style elements to create uniformity between business initiatives.
discovery workshop sessions
To better understand the needs and expectations of both ServiceNow stake holders and users we conducted Design Workshops and interview sessions to get an understanding of the problems space we would be working in and to pull out user needs that the business may not have identified.
From these sessions we are able to map out not only key features that the product would need but also a level user journey’s that our team could start ideating and creating solutions from.
Each conversation and ideation session helped build a visual artifact to understand the needs, content and opportunities at each phase of our experience.
In order to get the correct information and insights from ServiceNow, we decided to have a total of 4 sessions with them where we worked together on different activities:
Platform & Goals Requirements to align on where priority needs from a business and user perspective
Empathy Maps to understand our personas better
Content Mapping: type of content and in which phase apply
Creative Session to start landing the creative concept
Scenario Mapping where we co-created a user journey to identify user needs and potential opportunities
At the end of the workshop, we achieved a really complete Platform Map where we had a better understanding and definition of every single phase.
Sitemap and work flow
After we had loosely mapped out what the business and users would need in our workshop sessions we conducted sorting exercises internally to come up with our MVP site map to work towards in our production schedule. Throughout the project the client would come back with updates or asks to enhance the MVP sitemap that we created.
Our initial sitemap, green dots identify must haves and ghosted boxes are enhancements to be made post MVP
Final sitemap created in collaboration with the client
Once we had our sitemap defined, the UX team started to create content maps for each page and experience so that we could effectively create functional low fidelity wireframes that accomplished the goal of each page that could include moments that ‘wow-ed’ users by incorporating enhanced learning moments.
First time entry - “who we are” experience
One of the biggest asks from the client as well as the predominant thing that was taken away from our workshop sessions was that there was a lack of understanding of who or what ServiceNow offered in the space. Our team was tasked to create an experience that educated and delighted the user on first entry or visit to the site that had either video content to explain or interactive and parallax content to inform.
The UX team started this experience design from content map to low fidelity wireframes for the UI team to then bring to life with the brand assets and style guides.
Low Fidelity wireframe to explore possibilities and content structure of the entry experience
High Fidelity exploration of the entry experience
Once the user experienced the entry content they would land on the homepage. There would be no other instance that they would experience the entry content unless they were using a new device or were connecting to the site via another router or Geo IP
Homepage design following the first entry experience
Journey schematics and workflow
As the UX team worked through the content maps per page and started to make them into low fidelity wireframes we were able to map which components would link to the other pages.
This allowed the UI team to work concurrently on the high fidelity wireframes while the UX team worked through usability and content structuring.
After each low fidelity wireframe was made the UX team would bring the page to the ServiceNow stakeholders for content and function approval.
Once the UX team was given the green light we would structure our sprint cadence so that UX worked a sprint ahead of UI and would hand over the low fidelity wires for the UI team to flesh out for style approval from the client.
In total there would be 18 guidelines pages created out of the 30 total unique pages created for the Brand Center.
Snapshot of the guidelines pages created
Digital Asset Management (DAM) System
Outside of the guidelines pages created for users to effectively follow brand styling agnostic of the internal design team, ServiceNow needed to equip it’s users with a repository of approved assets ranging from image and video content to Zoom backgrounds and typography resources.
The user should be able to easily search for and download either individual resources or batch download. The user can review asset specifications and create a sort of shopping cart where they can park selected assets and review prior to final download. This “cart” can also be shared to other users for review if they are collaborating on a project together.
When the user lands on the DAM they can either search by keyword or browse through pre-categorized sections
The user has multiple options upon landing on the DAM. They can search through recategorized sections with highlighted and tagged assets either tagged by popularity or newness.
The user can also toggle between card view or list view with no loss of asset information, just a reduced visual preview of the asset.
Card and list views that the user can toggle between
If the user clicks on one of the assets (not selecting the ‘quick download’ or ‘add to folder’ CTAs a preview modal opens which includes a visual preview as well as the specs of the asset being previewed.
The modal supports all image files, .svg, pdf, ppt, mov and mp4 files, as well as font files. The preview function of the modal changes based off of which file type was selected. Images can also be edited and cropped to pre selected display ratios.
Sample of preview modals including crop function
Once the user has added the assets they want to their checkout/downloads folder they are able to review what was selected and remove it if it is no longer needed and continue back to the DAM to continue their search if they missed any assets they may need. They are also able to share to folder to other members of their team to view and edit prior to downloading.
Individual assets can be downloaded or all selected can be downloaded as a batch. Folders can be saved for later or cleared completely, but the user will be met with a prompt to avoid accidental deletion of the compiled assets.
Folder review screen and deletion prompt
After multiple feedback rounds and user testing sessions the team landed on an execution that added the functionality of a persistent downloads bar that is sticky to the bottom of the screen where the user is able to see the amount of assets selected and what the total download capacity will be prior to reviewing the folder in it’s entirety.
High Fidelity mock up with the sticky downloads bar
Image asset preview and edit function
The team went through multiple iterations and explorations of the DAM itself to ensure that all the features proposed and onboarded functioned properly and were understood by users. To make sure that they were, the UX team conducted AB testing between concepts and presented happy path scenarios for the users to attempt to solve via user testing on interactive prototypes.
The photo’s below demonstrate the various changes from low fidelity UX to the final UI wireframes that were delivered.
DAM Landing
Asset search (grid view)
Asset search (list view)
Asset added to folder
Download folder