Design Direction Deck (Draft) – as of Nov 17, 2020
Sketching in an Exhibit, Like Keith Haring
This week's focus was on developing the sketching application for the exhibit to allow users to experience what it was like to be like Keith Haring in the process of making his artwork.
I started by re-thinking about the research I had completed over the past three weeks to identify the characteristics that made Haring such a profound artist in modern art history. Thus, I coined the working title of the program to be The Haring Studio.
From research, I identified that Haring's artworks were often focused on using simplified forms – figures – to deliver a message that addresses humanity's social and political issues. His work was vibrant and expressive, typical of pop art culture at the time. Yet he always made his work accessible to the vast community, something he strongly believed in.
Creating Possibilities: The Haring Studio Design Stories
With these in mind, I began to build on the original set of stories in the Chimera Museum Kiosk Kit and added certain features connected with the themes gathered from the research on Keith Haring.
Example: Expression Through Figures
Beyond providing the function to draw with standard implements and colors, I suggested adding a library of graphic figures curated from Haring's collection of art for users to adapt and re-define their voice in composition.
Because expression is individual and unique, I also wanted to elevate the idea of allowing users to easily create their figure pose similar to Keith Haring's. This is particularly applicable for users who are "experience seekers" to interact with something unconventional while allowing them to translate their body action into art.
The idea was inspired by the Sculpture Lens by Local Projects, except the image captured is used to translate into figural outlines similar to Keith Haring's.
Example: Implements, Colors, and Community
In other adaptations of the experience, I researched the implements used by Keith Haring and discovered a resource by Adobe that highlighted some of the tools he used in this active career, such as the Sumi Brush.
Colors choices were also suggested to consist of primary colors with the option to access a rainbow wheel for custom selections.
To tap on Haring's legacy of a community spirit, I initially wanted to create a system comprised of two options – individual artworks and a community mural. However, the latter seemed complex, and I was advised to keep the program simple to operate. Thus, I opted to standardize the editing ability to individual artworks while allowing the user to "publish" their work onto a community feed (wall), which can be hosted on the landing page for Experiences.
Building Process: The Haring Studio Task Flow
Like Amazon ClassKit, building the task flow went hand-in-hand with the design stories, and working these two together helped me refine my design idea by closing gaps that I had not foreseen.
I thought my second attempt at building design stories and task flows would work more fluidly than the first. It certainly felt more confident approaching the task. Nonetheless, it made me realize that there wasn't such a thing as a perfect shot. Moving from design stories to task flows to sketches felt like going from an idea to a process to a product (feature), yet this chain of development certainly requires iteration to be refined.
Bringing it Together: The Haring Studio UI Sketches
In figuring (heh) the design for the UI sketches, I started by looking at strategies of other sketching programs to discover their practices of simplicity and ease-of-use. Some examples of these tools on iPadOS included Paper by WeTransfer, Apple Notes, and Notability.
These apps had different methods of arranging its tool/feature components and different microinteractions that signify the different modes. Some presented embedded options, while others had their tools laid out as a full array.
Given The Haring Studio was a sub-feature within the Kiosk app itself, I wanted to keep the program light while ensuring visibility in different modes of interactions. This thought tied in with the earlier crafting of the design stories, where I thought about the characteristics of Keith Haring's work that exemplified his artistic style.
In line with the brief recommendations of design for accessibility, I developed a design profile that remained on the lower portion of the display with a clear depiction of functions through icons and labels.
The micro-interactions for this editing screen were developed in two structures: inline and full-page, depending on the subsequent task's complexity (or rules of the microinteraction).
Inline Microinteractions
For example, I designed the color panel to be inline as the required interaction was simple – selecting colors. Nonetheless, I ensured that visual focus was added to provide sufficient feedback during the interaction and additional signifiers such as sub-labels ("Azure Blue/Ruby Red") to indicate the active mode.
Full-Page Microinteractions
The other option for complex menus was a full-page modal for users to interact. The feedback for this was more apparent with the modal covering the main screen content. However, I also ensured that the originating button was visible for users to reverse their decision (close), which I kept in the same position (but in a different visual) to signify its subsequent mode.
There were some additional considerations made in the design of the Create Your Figure feature. I recognized that a user would need to take a step back from the device to capture their full-body pose, making the screen less visible. To overcome this process's challenges, I designed the feature use auto-detection and capture, enlarged labels to ensure visibility, and added audio feedback on top of visual changes to better signify changes in state.
Of course, none of these would certainly be perfect in its first iteration. However, as more reviews from the team are to arrive in later stages, I look forward to gathering more feedback to dig deeper into the functions and microinteractions towards the final product pitch.
留言