RBC Technology & Operations Design Hub

Note: Due to company policies, some information has been blocked using a grey box*

My Role

UI/UX Designer, Prototyping

Team Members

Kaitlin English (Developer),
Melody Chu & Winnie Zhan (Graphic Designers)

Tools Used

Figma, HTML, CSS, Illustrator

Duration

1 month

Problem

Designers on our team were finding it hard to quickly scan through the Design Hub to find the resources they needed. Looking for assets would take more time and effort. This website is also used by employees from different departments to submit a design or video request, but this section was hard to find and easily missed. The instructions on the request forms were difficult to digest.

BACKGROUND

"RBC Technology & Operations (T&O) Design Hub is an intranet where employees can find design assets, templates, tutorials and submit a design or video request."

Solution

In order to create a better system that is more accessible and convenient for students, we wanted to streamline and simplify this process. Here are the proposed recommendations we came up with to enhance the experience for everyone involved in the process.

📍

"Popular Resources" section to quickly find most used resources

📂

Thumbnails to give context and know what each resource is

🗓

Section dedicated to "Design & Video Requests" as the call to action

📚

Request Form instructions broken down into steps through a timeline

Persona

Predicated on the problem and key information, a persona was created to identify and list the user's goals, needs and frustrations.

Current Design Hub Layout

Change the Carbon Dioxide Levels

The user will see the water levels rise in the 3D model when they drag the slider at the bottom to change the carbon dioxide levels. The ships and cars that I animated in the code are releasing carbon emissions (appears as a cloud-like gas) show them a visual of how this affects our planet.

See the Process of Coral Bleaching

The user will see fishes swimming around and the vibrant and colourful coral. When they press the "Click Me!" button, the coral will lose its colour due to the rise in temperatures.

Brainstorming

Storyboards

Style Tile

Inspiration

Process

This shows the process of building the 3D models and the iterations I had before the final version. My rounded coral shapes made my file size too large and it would lag when I tried to load it onto the browser. In order to fix this, I designed all of my models using low-poly.

The lighting I had in Cinema 4D would look different compared to when it was on the browser. I changed certain lines of code to change the lighting settings and kept experimenting until I was happy with the result.

Since the models take a bit of time to load, it would create a white flash between the pages. In order to combat this issue, I created a loading page for a smoother experience.

Final Result

Takeaways

How to 3D Model in Cinema 4D

Prior to this project, I had never used Cinema 4D before. It was a huge learning curve for me because I did not know how to 3D model. But, after watching many tutorials and making many iterations I became more comfortable using this program. I enjoyed the challenge of learning a new program and incorporated multiple 3D models in my project because I had a lot of fun working on it.

Working within the Scope of the Project

Since I wanted to have complicated 3D models with a lot of rounded shapes, it was not possible to load them into the browser without lagging and a long wait time. I had to make the shapes less complicated and use low-poly shapes to decrease the file size.