Rad Roofing is a brand new Calgary based roofing company that needed an entire website designed from scratch to meet their goals of establishing a strong digital footprint. As the sole Brand-Coordinator and UI/UX Designer, my goal was to create branding and web layout that would maximize user engagement and streamline information into a digestible and user friendly format in a way that made optimal use of content distribution. 

Michael Ocenar

UI/UX Designer

Brand Developer

Copywriter

4 weeks

Tools

Figma

Procreate


My Role

Team

Timeline

Web UI/UX Design + Brand Development

Raising the roof

In-A-Nutshell

Rad Roofing is a brand new Calgary based roofing company that needed an entire website designed from scratch to meet their goals of establishing a strong digital footprint. As the sole Brand-Coordinator and UI/UX Designer, my goal was to create branding and web layout that would maximize user engagement and streamline information into a digestible and user friendly format in a way that made optimal use of content distribution. 

Michael Ocenar

Team

UI/UX Designer

Brand Developer

Copywriter

My Role

Timeline

Tools

4 weeks

Figma

Procreate


Raising the roof

In-A-Nutshell

Web UI/UX Design + Brand Development

Rad Roofing is a brand new Calgary based roofing company that needed an entire website designed from scratch to meet their goals of establishing a strong digital footprint. As the sole Brand-Coordinator and UI/UX Designer, my goal was to create branding and web layout that would maximize user engagement and streamline information into a digestible and user friendly format in a way that made optimal use of content distribution. 

Michael Ocenar

UI/UX Designer

Brand Developer

Copywriter

4 weeks

Tools

Figma

Procreate


My Role

Team

Timeline

Web UI/UX Design + Brand Development

Raising the roof

In-A-Nutshell

Rad Roofing is a brand new Calgary based roofing company that needed an entire website designed from scratch to meet their goals of establishing a strong digital footprint. As the sole Brand-Coordinator and UI/UX Designer, my goal was to create branding and web layout that would maximize user engagement and streamline information into a digestible and user friendly format in a way that made optimal use of content distribution. 

Michael Ocenar

Team

UI/UX Designer

Brand Developer

Copywriter

My Role

Timeline

Tools

4 weeks

Figma

Procreate


Raising the roof

In-A-Nutshell

Web UI/UX Design + Brand Development

Challenges

To tackle this challenge in a very short time frame, I needed to balance the demands of effective content distribution with the aesthetic and functional needs of the brand while deviating from the usual process of creating a user persona and mood boards.


By focusing on efficiency and prioritizing key features, I was able to deliver a user-friendly, visually appealing website within the deadline, showing that even under pressure, thoughtful design can make a meaningful impact.

Narrow Timeframe

Challenges

Challenges

To tackle this challenge in a very short time frame, I needed to balance the demands of effective content distribution with the aesthetic and functional needs of the brand while deviating from the usual process of creating a user persona and mood boards.


By focusing on efficiency and prioritizing key features, I was able to deliver a user-friendly, visually appealing website within the deadline, showing that even under pressure, thoughtful design can make a meaningful impact.

Formulating a solution

Given the limited timeframe, I leveraged advanced AI tools to generate mock user data, which I synthesized based on demographic-focused research. Drawing on my branding expertise, I refined this data to determine optimal layouts, including ideal text and image placements, as well as colour and web design elements that drive conversions within the client’s niche and target region.


This strategic foresight, integrated into the website from the start, also streamlines future marketing and ad campaigns - an essential advantage I offer as part of my web development services.

Formulating a solution

Given the limited timeframe, I leveraged advanced AI tools to generate mock user data, which I synthesized based on demographic-focused research. Drawing on my branding expertise, I refined this data to determine optimal layouts, including ideal text and image placements, as well as colour and web design elements that drive conversions within the client’s niche and target region.


This strategic foresight, integrated into the website from the start, also streamlines future marketing and ad campaigns - an essential advantage I offer as part of my web development services.

Wireframes

Design

I used notes from a prior discussion with my client to sketch out the wireframes for the website on my iPad. These were then submitted for feedback to both my client and my other team member, Michael, in order to get approval on the design.


Once approved, I created a full mockup of the website on Figma, utilizing brand guidelines, that I also created for my client prior to the website design, and implementing my user and niche research.



Wireframes