Adie Margineanu

Interaction Design + Research


Designing a Promotional Marketing Website for a Digital Agency


Usability Matters have been leaders in the field of user experience design and research for 15 years. They needed the company promotional website to reflect their organization's maturity and leadership in the UX industry in Toronto.

Core Design Team

  • Steven LeMay Design Director
  • Adie Margineanu UX & Visual Designer
  • Andrew Emond Front-End Developer

Core Client Team

  • Sarah English Director
  • Ania Sedgwick Marketing & Sales Director
  • Louise McCulloch Marketing Coordinator


  • Requirements Gathering
  • Experience Strategy
  • Wireframing
  • Visual Design

Project-Specific Goals

The primary goal of this project was to re-design the Usability Matters promotional website to reflect the agency's expertise, wealth of experience, and leadership in user experience design research, strategy, and design.

Understanding the Problem Space

The sales and marketing department put together personas for the users we are targeting - digital decision makers and UX professionals - based on their own primary research consisting of interviews and sales calls.

I put together a UX strategy brief to make sure our design vision was not compromised at any stage of the design process.

Pages from the UX brief showing design principles which are: content first, lead in design research and design thinking, be flexible agile and adaptable, be straightorward and unpretentious, provie elegant solutions to complex problems, and engage our community

Figure 2.1

The UX strategy brief document, showcasing our design tenets.

The Design Process

Once the design brief was approved, I wireframed the different pages outlined in the brief, at three different responsive breakpoints.

These wireframes were all about creating templates that could be leveraged for consistency and in case the site needed to be expanded at any point with minimal added design work. Some of the pages - like the home page - needed a legend to provide more flexibility about each content module's use.

Once the wireframes were approved, I mocked up two different creative concepts for the look and feel of the home page.

Wireframes and mockups of the home page for the new website.

Figure 3.1

Wireframes for the home page at large, medium, and small screen responsive breakpoints. Two visual design concepts for the home page.

I also created a distinctive and unique icon set to be used on the website and in branded material.

Progress from laying out the icon grid to a line sketch of the design service icon, to the final full colour asset.

Figure 3.2

Grid system I designed for the icon set and progress from draft to finalized "Design" icon.

I wanted to showcase a unique, geometric style with interesting but precise angles. The final icon set has been used in pitch decks, presentations, printed materials, and in updated mockups of the website.

Icon set of four for the four service areas of strategy, research, design, and training.

Figure 3.3

Final Services Icon set for use on the Usability Matters website and in branded materials.

Design Evolution

At the beginning of 2017, the services page of the website was iterated on and improved, using the patterns and visual design direction of the 2015 redesign.

Based on research and competitive landscape review by the marketing team, they concluded that the page simply was not showcasing the agency's services and the impact these services deliver to clients.

The new design takes a progressive disclosure approach, first surfacing a high level introductory page on all service areas, with the option to dive into a specific service area (e.g. UX/UI Design) and find out how these services have quantitatively and qualitatively helped UM's clients. The page has information about the deliverables and activities conducted in that service area as well as related content like case studies and blog posts to really showcase the team's expertise.

Wireframes of the evolution of the services page.

Figure 4.1

Original wireframe of the services page (left) and the new iteration of the services landing page (middle) along with a net new page, a service area page going into detail about our specific offerings for that service area (right).

Visual design mockups of the evolution of the services page.

Figure 4.2

Visual design for the original services page (left) along with the newly designed page (middle) and the services area sub-page containing more detailed information about activities and deliverables (right).


  • AA content-first approach is vital for an organizational website.

    We tried to promote and advocate for a content first approach because imagery, written content, and video are so important in showcasing what a digital agency can do and the design of the website itself should be unobtrusive.


The Usability Matters website showcases the many years of experience and expertise the organization holds.

The updated services page is under development. To explore the live website go to

Explore other design projects More about me