2019 / 7C Laboratories

MUOI

Project-Image-3

Crafting a memorable browsing experience using subtle interactions that enrich the whole

In June 2019, I joined 7C Laboratories as their design intern. The most significant project during my internship was designing MUOI’s website – taking full ownership from start to finish.

I collaborated heavily with the client to achieve the vision that they have for their website. The necessary discovery work has already been done, and 7C Laboratories has already prepared some initial design concepts to guide the design process. My job was to push these designs further, leading to the delivery of high-fidelity prototypes to the client 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?

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.

7cmuoi2

03 |  PROCESS & STRATEGY

Setting up the groundwork

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

CHUNKING

Presenting information in chunks to make them easier to digest and remember. MUOI's website is information-dense, hence needing careful attention to how content is presented.

CLEAR AFFORDANCES

Providing cues on how users should interact with a design element. Using slightly different ways of presenting information might confuse users.

AESTHETIC-USABILITY EFFECT

Leveraging positive emotional responses to a beautifully designed interface to improve the users' perceived ease of use.

04 |  MICRO-INTERACTIONS

A tiny bit out of the ordinary

I aimed to create a delightful yet unintrusive browsing experience using micro-interactions. They serve as little accents that augment the browsing experience rather than being the main focal point.

05 |  MICRO-INTERACTIONS 2

Managing clutter

Micro-interactions also played a functional role in containing larger chunks of information, preventing clutter and cognitive overload when viewing showcased work.

06 |  MOBILE EXPERIENCE

A pocketful of MUOI

Translating and optimizing the experience into mobile was no easy task. MUOI's website is information-dense, and smaller screens require more careful attention to avoid deviating from the already established identity and functionality of the website.

MUOBILE

07 |  REFLECTION

Re-evaluating my design handoff process

Although working on this project has taught me a lot about designing for the web and prototyping interactions, the most valuable lesson came shortly after handing over the designs to the developer. 

I began to notice a constant back-and-forth between the developer and myself to clarify specific details regarding the design. I realized I didn't properly communicate design details in the files I handed off.

This was further exacerbated by the amount of motion and transitions used in the designs– something I didn't have experience doing before. This experience prompted me to re-evaluate and improve how I conduct developer handoffs.

Back to top Arrow