Human-Computer Interaction Design
Case Study
.

ROLE

IxD
UI Design

 

CLIENT

Personal-Spec 

SOFTWARE

Just-in-Mind, Photoshop

PROEJCT GOALS:
Uncovered solutions for interactive design challenges using
Front-end based, interaction design software.

STUDY

01

Design an interactive experience using
Just-in-Mind Prototyping Software

CHALLENGE: Make a fully interactive prototype using Just-in-Mind Software to showcase different looks of the Mona Lisa. I based the concept from the original art and added various artists interpretations using Sliders and a Shuffle Button.

 

SOLUTION: Front-end-style math, functions, and variables on buttons and sliders. Defined task definitions, what users need to achieve and gathers data with feedback. 

Screen Shot 2020-08-31 at 12.12.15 PM.pn

Example 1: The Mona Lisa Art "Sliders" captures the movement to reveal each masked image, while the associated icons updated in color based on the sliders (value %) position with visual feedback. 

Example 2: For the interactive Mona Lisa shuffle image project, I quickly discovered some hidden challenges such as developing a numerically accurate randomization method. As a solution, I researched front-end coding and applied the math functions to create a cycle-style of grouped images.

 

Screen Shot 2020-08-31 at 12.05.22 PM.pn

STUDY

02

Explore innovative ways to display values & auto-update selections using Just-in-Mind

CHALLENGE: For this prototype example, I created text entry fields that automatically updated cities corresponding to the country selected by the users. e.g. Spain-Barcelona, France-Paris, Italy-Rome

 

SOLUTION: I used Front-end style math, functions and variables. I also added animations triggered by the user's selection.  i.e. If a user picks 'Italy' it would display the cities name in the corresponding text field and CTA button. I also included animated flag icons.

STUDY

03

Interactive Medical Appointment Scheduling App

CHALLENGE: This prototype required a set of variables throughout each interactive screen. When the user completes the form and enters data, the final interaction responds with the users information is then compiled in a visual feedback sheet.

 

SOLUTION: I used Front-end variables and a 'Data Master List' to drive the input fields. Later in the interaction, the data is compiled automatically in the Feedback Sheet.

Screen Shot 2020-10-04 at 10.05.35 AM.pn
Screen Shot 2020-10-04 at 10.24.38 AM.pn

Original Wireframes and Prototype mockups

Screen Shot 2020-10-04 at 10.05.02 AM.pn

Copyright © 2020 Rick Makoul All Rights Reserved