UI/UX Designer, Prototyping
Kaitlin English (Developer),
Melody Chu & Winnie Zhan (Graphic Designers)
Figma, HTML, CSS, Illustrator
1 month
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.
"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."
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
Predicated on the problem and key information, a persona was created to identify and list the user's goals, needs and frustrations.
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.
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.
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.
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.
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.