2017-2018

UI DESIGN

Iconic Industry

 
ezgif-4-48ea67e01c.gif

01. overview

Introduction

Iconic Industry is an advertisement agency based in Downtown San Diego. The environment in their office is a mix between San Diego relaxed surfer-vibe and Bay Area business-first vibe. It is a collaborative environment and very relaxed.

 
 

 
 

Challenge

Iconic Industry's website has not been updated since 2010 and needs a revamp/redesign. They said that potential future clients and future employees would visit their website and think that it was a fake company based on the design layout of their website. Also, there was nothing on their website that showcases the company's culture and what Iconic Industry has to offer.

 
 

 
 

Solution

I researched other advertisement agency's websites based in San Diego and developed a competitive audit. From there, I started on low-fidelity and high fidelity wireframes for the website to keep them up-to-date with their website based on some features of other advertisement agency webites. To showcase more of the company culture on their website, I was there personal photographer and videographer to show not only how hardworking everyone is but how fun and relaxed they are also.

 

02. research

Competitive Audit

I noticed from my research, many ad agencies use a large hero video on their homepage to show the work culture in their office. They also have different sections for each category like, "Who we are", "Careers", "Contact", etc. On Iconic Industry's old website, it was just a long vertical scroll website with no images/videos. 

 
 
Iconic_CompAudit-01.jpg
 

Company Culture

What better way to showcase company/work culture then to get it on camera and display it on the website. Since I am a photographer, I would walk around the office with my camera and take pictures of when people were in a meeting, working in their desk and socializing during lunch. That way, new users such as potential clients and employees would visit the website and think Iconic Industry was not a spam or fake company like how they felt like when they saw Iconic Industry's previous, outdated website. If you really want to see their old website: click here.

 

 
IconicPhotoCulture-02.jpg

03. design

Low-Fidelity Wireframes

I developed low-fidelity wireframes for their website to organize the general layout and the user's flow while scrolling and navigating their website. Instead of having everything in one long vertical scroll, I wanted to divide sections up to make it more organized.

 
 
Iconic_LowFi-02.jpg
 

High-Fidelity Wireframes

I took the photographs I took around the office and put them as banners one each section of the website. I grabbed color from their logo and incorporated those colors in the website to show consistency and balance.

 
 
Iconic-01.jpg
 
 

Prototype

When I finished the high-fidelity wireframes, I started to connect all the wireframes together and prototyping the website together. I made a video of me prototyping the website as a new user.