App Design

OPD - responsive website design (B2C)

Responsibilities: UX/UI design, photography, photo editing, brand
Length: 2 weeks
Team: CEO, Design Lead, Marketing
Year: 2023

Problem: HMW present a design agency with many services, to potential clients

Specific goals
Key metrics

Discovery and Defining

OPD brand identify was defined by its circlular logo, blue dot, white Roboto font and the colour scheme of black/blue/grey.

The brief was to showcase the ‘science’ nature of the agency, plus its many services that it provides: which is a variety of content, but mostly image heavy.

As the website design needed to be suitable for both website and mobile, I started with rough sketches of shapes only. As the landing page was considered to be the most important moment for new clients looking to be impressed and existing clients to continuously confident in the agency’s creative ability: this is what I started with and what would drive the rest of the design.

As there had been no definite decisions made, I created coloured prototypes in AI, using design components set up.

Low-fi sketches

Circular design spreads

Overview of the ‘rectangular’ based design spreads

Dots based design spreads

I further developed the 'rectangular' geometric style, as the brief stated a 'scientific' look. This was reminiscent of the moodboard I had developed.

Pursuing the scientific, geometric look: I created interactive high-fidelity prototypes. These are concentrating on the ‘marketing’ elements that feature on each case study page: they show broader elements re the company to convince the user that OPD is a reputable and excellent company: such as customer quotes and awards.

Pursuing the scientific, geometric look: I created interactive high-fidelity prototypes. This showcases a singular case study and how the user navigates through each piece of categorised content related to the case.

Mobile-responsive design for desktop website

Mock-ups of mobile-responsive design
I added real content into the mobile style designs, to see which worked best in terms of navigation limitations and the size of the content. From these, I would then try to incorporate elements from both to create a workable design that would suit both desktop and mobile.

I created some interactive prototypes, to show what elements would need to be touched in order to navigate through the content. This would help with user testing the sizes and user expectations.

At this point, I was awaiting feedback of these designs until I left the company.

All Recent Work