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

June to August 2019

Roles
Design Intern, UX/UI Design, Motion Design, Prototyping

Collaborators
7C Laboratories

Tools Used
Sketch, Figma, Adobe Photoshop, Adobe Illustrator, Principle

In June 2019, I joined 7C Laboratories as their design intern for the summer. As part of my internship, I was tasked to design MUOI’s website– taking full ownership of the project as soon as it was handed over to me. MUOI became the biggest project that I worked on during this internship.

I collaborated heavily with the clients in order to achieve the vision that they have for their website. The necessary discovery work has already been done prior, and 7C Laboratories have already prepared some initial design concepts to guide the design process. It was my job to then push these designs further, leading up to the delivery of high-fidelity prototypes and developer hand-off.

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?

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.

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.

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.

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.

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.