Vinnie Mehta

Primary Objective

Mobile app with inbuilt mockup design tool

Overview

Nanos Arte is an e-commerce store and turns kids’ artwork into a personalized gift for families and friends to celebrate their special occasions.

Project Brief

Currently, users request gift mockup designs for their personalized gifts by sending email messages with attached artwork through emails. However, the offline process of designing a mockup is a time-consuming task for the business. Therefore, users need to wait longer to preview and approve mockups before placing an order.

Pillow

My Role

Product Designer

Tools

Figma, Photoshop, Google analytics, Whimsical.com

Deliverable

Utility Mobile App

Click to view Figma prototype

Download brief case study PDF

Product Design

Business Needs

To optimize mockup design experience

Business is losing leads because of the time-consuming mockup design task. For the turnaround of mockup previews, the user needs to wait up to 24 hours with limited options.

End to end utility mobile app

To improve the efficiency of the growing mobile users who manage their kid's artwork using mobile devices.

Users Problem

To create personalized best looking gifts with their kids’ artwork for families and friends.

HMW Statements

  1. How might we help user select and place artwork onto a product to preview printed custom gifts?
  2. How might we help the user to enhance kids original drawings into best looking personalized gifts?
  3. How might we help the user previsualize customized gifts with their kids’ art before placing an order?

Research

Product Design

Research objectives

To understand user needs & expectations

Most customers ask for kids' drawing enhancements and tweaks for designing their personalized gifts.

To Identify user demography metrics

To analyze users' behaviour by age, gender, and interest categories.

To learn users gift buying journey

What steps user takes before ordering a gift and what factors influence users' decision.

Primary Research

Customers Email Review

After reviewing the customer’s emails from the past 12 months has helped me understand their personalized gift design needs and problems.

Customer_email_a

Customer Requests & Design Need​s

Mock up without paper background

Hi, This is the art! I'm interested in how it looks both with just the lines, no paper background and also, if you think it looks better, with the paper. I can also try to take another photo if that helps.Thanks! Will you let me know you receive this?

Mockup with same artwork on both side

Hello, I’ve just purchased two tote bags printed on both sides.Please find attached the file that I want printed on both bags. Both bags will be identical. Let me know if you need anything or if you have any issues with the bag.

Different product mockups with same artwork

Hi, I would like to do a gift for the grandparents do my kids. Here are pictures of the artwork of my son. These are wild horses, and I find the pattern very beautiful. Could you please do a mock-up or pillow cases and/or cups for me with one image on one side and the other on another side? Thanks!

Primary Research

User's Artifacts

Based on users’ artifacts study for art and craft gifts made by kids for their parents, grandparents and loved ones. It helped me understand the gift-givers need, receivers’ expectations and pain points.

handMadeGifts

Gift givers' needs

  1. To bond the relationship between kids and their loved ones.
  2. To choose the right gift for loved ones.
  3. To give something thoughtful which has special meaning for receivers.

Gift receivers' expectations

  1. To feel connected to kids, family & friends even though they live far away.
  2. To cherish moments and build memories with growing kids.
  3. To personalized yet practical and meaningful gift.

Challenges

  1. Non-usable art and craft gifts become overwhelmed collectables.
  2. Handmade Gifts are hard to manage over the years and tends to get tucked away in a drawer or a jewellery box.

based on google analytic

Quantitative Research

After analyzing the past 12 months of the user interaction and demographic data from google analytics of Nanos Arte’s website, the following are the key learnings:

Demographic Analysis

1. Nanos Arte attracts 79.2% new visitors.

2. Nanos Arte has 52.9% mobile users.

3. Male and older (55-65 years old) user group segments are rising respectively by 30% and 10%.

User Behaviour

After examining the analytics, I got the following insights:

  1. 42.5% of the new users’ searched gifts through product categories.
  2. 79% of the returning users also use special categories to find their gifts.

Primary Reseach

Research Findings

The user needs a personal yet best-looking gift.

Kids' original artworks are unique and beautiful but need polishing to make the gift comparable to commercial, practical products.

Male & older user group segments are growing.

The proportion of senior users (aged 55 and older) has grown by 10%, and 30% male users.

Search through demographics' categories.

Based on analytics, the user discovers gift items through smaller categories based on demographic factors such as a gift for grandparents.

Secondary Research

Competitive Reseach

Heuristic Analysis

Examined big and small competitors’ interfaces and features who offer a wide range of personalized gifts with the following are the insights:

etsy
logo
artkive-logo-icon
  1. Robust client reviews and rating system.
  2.  Demographic small product categories.
  3. Social share feature.
  4. Kids’ profile with artwork uploading and sorting feature.

Competitors Users' Pain Points

Following are the insight after studying competitors users’ pain points:

  1. Lack of option to use multiple artworks for designing mockup.
  2. Absence of background and image enhancement design tools.
  3. Confusing upload image feature through iCloud or photos stored on smartphones.
user comments

Secondary Research

Competitor's Research Findings

Well defined product categories.

The most common feature among all is demographic-based product categories with a review and rating system.

Design tools accessibility issues.

For the growing seniors and children user segment, designing an inclusive and accessible design tool is paramount.

Feature to save mockups design images.

Ability to save mockup designs into user profile for later use.

Define

Based on research findings

Personas

Mapped the provisional persona and its characteristics based on research findings and then developed the primary user personas.

Provisional Persona​

IMG_0027

Persona Characteristics

IMG_0028

Primary User Persona

user's Persona
Based on research findings

Empathy Map

To create an empathy map, I have gathered the data through my direct communication with customers and research findings.

empathy_map
Based on research findings

Journey Map

I have been engaged with Nanos Arte’s customers directly through emails, chats and phone calls. I have designed the user’s journey map after revisiting the client’s communications and research work. It helped me to visualize how user achieves their goal and what are their needs and expectations.

User journey map

Defining Goals

User Flow

I have designed the user flow based on the new and returning user scenarios. Matt is the new visitor, whereas Niina is returning customer.

Design

Sketches

Paper Prototype

Created the paper prototype to test and explore several user flows. It makes it easy to swap paper screens and let you focus on the flow process.

Design Tool Mapping

I mapped all the artwork editing tools required by the user to design their gift mockups based on research findings..

DesignToolMap

wirerframe

Low Fidelity

By further working on the paper prototype, I designed low fidelity wireframe with the following improvements:

  1. Accessibility of design editing tools solution.
  2. Product category navigation from mockup tool page.
  3. Notifications & alters system to help user decisions.
Wireframe_out

design system

Design System

UI Kit

I used the existing design system for a mobile app, which I created for the website before, to continue the overall brand aesthetic and design voice around kids’ art.

Design_style

Prototype

Wireframe

High Fidelity

I designed the high fidelity mobile app prototype using Figma. It features UI design and user interaction where users create personalized gift mocks using smart AI design tools. In addition, I designed a more prominent icon, and accessible task flows for elderly and diverse users based on research findings.

Design_style1

Prototype (Figma)

or click to watch video recoded prototype

Test & Iteration

Product Design

Usability Goals

To inspect user interaction with CTA buttons

How new and repeat users will interact with CTAs from the home screen.

To find user's preferred categories & filters

How will the user browse product categories and filter the product to design a personalized gift for grandparents?

User interaction with mockup design editor

To find out if the design editor UI is intuitive and straightforward enough for the user to perform various design tasks such as upload image, edit design and purview mockups.

Usability Test

I conducted a virtual usability test with six users through zoom meetings. I used the prototype designed in Figma to find how the user interacts with the inbuilt design mockup tool.

UseAbility_Interveiw
Based on usability test

Test Findings

CTAs for New & Advance Users

homepage
homepage

At first, the home screen CTA had only one option to browse product categories. After the usability test, I switched back to my original paper prototype concept. I added a second CTA to start designing for returning users familiar with products and would like to jump-start creating their personalized gifts.

Therefore, It solved the following two problems :

  1. Returning clients can start designing and select the product from within the editor itself.
  2. New users could browse the categories, select the product and then begin designing through the product page.

Product Template

mock_bg
  1. Product template dropdown was not getting enough attention from users. Therefore I replaced it with product thumbnails to choose from the design editor.
  2. Changed grey colour to checkerboard for better visual design clue about leaving a transparent image background after editing it.
  3. I tuned the toolbar inactive until the user selects the product to match the design editing interface layout with the chosen product.
mock_bg

Confirmation Dialogue Boxes

Mock_im_re
Mock_im_re
  1. The cross icon was too close to other user tasks. Therefore I placed it outside of the image. Added a confirmation alert for an informed user decision.
  2. I replaced the option of applying artwork to both sides with the pop-up notification to confirm when the user will tap on the mockup preview. 

Navbar CTAs

Mock_Pre_re
  1. Mockup CTA replaced with the edit design button for giving the user a choice. The user could continue to edit or cancel to start over with either a new image or product.
  2. Place it CTA was confusing for users. Users thought the artwork has already been placed and wanted to add it to the cart instead.
Mock_Pre_re

Alert Notifications

AddCart_Rev
AddCart_Rev
  1. Added modal notification for user to avoid mistakes and make an informed decision for tabbing on cancel.
  2. I added a confirmation notification to select & confirm product variation before adding it to the cart
Mobile App Design

Learning & Next Step

I have gathered and implemented new insight from the usability test. Our prototype is ready to test our new solution assumptions after applying test findings on a bigger scale. The next step is as follows :

  • Improve cart experience.
  • The incursion of artificial intelligence and AR kit to enhance inbuilt design tool experience for users.

Other Projects

WEBSITE REDESIGN

All-quotes is a service marketplace for home improvement projects. It connects business contractors to customers and provides quotes for their projects.

BANKING APP FEATURE DESIGN

RBC mobile banking app launched an AI service called Nomi, helping users save on an average $225 a month through its existing NOMI Budget and NOMI Find & save.