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:
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.
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.
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.
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:
To generate more concrete ideas, I used HMW questions to explore ways to address the user’s pain points.
Grid used is a 12 column grid with 15px gutter and 24px margin.
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.
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.
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.
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.
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.
Following the findings from the ideation phase, the vast coverage of readings are categorized neatly for easy browsing.
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
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.
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.
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.
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.
The donation pages provide information about the communities, and make it easy to contribute to their causes through preset amounts and recurring payment options.
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).
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.
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.
Tab pages, saved information, and other account related functions.
“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