Project Summary
The purpose of this project was to redesign the user experience and user interface of an existing CMS for Mastercard's Priceless Specials website. Furthermore, we wanted to introduce data fields from another source, a newly designed webapp within the same ecosystem.
My Role
Interaction Design
Visual Design
Information Architecture
The team
Designers
Software Engineers
Project Manager
Timeframe
1 Month (2020)
The Problem
The existing CMS had poor navigational structure and organisation of content, which prompted a redesign.
The Solution
I conducted site audits for both platforms to gather the available data points that could be managed. This was then used to design a new sitemap with more meaningful groups for the different pages. This was followed up by wireframing and high fidelity mockups.
The Process
Site Audit
In order to begin any reorganisation of the navigational structure, I had to find out the customizable data points from both the existing CMS and the incoming webapp.
This was made more complicated by the fact that a substantial amount of data and content in the webapp was being pulled from Priceless Specials, the site which this CMS was built for. I had to account for this by taking note of any duplicates in the audit.
Sitemap
Reorganising the sitemap was a key step in improving the navigation experience for users. The existing CMS had 15 primary navigation items and no secondary and tertiary items. This flat structure made it difficult for users to navigate to the page in mind.
I designed the new sitemap by grouping the content by its content type and by it's source - the webapp or the Priceless Specials website. Groups were formed for each page, and as a result primary navigation items were reduced to 8, which should help smoothen navigation.
Design
Dark Mode
We used a dark theme for the CMS's redesign. As CMS's are content and data heavy, a lower contrast, easier to read dark mode should help in reducing eye strain.
Simplified Tables
The present CMS shows almost all details about the entry.
Less relevant table columns were removed and grouped together in a details sidebar - only shown when an item in the table is selected.
Displaying only essential columns should ease the user's browsing experience.
