Tuber Website Revamp 2021
Tuber is an editorial and design agency that was founded in 2007. Offering diverse capabilities that encompass editorial consultancy, branding and strategy, and digital experiences, as well as printed materials, Tuber's work is guided by a belief in dedicating time and effort to uncover good stories and exploring innovative ways to bring content to life.
Role: Art Direction/ UI/UX Design / Front-end Development
Duration: 6 months
Project Launched: 2021
Background
Since the last website makeover in 2019, a lot has grown within the company. With the business going from strength-to-strength, and with new internal and external projects underway within the team, it was time for a refresh. As such, I was assigned to revamp the entire website that best presents the Tuber brand and its body of work from past to present with a more polished and unified aesthetic for the future.
Challenge
The task of crafting brand new website required a broad range of expertise from art direction, illustration, UI design to development, it was important that all touch points were to be planned out carefully while placing the functionally and user in mind.
Dissecting the website: A comprehensive review
Before beginning the project, I conducted a thorough analysis of the existing webpages, while also cross-referencing industry competitors to identify potential areas of improvement in website presentation, user flow, and information architecture. This approach helped me to pinpoint key challenges and opportunities that would inform the planning process. Additionally, it provided me with a foundation of knowledge and understanding upon which to build as the project progressed.
Reversing the Design Process: Mood board to prototyping
To establish the design direction and cultivate the brand atmosphere, I began by developing a mood board to guide and inspire the process. Next, I drafted and proposed a brand new site map before moving forward with wireframe and prototype creation. This approach allowed me to gain a greater understanding of the look and feel of the website, as well as areas for improvement as the project progressed.
Establishing a fresher and cohesive style guide
While working on the website prototype, I created a brand new style guide. This guide will serve as the foundation for all future Tuber brand assets, including typography, colour palette, iconography, and illustrations.
The website development process: Bringing it all together
As the overall prototype and key screens began to take shape, I started documenting all new and existing content that could be better presented for a more comprehensive project overview. This documentation process also helped to ensure that all pages provides users a more intuitive user flow while browsing. Once this was complete, I applied the designs to Tuber's existing Wordpress CMS site.
Reversing the Design Process: Mood board to prototyping
To establish the design direction and cultivate the brand atmosphere, I began by developing a mood board to guide and inspire the process. Next, I drafted and proposed a brand new site map before moving forward with wireframe and prototype creation. This approach allowed me to gain a greater understanding of the look and feel of the website, as well as areas for improvement as the project progressed.
Personalising the digital journey for all individuals
As we developed the website, it was crucial to ensure accessibility and ease of navigation for all users while also encouraging them to return in the future. Thus, we made sure that the website are kept responsive regardless of the device they are using.
Personalising the digital journey for all individuals
As we developed the website, it was crucial to ensure accessibility and ease of navigation for all users while also encouraging them to return in the future. Thus, we made sure that the website are kept responsive regardless of the device they are using.
Personalising the digital journey for all individuals
As we developed the website, it was crucial to ensure accessibility and ease of navigation for all users while also encouraging them to return in the future. Thus, we made sure that the website are kept responsive regardless of the device they are using.
Personalising the digital journey for all individuals
As we developed the website, it was crucial to ensure accessibility and ease of navigation for all users while also encouraging them to return in the future. Thus, we made sure that the website are kept responsive regardless of the device they are using.
