Cisco Brand Exchange (2020)
Brand Exchange is Cisco’s internal asset management tool that’s similar to box or dropbox. As we know, these kind of utility sites can get pretty messy since they’re so heavy on functionalities as you can see below which was the current version. So how do you take a site this packed with content and turn it into a beautiful and functional website? This was the challenge my team and I were assigned to solve.
Problem statement
We conducted some preliminary interviews to find the main pain points of the current Brand Exchange.
Off-brand look and feel of the site seemed to hinder the trust of the user.
Site architecture made it tough for the users to navigate the site proficiently.
Missing responsiveness alienated users with smaller screen sizes.
Very bland look of the UI made users uninterested and showed low engagement.
The task at hand
Granted the site needed a lot of work, we wanted start from scratch. Beginning with research and a brand new site architecture that made sense to a normal user of the site.
Process
Competitor research
Prototype testing
Customer journey
Personas
Information architecture
Ultimate goal
Platform that was user-centric where users can navigate with ease, use visual cues where possible to help users along their journey. Ultimately, we wanted users to spend as less time as possible on the site so they can be off completing their projects at hand.
Site map
A careful and though-out structure of the site. Main menu split into 2 sections, left navigation (main menu), right navigation (versatile secondary menu). Facebook, dropbox, youtube are all great examples of this model and it’s been proven to work well.
First impressions
Home page featured a beautiful carousel image welcoming user to the site with a CTA, “Dive in” for a walkthrough of the new UI.
For users that were disoriented, we added a carousel that would take you straight to the folder structures where all the assets lived.
Feedback was important to us to make the platform even better. We wanted to hear what the users were saying so we added a third carousel image to contact us directly.
A webpage that responds
95% of users preferred to use a desktop to access Brand Exchange. For phase one, we built 2 breakpoints, large desktop and small desktop.
Easy to develop. Only the body section of the page would be responsive.
The left navigation will stay constant till the breakpoint at 1439px where it will collapse by default giving the middle section more space to view assets clearly.
Users with small desktop screens would now be able to use the site with ease.
Make it pop
The colors are categorized into layouts and text. The layout colors include buttons and shapes while the text colors are for titles and body paragraphs around the site.
Dark grays are used for texts to ensure maximum visibility and to pass the ADA compliancy for color contrast.
The blues will be used for buttons and links to add emphasis and show that they’re clickable assets.
Type with style
Being an entity of Cisco, it seemed appropriate to use Cisco Sans as the primary typeface for Brand Exchange.
Type set at smaller sizes to avoid crowding on a information heavy page.
When used correctly this will help show hierarchy of information on each page.
Button it up
There are 2 different types of buttons: primary and secondary. Primary buttons will be used for the main call to action button while secondary buttons will be used as a general button for items across the site.
4 different states of a button, disabled, inactive, hover, and active.
Not all buttons will have all 4 states as some do not apply.
Disabled buttons will be used for cases where they present no use. For example, when no assets are selected, the corresponding action buttons such as “Add to collection, Add to cart, and Download” will be disabled.
Iconography
Primarily outlined to keep the website look light and airy, making use of the negative space on the site.
There would be multiple icons living next to each other on the page so keeping them in the same hierarchy when not in use.
Icons sent to developers as SVG files to be added to the site.
Key features
Collapsible menu
Collapsed menu would create more space in the body of the page for users to view assets at a larger size.
Versatile right navigation
Secondary navigation condensed into one space. Users can easily see file information, announcements, view their cart, notifications, and their profile without leaving the body of the page where the assets live.
File information
Reorganized file information section into categories so users can quickly read and absorb the information.
Tutorial
Click through tutorial for first time users so we can speed up the learning curve of how to use the site. We also used this to calibrate the user before they land on the brand new UI improving the overall user experience.
The takeaway
Being able to build a product from start to finish was a great learning experience. A few things that I learned from this project was to be in constant communication with the developers. There were moments when the developers would get back to us and tell us that something that we had worked on was not feasible, making us go back and change the approach to a few enhancements and features. Involving developers in the research, low fidelity wireframes, and testing was key to a successful final product.
Another thing to keep in mind for a project this big was organization. We built out an entire system of type, colors, icons, prototypes and sometimes I would find myself scrambling in my folders to find these assets which had multiple versions. In the future, I’ll make sure to pay very close attention to my project files and organize them in a manner that was easy to find later on.
Brand Exchange Team
Along many other roles, my main role in this project was to design every single page of Brand Exchange on Adobe XD. Create prototypes for user testing and hand-off to the prototypes and assets to the developers. I was also in charge of working closely with the developers everyday to ensure everything was being implemented correctly.
Art Directors: Chris Ross, Lauren Marshall
Project Manager & Brand Exchange admin: Sarah Mateo
Developers lead: Anirban Maiti, Navina Mathew
