ux + ui design

Citi Group

Problem —

Citi Group was having issues with site responsiveness, navigation that caused usability issues across their site.

Goal —

Make sure that Citi Group clients and partners don’t have such a hard time finding the information they need.

Role —

My responsibility was to redesign the country presence and timeline portion of the site, and to make sure that the large amounts of information on these pages were presented in a straightforward and elegant way.

Result —

Project shipped with the directions I worked on before my internship ended.

Country Presence 
Timeline 

User Motivations
Making sense of who was going to be visiting the site and what their needs were.

Country Presence —

Old Site:

Round 1

Accordion menu expands to reveal a list of countries with Region Info and Awards at the top

**The map was the agreed upon design that would be seen throughout the site.

Region info is displayed initially when accordion is opened, and blue dot to the left indicates currently active area.

Drill-down to country level shows country info, and local office details.

Why this didn’t work —

This may have seemed simple when coming up with the concept, but overall the accordions made this more of a heavier lift when it came to development that would ultimately bring this to life, so we needed something that would play fair with the deadlines at hand.

Along with the fact that breadcrumbs were not being used anywhere else on the site intentionally.

Round 2

Use tabs for regions so they are always accessible.

Country presence opens to global map and user has the option of selecting from a list of countries or going directly to region tab.

Region tabs automatically open to region info, now with the option of selecting countries within that region.

Country page indicates selected country in left pane, office info, and accordions for different corporate documents.

Why this didn’t work —

Too dense for mobile because of tabs on left in addition to left, one of the solutions I created to explore different ways of nesting country list and region info under regions

Round 2.5

I ended up killing the tabs on top and tried to just turn the left pane into a list of countries that was easier to go through using predictive search.

Just a thought, but I moved on.


Create something more straightforward and lightweight on the dev side that improved upon the current Citi country presence. Click a map, and it takes you to the region page.

We actually ended up using breadcrumbs, again, for a simpler solve.

Sense of seperation between tabs on mobile.


Citi Country Presence 

Designer: Hakan Isik

History —

Old History page:

Round 1 —

Stay close to the current way of presenting this info and show the different 10 year intervals, but use small and large tick marks to show all the events within a time period.

Leaves more room to space out images and dense paragraphs.

Tuck time period info in a larger menu that expands out.

Why this doesn’t work –

Tick marks don’t easily communicate events on a timeline, and there needs to be a more compact way of displaying time period info without relying on the expanded menu.

Didn’t create mobile wires for these since we decided not to move forward with this direction.  


Instead of including this within the “About Us” page, I made a point to give the History portion its own moment aside from all the information that’s being presented on that page. So I added a way out in order for the user to get back to the parent “About Us” page.

This is a more compact version that combines the “Progress” info (on right) and leans on imagery to show current time period and glipses of others.


Here’s a more compact version of the timeline with the “Progress” and time period info tucked away in the right corner – treated as secondary information. Thumbnails of other events within that time period are sticky to the bottom of the page for easy access.

How page content moves when scrolling – content is contained within nav + secondary information and thumbnails below.

Once a user swipes the image left or right, they are taken to the next event within the time period.

Another swipe and they are taken to the next time period, now this one has more events, so the arrow on the boom right indicates this continuation.

Mobile “Progress” pane

Timeline navigation