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.