MONIKER MIMICKER

5 MINUTE READ

CONTRIBUTION
UX Research
UX Strategy
UI Design

LENGTH
4 months

YEAR
2023

CONTEXT
Capstone Project
Client Work

GRADE
A

TEAMMATE
Ashley Yien

THE PROBLEM
How might we educate people about risograph printing through a digital interface?

THE SOLUTION
Moniker Mimicker is microsite extending from the Moniker Press. Its goal is to educate users about risograph printing by accommodating different learning styles through playful interfaces.

MY IMPACT
I led the research, identified key insights, directed the strategy. I also designed and prototyped core interactions.

.•° ✿ °•.

RESEARCH & FINDINGS
I began this project knowing little about risograph printing and our client, Moniker Press. I wanted to get a comprehensive understanding of our domain and client to determine possible areas of intervention so my research took on many forms. I conducted field studies and interviews with Erica at Moniker Press to understand her needs, values, and pain points as a risograph artist and business owner. I also did archival research to understand the processes of risograph printing and its cultural implications.

.•° ✿ °•.

INITIAL EXPLORATIONS
Based on our findings, my team chose the Moniker Press website as our leading site of intervention.

Through my explorations, I addressed the website's poor information architecture by designing a new sitemap to reduce the cognitive load for users wanting to look for information on the site. In addition, I reimagined riso education through a playful lens by designing the Riso Simulator.

INFORMATION ARCHITECTURE

Like most risograph studios around the world, the Moniker Press website provides educational information about risograph printing (e.g., what it is and how it works) and the studio's services as a business. However, on the MP website, the information is hidden in toggle containers and vaguely labelled tabs, which results in excessive cognitive load for users perusing through the site.

I conducted a card-sorting session with 5 users to gain insight about their mental models of the Moniker Press website. By consolidating the results of the card-sorting session, I modified the website’s navigation items, and redistributed the under information according to users’ mental models. The goal of the redesigned information architecture is to maximize the intuitiveness of the information searching experience and to reduce the overall cognitive load for users looking for information.

In the wireframes above, I also presented the information directly, rather than in toggle boxes.

RISO SIMULATOR

The Riso Simulator provides users a fun, alternative way to learn about the basics of risograph printing. The experience design of the Riso Simulator is meant to encapsulate the whimsicality of risography and Moniker Press.

.•° ✿ °•.

PROTOTYPES
Ultimately, my team decided to move forward with the Riso Simulator. We made a firm pivot towards riso education, but with a playful twist that will reflect the values of risograph printing and Moniker Press.

We aimed to design a proof-of-concept prototype for a microsite called Moniker Mimicker. The microsite would be an extension of the Moniker Press website, designed as a general tool for learning about risograph printing. Moniker Mimicker will house two digital products: the Reverse Riso and the Riso Sim.

Through this project, I aimed to improve my UI skills by taking the initiative in designing prototypes and interactions. I created prototypes for the Riso Simulator and some core interactions for the Reverse Riso. I also explored prototypes for mobile optimization of the Riso Simulator.

I designed this hover interaction for the Reverse Riso,
which reveals the parts of the picture that each colour occupies.

The sample photo is retrieved from The Risograph Museum

Since our final deliverable was a proof-of-concept, I prototyped most of the interactive elements and showcased their active states to achieve the illusion of a fully working program.

.•° ✿ °•.

THE SOLUTION
Moniker Mimicker is the product of a values-driven design process that aims to introduce people to risograph printing through a playful website.

Within the Moniker Mimicker, the Reverse Riso deconstructs riso-printed materials. At the same time, the Riso Simulator walks users through a digitized process of risograph printing. By engaging users in passive and active learning through the Reverse Riso and the Riso Simulator, Moniker Mimicker aims to make the magic of risograph printing known and accessible.

REVERSE RISO
The Reverse Riso is a top-down approach to learning about risograph print that engages users in passive learning. Its aim is to deconstruct an existing risograph print and to inform users about the paper used, the colours used, and the file separation requirements.

The Reverse Riso begins by presenting the user with a selection of risograph print.

Users can learn about the print’s file separation requirements.

RISO SIMULATOR
The Riso Simulator is a bottom-up approach to learning about risograph print that engages users in active learning. It simplifies the risograph printing process into three key steps: paper, colour, and texture. With the Riso Simulator, users can create a digital "riso print" by choosing from a selection of papers, colours, and textures. View full prototype playthrough here.

In the Paper Stock Selection step, users can choose the kind of paper they want. This paper will act as the backdrop or the canvas.

This paper will act as the backdrop or the canvas.

In the Colour Selection step, users can choose colours.

Users can click on the colour, which will appear as a shape on the canvas. The shapes are loosely based on Moniker Press' branding, while the colours are based on the ink colours Moniker Press offers.

Users can click on the colour, which will appear as a shape on the canvas.

Users can move the shape around the canvas.

Users can transform the shape (rotate, scale)

Users can add new colours and change its opacity.

In the Textures Selection step, users can choose the texture they want.

PRESERVING RISO QUALITIES ON A DIGITAL INTERFACE

LANDING PAGE

The visual design of the microsite was carefully crafted to emulate aspects of risograph printing. The landing page emulates a grid wall panel at the Moniker Press studio where Erica displays risograph prints. The monochromatic colours allude to the black and white file set-up requirements for printing, and the grainyness emulates the texture on risograph printed materials.

REVERSE RISO

The Reverse Riso is a top-down approach to learning about risograph print that engages users in passive learning. Its aim is to deconstruct an existing risograph print and to inform users about the paper used, the colours used, and the file separation requirements.

The Reverse Riso begins by presenting the user with a selection of risograph print. The user, then, can choose to learn about the paper stock, the ink colours, and file separation. While the Paper Selection and File Separation steps straightforwardly presents information, users can interact with the Colour Usage by hovering over the coloured squares which will reveal the individual ink layer. for the corresponding colour.

RISO SIMULATOR

The Riso Simulator is a bottom-up approach to learning about risograph print that engages users in active learning. The Riso Simulator simplifies the risograph printing process into 3 key steps: paper, colour, and texture. With the Riso Simulator, users will be able to create a digital “riso print” by choosing from a selection of papers, colours, and textures.

In the Paper Stock Selection step, users can choose the kind of paper they want. This paper will act as the backdrop or the canvas. In the Colour Selection step, users can choose colours and shapes. Users can click on the a shape/colour and it will appear on the canvas. Users can change the colour opacity, as well as drag and transform the shape and arrange it however they want on the canvas. The shapes are loosely based on Moniker Press’ branding, while the colours are based on the ink colours Moniker Press offers. In the Textures Selection step, users can choose the texture they want.

REFLECTIONS

ON INTERACTION DESIGN. In my previous design classes, I usually spearheaded the initial stages of the design process like research and conceptualization, and left the tedious work of UI design and prototyping to my other teammates. I wanted to use this project as an opportunity to challenge myself to design interactions and participate in the grit work of prototyping. Though there were many frustrating moments of trial and error, I feel more confident with my Figma skills and UI skills. ON CLIENT WORK. I have always been strongly driven by my values. Naturally, for this project, I felt a slight apprehension about working with a client whose values do not align with mine. At the same time, I wascurious about how I would have dealt with that kind of situation. Thankfully, Moniker Press had been such a dream client with matching values. In a way, I was able to dodge what might have been a potential obstacle. As a result, I was able to engage myself fully in the project to create something both the client and I can enjoy. ON DESIGN JUSTICE. My primary question regarding design justice was: is this possible to integrate in the Euro/Ameri-centric design process that I’m used to / being taught? When the project began, I had hopes of designing a product that was purely inclusive. I had a mental checklist of features that I wanted to integrate in our final product because I thought that would align it perfectly to design justice values. Thinking about it now, I think though my intentions were good I was definitely missing the mark. I remember feeling bad when I felt our design direction was straying from my mental checkboxes.

During one of our conversations about design justice, my teammate and I were rhetorically asking ourselves what would have been the “correct” solution to the design problem in Sasha Costanza-Chock’s opening story in the book. I deduced that at the moment, there is no concrete answer. Rather, the design justice movement simply begs to be discussed. In hindsight, I guess my team had done just that. We constantly talked about ways in which we could expand the access to our product. Though the current iteration of the Moniker Mimicker does not check off all the inclusive design features I had hoped it would take on, I look forward to all the ways it could look in its future iterations.

LANDING PAGE

The microsite's visual design was carefully crafted to emulate aspects of risograph printing. The landing page emulates a grid wall panel at the Moniker Press studio, where Erica displays risograph prints. The monochromatic colours allude to the black-and-white file set-up requirements for printing, and the graininess emulates the texture on risograph-printed materials.

heading 1

heading 2