Intoduction
Overview
Monkey Makers Engraving Editor's purpose is to personalize engravings on wooden toys. The product was born from the need of "Monkey Makers" customers to create engravings independently.
Motivation
The client "Monkey Makers" is a company conveying makers activities for children and adults, founded and managed by Ron Kal. They needed a solution for customers to create engravings independently from the online shop. Personalized engraving existed but was done through text messages and emails.
*This project is a collaboration with Monkey Makers.
The Challenge
I aimed to create an easy and elegant solution to customize engravings as part of the purchase process. Many of their customers have low technical skills, so the solution should also fit their needs.
Research
Customer Journey Map
The customer journey map for "Adding a new engraving on a wooden toy" illustrates the process from initial desire to receiving the finished product, identifying touchpoints and opportunities for improvement.
Research
Contextual Research
Based on the customers’ data provided by the company, I defined the users' behavior and usage profile.
To deepen my knowledge, I read Michal Halperin Ben Zvi's guide "LOGIN", which contains information on design for this age group.
Research
User Interviews
I conducted personal interviews with five potential users who fit the contextual research criteria and purchased online.
Interview Topics
-
Routines and habits in online shopping.
-
Opinions on engravings and what makes them personal.
-
Design methods for greeting cards and inscriptions
-
Preference between templates or independent design.
Key Insignts
Pain Points
-
Engravings might appear generic and not personal.
-
Struggle to imagine the final result.
-
Low time and energy.
-
Desire to add prepared drawings.
Solutions
-
A personal handwritten engraving.
-
Simulation of the design.
-
Pre-designed templates.
-
Illustrations or icons stock.
Research
Competitive Analysis
I performed broad research on direct and indirect competitors to learn the current solutions and UX patterns.
Researched Products
Key Insignts
Pain Points
-
Some actions can be difficult to locate.
-
Many options entail a lengthy learning process.
-
It's a tedious process.
Solutions
-
Editable stock templates are available for customization.
-
Live simulation reflecting real-time changes.
-
Context-sensitive buttons that adapt based on the situation.
-
Immersive experience.
-
Review and preview the option provided before proceeding to checkout.
Ideation
Task Flow
I focused on two main flows.
Primary task flow: adding a new engraving from a template.
Secondary task flow: adding a new engraving in handwriting.
Primary Task Flow
Add new engraving
Choose template
Edit
View simulation
Finish
Secondary Task Flow
Add new engraving
Access photos
Upload photo of handwrite
View simulation
Finish
Ideation
User Flow
I focused on the primary task flow and built an elaborate user flow examining different paths the users might take and the results.
Ideation
Wireframes & User Testing
I created an interactive prototype to test it with potential users to check its functionality and clarity.
Key Insignts
-
When the canvas is blank, emphasize the template option.
-
Differentiate the main editing bar from the specific bars.
-
Simplify editing options to the most essential.
-
Ensure editing options are visible without the need for scrolling.
-
Provide the option to confirm or cancel editing actions.
-
Display the "Add new" screen upon selecting an element type.
UI Design
Templates
Pre-prepared template stock enables users to swiftly add, edit, and replace elements in their engravings, streamlining the process and offering inspiration for those who may be uncertain about where to begin.
Custom Images
To personalize the engraving, users can replace the text box with their handwritten greeting by uploading a photo. Users can select images from the photo gallery or capture pictures using the phone's camera to create the engravings.
Pre-made Stock
For easy and enjoyable engraving, a stock of illustrations is readily available for the users' usage.
Simulation
The simulation assists users in aligning their expectations before final approval and transitioning to payment.
Loader
The loader screen reflects the brand's visual identity while reducing stress and impatience for users through a playful animation.
