BRANDING & WEB DESIGN
Citi Private Bank, “the global bank – an institution connecting millions of people across hundreds of countries and cities,” came to our digital team requesting a new front-facing webpage, and a basic brand guidelines book.
INTRODUCTION
Citi Private Bank, is separate bank sector of Citi Bank that only provides services to wealthy individuals, including the world’s most successful entrepreneurs, investors, family offices, and lawyers/law firms. They pride themselves on “helping the world’s wealthiest individuals and families to protect and grow” their wealth, assets, investments, and financial planning.
While working as a media/UI designer at Cumulus Media, Citi Private Bank approached our digital marketing team for a proposal for a new home page for their current website.
DESIGN TEAM
The digital design team consisted of myself, another designer, and the design director. Together, we worked through expedited UI design process for Citi Bank Private Bank.
My main role as one of the UI designers was to work through the entire user experience of the radio listener. I helped idealize the campaign concept, work through user research, and create mockups of the design.
RESEARCH
“TRYING” TO UNDERSTAND THE USER
Our first goal was to understand Citi Private Bank’s (CPB) customers and target audience.
While the user base was well defined in CPS’s exclusive audience, interviewing or surveying potential users was rather impossible due to privacy purposes. We proposed an optional survey for user research be available on the current website for logged in users, but this option didn’t seem viable to CPB’s design representative. Additionally, since this was just a design proposal, the representative did not feel that it was particularly needed at this point in the project. As a result, the majority of our research was spent looking at competitor’s websites (i.e. Bank of America Private Bank) and trying to understand why their solutions work.
Additionally, we decided to take a different approach by conducting user interviews on the current website to determine the pain points of the current website with a different user group. We also collected additional research from speaking to CPB’s design representative.
USER TESTING THE CURRENT WEBSITE
Creating a Tasked Based User Test
My partner and I decided to conduct tasked-based testing a user group that consisted of users ages 25+ that currently owns their own bank account. While this user group is not the exact target user group, we believed we would be able to gain valuable knowledge understanding their thoughts and emotions as they completed our test.
However, before we began, we needed to do our own homework. We scoured the current website, using the site map to try to create a website architecture of our own. We also wanted to note pain points we found ourselves hoping to see if the similarities matched with our user group.
Conducting User Testing
As we wrapped up our personal website research, we began conducting tasked-based testing on our user group. We were interested in discovering how each user’s experiences with the current design would differ from our thoughts.
Example Tasks:
- Open an account with Citi Private Bank.
- Where can I find CPB’s Market Views?
- Explain to me who CPB’s target audience is.
- Give me your initial thoughts when first scanning the homepage.
- Give me your overall thoughts on the navigation of the webpage.
“TOO MUCH INFO TO DIGEST”
All of our users mentioned that there was an overload of information, making it overwhelming to look at or navigate. We noticed an immediate shock/frustration when users first opened the page.
“NO IDEA WHERE TO FIND EVEN THE BASIC THINGS”
During the user testing, we found that many users were unable or were extremely frustrated trying to complete seemingly easy tasks. We noticed that there was lack of predictability within the page.
“IS THIS A BUTTON OR A LINK OR NEITHER? “
We found users clicking on random bits of information just to guess and check if they were clickable. There was a lot of guess and check as we watched users interact with the page.
“I VISIT BANKING WEBSITES JUST TO LOG IN”
Banking, no surprise, is a very personal thing. Users mentioned that aside for the first time visiting the webpage, they usually will only use banking pages to access their account.
Information Architecture (Card Sorting)
Based on our user research, we determined that the biggest current issue with the website was the overall information architecture. As a result, we decided use an online application (Optimal Workshop) to launch a quick card sorting exercise to gather more data and detailed analytics about the user’s ideal information architecture. The goal was to give us an idea of how to lay out our webpage.
Low-Fidelity WireFrames
With the research we gathered from the users, we set off to create a solution that addressed many of the pain points we discovered. Our goal in this step was to brainstorm ideas for the Home Page, seeing if we could simplify the UI/UX. We worked with the design director to discuss which ideas made the most sense to the potential user.
High Fidelity Mockups
Due to time and budget restrictions, my partner and I were unable to create a 2nd low fidelity wireframe from our sketches. While we would have preferred to complete a basic round of user testing on an interactive digitized mockup, we transitioned to creating high fidelity mockups using Adobe XD.
Note: The mockup featured here is the Proposed mockup design created.
PITCHING OUR DESIGN
After completing our high-fidelity mockup, we had our initial user testers review our new design for additional data for our next iterations. When a design was finalized, we put together new basic guidelines book to show the new visual treatment we created.
We packaged the mockup and brand guidelines, and sent our design proposal to CPB’s design representative. And then the waiting game began…
Update Nov 2019 (after I left Cumulus Media): Citi Private Bank finally responded stating they have decided to shelf their website design for the time being, but would most likely be hiring a larger design firm to put together a design.