Designing a website for a full-service design agency based in Toronto using subtle interactions that enrich the whole. 

June to August 2019

7cmuoi2

01 |  THE CHALLENGE

How might we?

As a brand, MUOI values the tiny details that make up a great product– and they needed a website that reflected their ethos. Humble in its form, yet possessing bravado and sophistication. How might we create a web experience that embodies this identity?

afwe
menu-services
Artboard-Copy

02 |  THE SOLUTION

A little affects a lot

The final designs deliver a memorable browsing experience through subtle details and unintrusive interactions that work together to enrich the whole.

7cmuoi-2

03 |  PROCESS & DESIGN STRATEGY

Setting up the groundwork

Before even laying down any pixel, I needed to make a more tangible strategy in designing the website. To achieve this, I established clear design principles to guide my design choices. These design principles served as the foundation in which I grounded my design decisions from.

CHUNKING

Presenting information in chunks to make them easier to digest and remember. MUOI's website is likely to be dense in information, therefore needing careful attention on how content is presented in the website.

CLEAR AFFORDANCES

Providing cues on how users should interact with a design element. Using slightly different ways of presenting information might confuse users. This keeps my design decisions in-check so that I am not sacrificing usability.

AESTHETIC-USABILITY EFFECT

Leveraging positive emotional response to beautifully designed iterfaces to improve the users' perceived ease of use. Creating a good user experience that is both functional and visually appealing.

04 |  DESIGN SYSTEM

The building blocks

I started the design process by organizing a clear style guide to avoid using arbitrary sizing for design elements, and to adhere to the earlier design concepts. Later on, I also created a small-scale components library for the repetitive elements in the website to optimize my workflow.

dsys1-2
dsys2-1

05 MICRO-INTERACTIONS

A tiny bit out of the ordinary

Using micro-interactions, I inteded to create an experience was delightful, but does not jump out on the user. I wanted the keep the act of browsing and learning about MUOI to still be main focal point, therefore utilizing these interactions as a supplement to the act rather than becoming an accent. Micro-interactions also played a functional role in displaying larger chunks of information, saving screen real-estate along the way.

Desktop-HD

These interactions were prototyped using Principle.

06 |  FEATURES

Keeping things organized

In the context of MUOI's website, features were used as a way to further organize levels of information to avoid cognitive overload, as well as crowding the screen in general.

One of the more specific features that MUOI wanted was to give users the ability to take a look into the finer details of their showcased works. How this worked is that each work is presented as highlights and high-level summaries, while more detailed information were hidden on the page, accessible through a trigger.

Adding another layer of scrollable information through a drawer modal

07 | MOBILE EXPERIENCE

A pocketful of MUOI

Translating and optimizing the experience into mobile was no easy task. MUOI's website was admittedly dense in information, and a smaller screen meant that we needed to be extra careful in presenting the same amount of information without deviating from the already established identity and functionality of the website.

Mobile_Grid

08 |  REFLECTION

Handoff documents, and the gaps in how I communicate designs

Although working on this project has taught me a lot about designing for web and prototyping high-fidelity interactions, the biggest learning came shortly after handing over the designs to the developer. 

I began to notice that there was a constant back-and-forth between me and the developer to confirm certain things regarding the design– which I took as a sign that I fell short on communicating details properly in the handoff files. This was further exacerbated by the amount of motion and transitions used in the designs– something that I never had an experience handing off to developers before. This experience prompted me to re-evaluate and improve how I conduct designer-to-developer handoffs.