Project Overview

Sony Pictures
TV Shows + Websites

As a UX Developer Intern @ Sony Pictures, I worked on a great deal of Front-End Development, UI Design and CSS Libraries. While being a part of the Creative IT Department I worked on a CSS/HTML Library to expedite B2B/B2C Landing Pages for TV shows under the Sony Pictures umbrella as seen above. The full process on the final deliverable can read below!

Team
Director of Creative IT
Project Manger
Front-End Engineer
UX Developer Intern - Yours Truly

Tools

The Problem to solve

"We need to reduce back-n-forth, expedite development and be up to industry trends"

That’s the nice way my Director would describe the problems with Developing sites for our clients. Essentially, sites are just not making the deadline nor are they meeting industry standards due to unclear direction and last-minute request. The direction/request primarily revolve around hover-effect on images and buttons. I created a diagram to illustrate how the process currently is.

The process diagram clearly shows that clients are creating a bottleneck due to minimal direction causing our team to create the wrong solution. I interpreted this about our clients:
Key Insights
Are not fully aware of UI/UX Trends
Are not considering Development Time
Direction can be easily influence
Solution

The UI Shop

My theory is that if clients are presented a site similar to browsing for clothes at a store, containing trendy UI/UX components, then establishing a design direction and back-n-forth will be become a quicker process.

Project Overview

I speculate that by educating and providing these components the client will be “pushed” to go a more foreseeable creative direction. Not to mention, we would have reusable copy/paste code to expedite web development.

The diagram illustrates how providing UI components early in the process may lead clients to the right solution minimizing “back-n-forth”.
Solution

The Clients needs!

To better help my hover-effect research, I wanted to understand what type of content clients primarily display on their sites. I conducted a google survey to see how the types of content would vary.

Resources

With a good foundation on what our clients primarily use, I began to research hover-effect trends for Images and buttons. I used numerous sites/resources and these six proved to be the most resourceful. You’ll notice Netflix is the only none UX-blog/Design site but they are a leader in movie/tv content with a very strong desktop app. I chose to research its animations since the content correlated with what our clients would display.

I began by writing down effects that I found optimal for what our clients wanted as well as what the industry was doing. One by one, I noted each design down on a post-it note until I had 15 Image and Button effects.
The Problem to solve

Establishing Direction for The New UI Library and Development

I organized a standup meeting with my team to look over findings. My goal of this meeting was to identify 10 effects for images and buttons. Whether they be in my list or a new direction to get there, this standup should lead me there.

A smooth conversation later with our director and engineer we agreed on 10 effects I had already noted down. Our meeting also brought to light that we needed to prioritize image hover effects thus this project won’t go into button effect development.
Solution

The Clients Needs!

To better help my hover-effect research, I wanted to understand what type of content clients primarily display on their sites. I conducted a google survey to see how the types of content would vary.

UI Wireframes

A Site That's Plain and Simple

You might be wondering why I created my components first, that’s because the site will be very plain in efforts to allow each effect to have the spotlight. I began to create some wire frames of a very simple layout that would allow me to minimize resizing.

UI Wireframes

High Fidelity

I created  what the full site would look with Sketch and tried to keep plain and simple where the effects became vibrant.  

A quick meeting with the team and once approved I began to code the final iteration. Then I implemented the design to the following components images, buttons and social media which was added last minute.

Conclusion

Takeaways

It felt very good knowing that I was helping departments across Sony Pictures meet their deadlines. Let alone, being the one that would expedite the process. I do wish I could keep expanding on this project and have reusable landing pages with more dynamic features to really leave an impression on Sony clients.