Krishna Adriano

Some image

Dottie's Case Study

About The Project

Goal

Learning traditional art is not only challenging, at times, it is also inaccessible. I have three personal goals for this design challenge: support the existence of more traditional art-focused apps, address current pain points of mobile ecommerce users, and improve reading experiences. What you can expect:

  • The finest selection of tutorials, sales, competitions, and more;
  • Art specialty shops with pick up and delivery options;
  • Art charity highlights & direct donations.

My Role (solo project)

  • Product Strategy
  • User Research & Analysis
  • Wireframes
  • UI Design & Prototyping
  • Animation
  • Content Writing

Timeline

This concept project consumed a long time as accessibility tests required a rigorous research process. It’s also important to note that even if this is the skeletal schedule I followed, it is not completely linear; it involved back and forth with research, user validation, and design iterations.

Process

The method I used in the development of Dottie’s is based on IDEO’s Human-Centered Design (HCD). This popular system for crafting product designs allowed me to focus on users and their needs at each of its design phases.

  • Inspiration
  • Ideation
  • Prototyping
  • User Testing
  • Iteration
Phase 1:

Inspiration

1.1 Hypothesis

Aspiring artists don’t fall short of curiosity and drive to explore different traditional mediums. Absent mind blocks (or existential issues), a major deterrent in the pursuance of traditional art is the specialized materials it requires, their scarce availability, and its intimidating nature.

1.2 Interviews

After conducting interviews, I observed that among young artists, experimenting with digital art instead is gaining traction, not only due to the ubiquitousness of gadgets making it far less cheaper to explore, but also the wider array of student-freelancers who deemed it more lucrative to familiarize themselves with digital mediums.

Other insights:

  • Faith in the importance of learning traditional art remains
  • Interest to go back to the tactile boards and workshops is intact, but inaccessibility comes in many forms
  • Gap of fulfillment between creating digital and traditional art is narrow, but the latter incurs larger mental and financial burden
Phase 2:

Ideation

2.1 The How Might We’s

To generate more concrete ideas, I used HMW questions to explore ways to address the user’s pain points.

  • How might we develop a renewed interest in a young artist to explore traditional art?
  • How might we make traditional art more accessible in terms of availability of resources?
  • How might we create a more inclusive space for artists with special user needs (such as color blindness)?
  • How might we make the searching process friendlier and more appealing?
  • How might we lessen the mental load of aggregating items from different stores to find the best option to buy?

2.2 Other Problems And Solutions

Problems

  • traditional art mediums are vast and varies
  • loss of inspiration
  • steep learning curve (depending on medium)
  • uncertainty in tools’ proper use and quality
  • no nearby stores & expensive shipping for bulky items
  • emotional disconnect to art’s served purpose in life

Solutions

  • advanced filtering and visual search interface
  • emerging artist spotlights, competitions, and design challenges
  • extensive tutorials offered on different skill levels
  • establish feedback and rating functionality
  • delivery and pick up option for flexibility
  • art communities and charities success stories

Wireframing

Grid used is a 12 column grid with 15px gutter and 24px margin.

Phase 3:

Prototyping

This hi-fi prototype has defined UI elements, visual hierarchy, and design patterns so it allowed me to work faster and paperless. This is the first iteration that I tested with users, and it turns out the colors I used are not color-blind friendly, hence the drastic change in color scheme on the final iteration.

Phase 4:

User Testing

4.1 Test Findings And Design Solutions

Test Findings

  • The original menu icon (4 dots) was ambiguous and hard to reach
  • The search icon is easily missable
  • The term ‘Topics’ was deemed confusing, and not indicative of segmented categories
  • Users valued checking the store’s external online presence

Design Solutions

  • Tab bar in lieu of the menu icon was established at the bottom
  • The search feature was made more prominent and actionable
  • The title of the section was changed to ‘Articles’ instead
  • A store view, map view, phone number, and website (if applicable) were integrated

4.2 Color Palette

It is probably impossible to create a universal visual impairment/color blind-friendly palette, which means that the colors that I chose for this design are not bulletproof. This palette, inspired by the Okabe Ito color scale, has the primary goal of creating a more inclusive default for Dottie’s.

Phase 5:

Final Iteration

Onboarding

These onboarding pages use a benefits-oriented approach to encourage users to sign up. This part is vital since it allows Dottie’s to communicate why it would be of great value to its users.

Registration And Verification

The 2-step registration process offers a mobile number or email address option to sign up. This is a crucial stage for user retention and conversion rates, which means that it should be as simplistic yet useful as possible.

Explore

The explore or feed page follows an inverted pyramid structure. It shows the user everything the user can do on the app; the size, proximity, and order of the sections make navigating functions less scary, and more natural.

Article List

Following the findings from the ideation phase, the vast coverage of readings are categorized neatly for easy browsing.

Article Modal

The article modal makes every essential button within reach, while also keeping distractions at bay. It features customizable settings, interactive checklist, and a reading progress bar.

light mode

dark mode

Store Views

There are two ways to navigate the curated store list: via maps or an online shop. The map contains other links or store details that may provide more confidence and credibility to the shop.

Product

The product page contains the comprehensive detail about the item selected. It is made in five parts: images, variants (if any), product description, reviews, and recommendations.

Add To Cart Microinteraction

This animated button provides a positive and rewarding feedback when clicked, practically letting the user know their action was completed. By immediately providing a confirmatory response, it also helps prevent multiple unnecessary clicks.

Checkout

Mobile checkout is often tiring, but it doesn’t have to be. I used a numbered progress indicator to manage user expectations of how long the checkout will take, each form field comprises a whole row, and one striking button is reserved for the most important action.

Donation

The donation pages provide information about the communities, and make it easy to contribute to their causes through preset amounts and recurring payment options.

Donation History

User tests I conducted showed that users place value on flexibility and control. While the ‘One-time’ tab features gray and flat cards, the ‘Monthly’ tab’s cards are designed to be more actionable. It provides several options for the user to take control of their donation, in contrast, initially, the only option for recurring payments was a cancel button (revealed by swiping).

Add Payment Method

Stored banks & cards avoids the obstacle of retyping card details at checkout everytime. By asking for cards on user’s accounts, it expedites the ordering process and removes choice paralysis at checkout.

The form fields are designed to help the customers go through the process as easily and quickly as possible.

Search

This page uses the explicit search pattern paired with an autocomplete function to make searching easy. Tapping on the search bar will reveal a dedicated search page that offers topic or item recommendations, as well as filtering options. Results are also grouped according to their category.

Other screens

Tab pages, saved information, and other account related functions.

Empty States

“A zero data world is a cold place. When first time users look at your app and all it does is show a blank slate without any guidance then you’re probably missing out on an opportunity.” - goodui.org

Design System