Dapo Oni

Designer



Work
About
Experiments

Contact




ux + ui design

Citi Group


Goal —

Citi Group was having usability problems with their site, and we wanted to make sure that their clients and partners don’t have such a hard time finding the information that 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.



Country Presence —



Old Site:






Round 1



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


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.

Final


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.

Comps

**At the time I published this the site was still in development, so I put up the comps of each page instead.
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.  


Final



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.

Mobile




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

Comps