Human-Computer Interaction Design
Uncovered solutions for interactive design challenges using
Front-end based, interaction design software.
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.
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.
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.
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.
Original Wireframes and Prototype mockups
My goal was to create interactive design prototypes usingInteractive Design conventions and animated interactions within the mobile Apps