ux + ui design
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 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.
Country Presence —
↑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.
↑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
↑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
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.