During my second year at giphy I was tasked to do a complete re-design of their current web and mobile web platform. In this process we re-evaluated the current grid system, UI elements and over all site architecture.
We planned the re-design by stages. Beginning with a change of grid and new site architecture which was reflected with a new global navigation.
Subsequently we re-designed the GIF detail page and its content bucket pages which we called editorial feeds and Channel Pages.
Giphy’s UI elements had to be playful and have a sense 80’s nostalgia that made the Giphy brand what it is. I took inspiration from 8bit art to create some of our UI elements and extend our color palette.
Our new Grid system was divisible by 8 to later become adaptive for android and iphone. We kept a simple 4 column grid that would work well with our content.
When designing Giphys editorial Feed I decided to tackle the problem by crating modules that covered every iteration of the page. The modules could help the developers envision all the components they had to build.
This modular approach made the editorial feed flexible enough to cater to all types of content and later be a model that worked for our detail page and channel pages.
As giphy.com began to grow and the concepts of editorial feeds and Channels became products we had to restructure the site’s architecture. I worked with our product manager to re-design the sitemap and get a better understanding of what our new site structure would start to look like.
The Giphy Homepage was the first page to go live with the new site redesign. We incorporated a new grid, new navigation design and a color block system to highlight the Editorial Posts of the day. We also came up with a tag banner that displayed trending tags. This feature was later scrapped at launch.
In parallel Giphy’s mobile system was designed to seamlessly transition to mobile web. We also adopted the same ui styles for our mobile apps.