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.
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
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.
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
AnnounceMate
This app concept is a custom aggregator app concept for School of Design & Arts. Its purpose is simple: simplify the way students navigate SDA-related announcements. A product of a 14-week UI/UX design study, this utilized the process of human-centered design to come up with the solutions presented herein.
About The Project
Problem
Students tend to miss important events and reminders as announcements come through many different channels.
Insight
Differing preferences and online presence create a gap between students and the information they need, when they need them.
Goal
Help students stress less on information management by consolidating different office sources under one roof.
My role ⚊ Research & UI/UX Design
Lead a team of 4 researchers, was responsible for surveys, graphic design, and final presentation.
Discovery
This phase of HCD research reminded me that listening is beyond hearing, observing is more than looking, and being open to the unexpected transcends what's tried-and-tested. My teammates and I brainstormed problems students face on a daily basis, and agreed that we wanted to channel our efforts into tackling a significant but overlooked cognitive problem: managing announcements.
It might be trivial in foresight, but organizing dozens of notifications a day could be a full time mental load by itself. Currently, campus news are delivered via Facebook, Facebook groups, Messenger (these are three different worlds within one universe), Benilde mail, Twitter, and Bigsky.
Ideate
Cluster analysis
After we interviewed 30 students, we clustered their average answers and analyzed the data. (The scope of the application is limited to School of Design and Arts only. The school is comprised of 12 courses and a few thousand students.)
Findings
From these six, our group reflected on the three clusters we believe are most vital to bringing our vision to life: (1) Personal Preference, (2) Negative Feedback, and (3) Suggestions.
Preferences:
- Students prefer graphic information over unordered lists
- Students look forward to specific clusters of information
- Announcements should be integrated with social media
Feedback:
- Notifications are not categorized
- Emails are delayed most of the time
- Students tend to miss a lot of important reminders and events
Suggestions:
- While emails are proper, we should explore other options to deliver these messages
- There needs to be a new platform for MMA students specifically
- Students should be diligent in checking their emails
How Might We
We then averaged the responses and created 9 HMW (how might we) questions, but these are what we narrowed them down to:
- How might we cater to students that prefer graphic information over text-heavy announcements?
- How might we help students scan a lot of information efficiently?
- How might we prioritize the announcements that concern the students?
- How might we create a new option to efficiently deliver campus-related announcements?
After this, we again voted which design challenge we feel is the most exciting, innovative, and practical. It was unanimous:
How might we create a new option to efficiently deliver campus-related announcements?
Implementation
Management and scheduling calendar
The app is equipped with a customizeable calendar to help manage events, and track tasks.
Events that are coming close are highlighted in red, while the ones at max a week away is green. Else, items are uncolored by default.
Avengers Infinity War
About The Project
I was immensely inspired by Ryan Meinerding’s Infinity War concept art that it got me to finish this long overdue personal project. Initially planned for release during Civil War, the completion of characters got delayed as other major projects pushed it back. I painstakingly vectorized each strand of hair, wrinkle of clothing, and layers of armor. Made with Adobe CC.
The film is directed by Anthony and Joe Russo, and written by Christopher Markus and Stephen McFeely. It features an ensemble cast including Robert Downey Jr., Chris Hemsworth, Mark Ruffalo, Chris Evans, Scarlett Johansson, Benedict Cumberbatch, Don Cheadle, Tom Holland, Chadwick Boseman, Paul Bettany, Elizabeth Olsen, Anthony Mackie, Sebastian Stan, Danai Gurira, Letitia Wright, Dave Bautista, Zoe Saldana, Josh Brolin, and Chris Pratt.
Film Art Collection
About The Series
This alternative movie poster series pays homage to the many outstanding films that creatives release to spark creativity and ignite critical thinking globally. The method I used to create these illustrations is called vectorization, and its done by creating points in a Cartesian plane to form curves, shapes, and polygons. Title treatment credits to the respective studios that have them fully licensed.
PS. Posters in here are not indicative of the movies I watch, neither are they tantamount to my support for all the names behind it. I unequivocally support basic human, trans rights. That said, a cis, hetero, nonminority multimillionaire should really have no business commenting about what trans people deserve or not deserve.
Phantom Thread
About The Film
Phantom Thread is a 2017 American period romantic drama film written and directed by Paul Thomas Anderson, set in the haute couture world of London in the 1950s. It stars Daniel Day-Lewis as a couturier who takes a young waitress, played by Vicky Krieps, as his muse;[6] it is Day-Lewis's final role before his retirement. The film is the first Anderson film shot outside the United States, with principal photography beginning in January 2017 in Lythe, England. It is Anderson's second collaboration with Day-Lewis, following There Will Be Blood (2007), and his fourth with composer Jonny Greenwood.
Pacific Rim: Uprising
About The Film
Pacific Rim Uprising is a 2018 American science-fiction film directed by Steven S. DeKnight (in his feature-film directorial debut), and written by DeKnight, Emily Carmichael, Kira Snyder and T.S. Nowlin. It is the sequel to the 2013 film Pacific Rim, with Guillermo del Toro, the director of the original, serving as a producer. The sequel stars John Boyega (also making his producer debut), as well as Scott Eastwood, Cailee Spaeny, Jing Tian, Adria Arjona and Zhang Jin, with Rinko Kikuchi, Charlie Day, and Burn Gorman returning from the original film. Set in the year 2035, the plot follows humanity again fighting Kaiju, giant monsters set on destroying the world.
Charlie's Angels
About The Film
Charlie's Angels is a 2019 American action comedy film written and directed by Elizabeth Banks. From a story by Evan Spiliotopoulos and David Auburn, it stars Kristen Stewart, Naomi Scott, and Ella Balinska as the new generation of Angels who are working for a private detective agency named the Townsend Agency. The film is the third installment in the Charlie's Angels film series and serves as a continuation of the story that began with the television series of the same name by Ivan Goff and Ben Roberts and the two previous theatrical films, Charlie's Angels (2000) and Charlie's Angels: Full Throttle (2003).
Tomb Raider
About The Film
Tomb Raider is a 2018 action-adventure film directed by Roar Uthaug, with a screenplay by Geneva Robertson-Dworet and Alastair Siddons, from a story by Evan Daugherty and Robertson-Dworet. An American and British co-production, it is based on the 2013 video game of the same name, with some elements of its sequel by Crystal Dynamics, and is a reboot of the Tomb Raider film series. The film stars Alicia Vikander as Lara Croft, who embarks on a perilous journey to her father's last-known destination, hoping to solve the mystery of his disappearance. Dominic West, Walton Goggins, Daniel Wu, and Kristin Scott Thomas appear in supporting roles.
Fantastic Beasts: The Crimes of Grindelwald
About The Film
Fantastic Beasts: The Crimes of Grindelwald is a 2018 fantasy film directed by David Yates and written by J. K. Rowling. A joint British and American production, it is the sequel to Fantastic Beasts and Where to Find Them (2016). The film features an ensemble cast that includes Eddie Redmayne, Katherine Waterston, Dan Fogler, Alison Sudol, Ezra Miller, Zoë Kravitz, Callum Turner, Claudia Kim, William Nadylam, Kevin Guthrie, Jude Law, and Johnny Depp. The plot follows Newt Scamander and Albus Dumbledore as they attempt to take down the dark wizard Gellert Grindelwald, while facing new threats in a more divided wizarding world.
Benilde @ 30 Exhibit
Benilde And The Top Feeder Schools
‘Benilde@30, The Exhibit’ is produced by the Center for Campus Art and the Lasallian Mission and Student Life.
The core of the exhibit are 30 collage boxes featuring these community partnerships. Created by 30 students and alumni the commemorative boxes contain significant materials and information about the communities, highlight key Benildeans and their partners, and provide a narrative of the partnerships. A timeline listing down 150+ milestones of the College from 1988 to the present will be seen. Looking to the future, models of the three major buildings of Benilde presently being constructed and images of the newly opened Benilde Antipolo Campus and the proposed new Boracay campus completes the exhibit.
Benilde prides itself in the diversity of its learning community, particularly its student body. This diversity is reflective of the mission started by Saint John Baptist de La Salle and Saint Benilde Romançon of making innovative education accessible to the marginalized members of society and to diversely- gifted learners. This meant that De La Salle-College of Saint Benilde (DLS-CSB) is one of the top schools of choice for high school students aiming for careers in various disciplines that Benilde offers. Indeed, according to Br. Victor Franco FSC, former President of DLS-CSB, “as Benilde continues to grow in terms of population and physical facilities, its spirit of innovation and creativity propels it towards becoming the school of choice for students who know better.”
Another way of furthering this agenda is Benilde’s counselor tours, where counselors from DLS-CSB conduct talks in feeder schools about the mission and vision of the College and its educational aim of innovation for inclusion, highlighting the six different schools of Benilde that cater to nearly every educational interest of an aspiring freshman in college. These feeder school talks also put emphasis in the College’s notion of learner-based education, where students are allowed to discover and construct knowledge for themselves, with as many options for learning as possible; and have access to quality teaching through a pool of faculty who are adequately trained in facilitating learner-centered instruction.
The strategy of making Benilde one of the top schools of choice in the country has paid off, for examinee population—as opposed to transferees—have grown through the years and continues to grow. In order to ensure that DLS-CSB would be the school of choice of a potential student, the EMBARK campus tours are held for parents waiting for their child to finish the entrance examination. This tour highlights the programs of the College, and parents are students are also able to meet and have a dialogue with the different program chairs, faculty members, alumni, and even current students of the College. With this strategy, Benilde ensures that it is open for everyone, and that inclusive education is free and has no additional charge on top of existing tuition fees.
Feature Article by: Leif Andrew Garinto, Faculty, School of Multidisciplinary Studies
'Benilde@30 The Exhibit' ran its course at the 12/F Main Gallery, School of Design and Arts. The pieces were exhibited until December 1, 2018 (extended).
7-Minute Wonder
About The Project
(This project focused on marketing and print packaging collaterals.) 7-Minute Wonder is a web roof of topic guides that is dissected into categories of up-to-date societal affairs, including but not limited to:
- Media
- Politics
- Science & technology
- Economics
- Sport & leisure
- Arts and culture
- Health and medicine
- Environment
- International relations
- Liberty & law
Problem
With extremist leaders around the world on the rise, the critical chalenges surrounding truth is becoming more apparent.
The feeble foundations of democracy manifests through extreme polarization of societies vis-à-vis political, socioeconomic, and human rights matters.
Solution
A media website geared to strengthen the foundations of democracy via the concept of explanatory journalism. It aims to incrementally but incessantly empower discourses grounded in civility, factual data, and reasoned analysis.
Primary Target Market
Men and women ages 18-26, in the B middle to C2 lower social classes, & educational attainment of at least 9th grade.
Secondary Target Market
Married men and women ages 40-48, in the C1 middle to C2 lower social classes, & with or w/o a diploma, employed formally or informally.