Krishna Adriano

Some image

UI/UX   Design

Some image

UI/UX   Design

Some image

Illustration

Some image

Illustration

Some image

Graphic   Design

Some image

Graphic   Design

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

Some image

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:

  1. How might we cater to students that prefer graphic information over text-heavy announcements?
  2. How might we help students scan a lot of information efficiently?
  3. How might we prioritize the announcements that concern the students?
  4. 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

Stress less on organizing.

Announcements are carefully laid out to ensure that the user’s main areas of concerns are accessible from the feed.

  • The top level of banners feature general posts
  • The second level includes the biggest area of segregation among student clusters: their programs/courses
  • The subsequent tiers let the user personalize their app experience by making other filters easier to reach

Log in exclusive to students only

Logging in the app is exclusive to students of the college with an ID number and an active Student Information System (SIS) account.

The system automatically syncs the credentials as it changes quarterly.

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.

Easy access information and contact details

For questions relating to the app and the school, an accordion-style color-coded phone directory of campuses and a complementing FAQ page is accessible offline.

Real-time push & in-app notifications

To enable certain features such as push notifications, permissions from the user will be asked. If the user opts out, we’ll store the notifications internally and the user can access them anytime offline.

Some image

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.

Avengers Infinity War Alternative Movie Poster

Anthony Edward "Tony" Stark, Iron Man

Steve Rogers, Captain America

Scott Lang, Ant Man

T'Challa, Black Panther: King of Wakanda

Natasha Romanoff, Black Widow

Arthur Douglas, Drax the Destroyer

Stephen Strange, Doctor Strange

Gamora Zen Whoberi Ben Titan

Rocket Raccoon & Groot

Clinton Francis "Clint" Barton, Hawkeye

Robert Bruce Banner, Hulk

Loki Laufeyson, God of Mischief

Mantis

Wanda Maximoff, Scarlet Witch

Peter Benjamin Parker, Spider-Man

Peter Quill, Star-Lord

Thanos

Thor Odinson, God Of Thunder

Vision

Wong

James Buchanan "Bucky" Barnes, Winter Soldier

Nebula

James "Rhodey" Rhodes, War Machine

Steve Rogers, Nomad Captain America

Some image

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.

Phantom Thread Alternative Movie Poster


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.

Pacific Rim: Uprising Alternative Movie Poster


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).

Charlie's Angels Alternative Movie Poster


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.

Tomb Raider Alternative Movie Poster


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.

Fantastic Beasts: The Crimes of Grindelwald Alternative Movie Poster


Some image

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).

Some image

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.

Primary Target Market

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.

Secondary Target Market

Brochure

Front/Outside

Back/Inside

The Kit Packaging

The packaging features a magnetic enclosure and water-resistant coating.

Front/Back

Front

Back

The Kit Contents (Basic)

This basic kit is curated for a hassle-free note-taking and organizing. The notebook case is sealed by an elastic band to help secure the contents of the sleeve when transported.

Inside/Outside

Notebook, Pens and highlighter, sticky notes

The Debate Kit

This extended kit is curated to support intervarsity tournaments, held by various colleges nationwide. It features the Basic Kit, a reusable water bottle, a lanyard and ID, plus a totebag to house the contents in.

Tournament Package

Infographic

Benefits Of Debating