CITIGROUP

Citi Design Hub

Project Overview

In August 2020, Citigroup came to us and tasked us to design a responsive website to be a central hub for their design teams. This would include an internal database that would link each designer that worked on current and past projects. This hub would be used as an internal staffing and credibility tool to show stakeholders and upper management.

While I am unable to share the projects that were included in the final designs, I can share some prototypes and my roles/responsibilities while on this project.

**Note that many linked pages have been omitted including the style guides and mobile designs.

Problem Statement and Design Process

After many meetings with their client, it became apparent that each design team submitting their project had very different design visions for their page. Through Mural, my team heavily discussed various layouts that could showcase each project. Simply put, we could’ve created a grid with a hero image for each project that linked to another page dedicated to their project. Determining which project in the grid was another challenge. We eventually decided to create a carousel to showcase the projects.

Below are some sketches, mockups, and interactions that we initially designed.

From there we created a navigation complimented the style Citigroup uses, while also bring in new design elements that showcase our design groups creativity.

Below is a detailed annotation of the micro interactions and animations that are present on the Home page.

Screen Shot 2021-05-01 at 3.32.30 PM.png

My Role and Responsibilities

On this project, I mapped out the journey flows while ideating variations of each section on the home screen. I helped project managers define goals and scopes for the project and communicated daily with developers from Citi to discuss implementation of our designs. After all designs were complete and ready for handoff, I created the design library and a new set of brand guidelines for the hub and any linked pages.

Results

With the completion of this project we created a design hub for the Citi design teams. Our designs showcase a unique navigation and layout that helps emphasize the projects. With the use of our design system and template that we provided; the number of projects has risen way past the initial four we had designed for.

My Reflection

As one of the bigger projects that I was able to be a part of designing a product from end-to-end, I loved working on the design system and the interactions for this hub. After a few months, I came back and looked at my work. Here are my final thoughts and reflections:

This project is unique in a few ways. Pain points were discovered during the process and it made me more comfortable rapidly iterating designs on short notice. Understanding the users and what they wanted to showcase on their own side link was very important in the layouts for the templates. In the end, I would love to go back and rethink scalability of the site and the navigation. The concept of the bottom left nav and designing that with development was more of a headache. I am proud of the work that I had put into creating this hub for Citi.