Final HiJack Ideation Process

By Kristen and I

1. Orignal Idea 

Inspiration

2. Visual Aesthetic 

Visual Inspiration for game/decoding

Vintage engraving from 1860 of a Schimmel’s automat krempel Machine

 

 

Loading animation

3. Updated Final HiJack

Description

We wanted to have an aspect in the environment that ties all of the interventions together. We decided to create a game the users play to decode Jack at the end of the bar. Once Jack is unlocked, they receive a passcode that will lead them to a reward (a drink in our case). There will be plaques of codes subtly incorporated in the environment and interventions that will help users unlock Jack. Essentially, this promotes people to be more aware of the environment. We wanted to focus on making the intervention to be somewhat mysterious so that people who are more aware of the cues are the ones rewarded.

Prototyping Tools You Should Know

Invision

InVision allows you to upload jpgs and link them to create interactive mockups of your choice. You can create interactions by adding customizable “hotspots” on screen of the prototypes. Showcasing the final product is as easy as creating. InVision supports mobile, desktop, and wearable screen sizes. InVision has a very user intuitive platform that allows designers of all skill level to easily use.

Cost: Free

http://www.invisionapp.com/

Protomote

Protomote is a platform to showcase interactive prototypes. Unlike most prototyping tools, Protomote showcases active prototypes that can be shared and as well used. This enables efficient networking with colleagues and peers. The site also provides designers to have access at looking at other prototypes they can purchase. This platform is often compared to websites like Dribble and Behance, however the main difference is the immediate interactivity of the prototypes.

Cost: Free

http://www.protomote.com/

POP: Prototyping On Paper

POP: Prototyping On Paper allows users to transform pen and paper ideas on to working prototypes. POP is a simple platform for designers of all skill levels to use. It allows users to include links and transitions. The prototypes that are being worked on can be edited and shared on crossed platforms. Users can edit on their desktops and publish through tablet or mobile device.

Cost:

2 projects, 1 member – Free

Basic: 10 projects, 3 members – $10/year

Pro: unlimited projects, unlimited members – $25/year

Home

Axure

Is a wire framing, rapid prototyping, documentation, and specification software tool designed for web and desktop applications. Axure is a complex tool often used by professionals in the industry to create sophisticated prototypes. Users  must learn how to use the software in  order to use it to its full capacity. Some resources include: Axure Core Training, Lynda.com, Youtube etc.

Cost:

Axure Standard $289/license

Axure RP Pro $589/license

UX Prototypes, Specifications, and Diagrams in One Tool

Pixate

A visual prototyping platform that allows designers to create fluid mobile prototypes that run on iOS and Android devices. The desktop app  is free and connects with Pixate cloud accounts for sharing and collaborating prototypes. New features for Studio coming soon, including canvas zoom, easy duplication of animations across layers, and audio & video asset support.

Cost: Free

http://www.pixate.com/

IPhone 6 Vector Illustration Tutorial

Step 1

The easiest way to replicate an image is to have it side by side to your own illustration. This will help you refer back to the image quick for specific details. I downloaded a PNG file of an IPhone 6 and opened it to my artboard. Make sure to pick a high-resolution image to have better view of details. Lock this layer and name it “Reference”.

Step 2

Open a new Layer named “Vectorized”. Using the Rectangle Tool (M), draw a rectangle over screen of the phone. Lowering the opacity will help match the shape. Afterwards, round the corners by going to Effects > Stylize > Round Corners using 0.04 inches (or 38.4 pixels). Move the rectangle to the side and rename the layer.

Step 3

Using the Rectangle tool, draw a rectangle over the Iphone but not including the metallic surface. Add a 1pt. stroke to the edges of the rectangle, and round the corners using 0.375 inches (or 36 pixels).

Move the shape right behind the drawn rectangle screen. Using the color picker, change the color of the body of the Iphone shape to the color from the reference image. Change both the body and the edges.

Step 4

Manipulating the shadows and gradients will help add depth. Click on the body layer, go to Effects > Stylize > Inner Glow set on 60% Opacity, Blur 0.1 inches, and clicking on edge.

Step 5

Working on the edges of the same layer, click on the Gradient Tool (G). I created two color swatches that were from the previous colors I used for the body and edges of the phone.

To create a color swatch, use the Color Picker Tool to pick your color and at the very top left corner of the panel locate New Swatch. This way you will be able to refer back to these colors when manipulating gradients.

Manipulate the gradients replicating the shadows from the referenced image using your color swatches. To add more depth, I added an Outer Glow that can be done going to Effects > Stylize > Outer Glow.

Step 6

Using the Rectangle Tool, the overall shape of the phone that includes the metallic surface. Round the corners with 0.375 inches (or 36 pixels). Name the layer “Metallic”.

Put the Body layer over the Metallic layer. Align both layers to center and using the Pathfinder select Exclude. You will have the metallic frame of the phone left.

Step 7 

Put the metallic frame the phone over the reference image. Lower the Opacity in order to divide each section of gradients. Using the Line Segment Tool (/) drag it over each section. Once all lines are drawn, use the Pathfinder and select Divide.

Select each portion of the frame using the Direct Selection Tool (A). Use the Gradient Tool to replicate the shadows.

The frame should look like this.

Step 8 

Elaborate on further details using Gradient Tool to manipulate the colors.

Camera

• Draw a small black circle with a blue outline
• Draw another circle larger with a radial gradient in the center

 

Home Button

• Draw a circle with a gradient outline

Step 9 

Group each section together. Set the Opacity low and transfer over the reference image. Adjust each part to its position.

 

Final Results

Week 5: The Narrative

This week, the research team re-introduced a more complex purpose. Within their brief included a backstory of Jack. After discussing with UI/UX and the research team, they reccomended we expand on the narrative to have a clearer understanding of the bar.

Research Group

WHY:

We as humans have for so long referred to ourselves as entering the technological age, but, in fact, we are in it…and have been for some time. Technology has so seamlessly entered our lives that we aren’t quite conscious of the far-reaching effects it has on us. There is this paradox that we live in where we crave more human-to-human interactions, yet devices and systems facilitate the majority of our interactions. So now we present our question:

Q: Are we (humans/users) losing control of technology?

A: No! We still have control over technology and we are going to make you (user) aware of that.

The story of Jack:

JACK (Just-in-time Analytic Control Kernel) is an artificial intelligence developed in secret at Bletchley Park in the 40s and 50s. He was scrapped in the 1970s but was recently found in a Toronto warehouse and put in charge of a bar. Running in isolation for decades, he’s gone a bit loopy. He’s become a control freak with an overwhelming desire to “help” his users.

 JACK’s personality recalls both technology from the past as well as the quirks of more recent AIs like SIRI and Alexa as well as fictional AIs like GLADOS and HAL9000. JACK gets users to think of the place that technology plays in their lives, the often alienating, inhuman quality of interacting with “smart” technology.

 One of JACK’s subsystems is the lighting and audio system for the bar. Using Philips Hue Wifi enabled lightbulbs along with MAX/MSP and Arduino, we can divide the space into dark, quiet areas and brighter, loud areas. These areas can move over time based on bar patron movement and noise patterns, encouraging users to get up and dance or interact at times, and take breaks for more intimate interaction. JACK’s peculiar personality can be expressed through this system in interesting ways, such as through flickering lights and stuttering audio.

Our group discussion:

Who is Jack?

• Jack is an artificial Intelligence defect created 70’s that has limited memory and learning experiences due to its hardware.
• It was beyond its time when it was initially created and surpassed the expectations of the capabilities of technology then
• Because of IOT, Jack is brought back to “life” to be properly used.
• It is presented through the aesthetics of modern technology while keeping its outdated core.
• Jack is represented through the space provided and each feature is his “body part”/function.
• The interaction with the user reflects Jacks response (affirmative, negative, thinking, confused).
• The users interaction with Jack, the environment, is part of the narrative of the modern humans’ high expectations of technology

Visual Inspiration (audio sounds, bar aesthetic)

• Old technology mixed with modern technology (analog/retro)
• Lite-Brite
• Programming screen -black and green screen
• Dial Up sound – >https://www.youtube.com/watch?v=gsNaR6FRuO0
• Time-period references – 60’s/70’s

 Backstory of Jack’s inventor

Group Discussion Main Points

• Young programmer
• She lives in a small town
• Restricted human interaction
• Neglected all her life
• Craves attention as she ages
• Experienced a traumatic loss which inspired her to create an AI as a significant other.
• She learns how to develop an AI.
• Jack is a well-meaning helpful AI with a kind demeanor.
• She realizes it’s impossible to recreate an exact replica of her husband as an AI.
• This is due to technological limitations.
• She continues to use and work on Jack until she passes away or has to move away.
• New owners of home discover Jack and see him as junk and dispose of him.

 

 

 

 

 

 

 

 

Week 4: Precedents

This week we were refining our ideas based on the given purpose. We decided to add a gamifaction component within the bar that promotes more human-to-human interaction. We will accomplish this by:

• group related tasks/goals successfully down will descrease drink prices
• mosaic touch screens – communal space
• tables built in sensors (drinks, scantrons, activities etc.) that incorporates activities for groups of people

Projection Mapping 

Projection mapping can be incorporated in numerous gamification and interactive components of the bar. This will increase user interaction with the environment and also send a clearer message of the bar through the projects content.

A Designers Damsel In Distress Guide

Do you ever just stare at your blank screen desktop and realize your overcrowded desktop, never ending junk mail, old post-its posted on your cork board detailing your errands from two years ago? As you’re just about to step on a thumbtack, don’t you worry we have all been there-still am. A designer is a broad term that can be categorized in a wide array of creatives ranging from illustrators, game developers, architects, painters and the lists goes on. The common thread of all these fields is the never-ending cycle of potentially catastrophic outcomes such as creative breakdowns, writers block, deep-depression-from-not-backing-up-a-project-file. Whatever your reason is, there are ways to prevent them from happening in the future by simply practicing these tips

1. De-clutter the Unnecessary

As a self-proclaimed hoarder I can attest to the detrimental effects of over collecting, piling, and trying to find personal attachment towards things out of thin air. Often you may not be aware of the clutter surrounding you because of how accustomed you’ve been.

Highly noted unnecessary items are:

• Files/Documents that are no use – unnecessary paper can be RECYCLED easily
• Broken electronics (chargers, damaged phones, random wires)
• Large decorations taking up space, empty paper bags, meaningless “memorabilia”

A simple start to de-cluttering is identifying items that have not been used or served any purpose for a long period of time, down to items not used on daily basis. This will only leave essentials that will make not only your workspace clear but your mind as well.

2. Treat your workspace like your first born

Your workspace is a sacred space that is home to your tools, ideas, and creative process. Therefore it is only fair to take good care of it. Although it is easily said and done, it is possible to maintain an organize, productive, and aesthetically appealing workspace.

For the most part of last year my workspace consisted of wrinkled paper, wires, bubble gum wraps, lindt roller, and on a good day my laptop. It took me about a whole day of going through Pinterest and later on shopping at Homesense to motivate myself to organize my workspace. Referring back to the first note of de-cluttering unnecessary items, I got rid of old and worn out items and replaced it with new prettier things.

• have a plan – know your essentials and build from there
• incorporate items that are both useful and appealing that will make you want to work all the time (once again, Homesense is great. Cheap and pretty)
• be practical and organized- have extra storage boxes and files for the rest of your items

https://jabaayave.wordpress.com/tag/office/

http://www.ohmydalia.com/project-office-space/

 

3. Leave Uncommitted Relationships – Junk Mail, that’s you

As designers, we are exposed to numerous softwares, platforms, accounts just to name a few. Therefore it can easily become overwhelming when bombarded with software updates and constant emails. That is why it is important to keep track of everything you are actively on and as well not on. This entails:

• unsubscribing non-useful emails
• deactivating irrelevant accounts
• managing and updating accounts and softwares currently used

4. Positive Pete’s Over Negative Nancy’s

Who you surround yourself not only says a lot about you but also what you produce. Being around  positive influences that will motivate you to reach your full potential as supposed to people bringing you down will translate through your work. Ways of finding positive influences are:

• Networking and connecting with people with similar interests and goals through mutual connections
• Networking and connecting with people with similar interests and goals through events
• taking classes/courses of interest
• reaching out to more accessible (local) inspirations through e-mail, writing, events

5. Stay Inspired

What drives all designers is inspiration. Always find time to explore, try something new, or even revisit an old passion. Never loose your child-like curiosity of being in awe by constantly searching for something amazing.

Week 3: Ideation & Insipirations

This week is a continuation of our ideation process. Our tasks were divided into four categories: Purpose and Research, Environment, UX/UI/Tech, and Storytelling/Narration/Asset Creation.

I am part of Storytelling, Narration, and Asset Creation. Our task is to figure out how to successfully  communicate the message and experience we want to through:

• the medium and technology used
• user-envrionment-technology interaction
• user-user interaction

Our initial process was figuring out the overall narrative of the bar. What is the reason people would go to our bar? What will keep people staying at the bar?

• game infused experience
• self-customized drinks

• embellishing on Jacks history through the environment and the customers experience
• weekly/monthly themes (different time periods in jacks life)

We then focused on exactly how the message is going to be communicated. What technology will be used to successfully embellish our narrative? How will the technology interact with users and the environment itself?

• trending drinks, trivia, set menu etc. projected on large screens
• hidden screens incorporated in artifacts
• old meets new (can-string communication, note passing)
• augmented reality incorporated in viewing ordered drinks

Afterwards, we created a journey map mapping out the overall experience a person or a group of people would have when going to Hi-Jack.

All the of groups afterwards presented their ideas. Some of the ideas presented were: incorporating gamification aspects, going against against Jack, apps, decreasing drink prices when certain tasks occur

Immersive Environment Restaurants for inspiration:

Speakeasy Ebony Restaurant

These immersive restaurant experiences demonstrate that consumers are looking for more than just a quality meal when they head out to eat. Indeed, many restaurants are starting to look beyond their menus to try and offer patrons a multi-sensory dining experience.

 

Ebony Restaurant

Additionally, the table’s embedded screens can be used to read the news, watch videos, check social media feeds and share photos and greetings. Once you’re done your meal, you can even use the screens to order a taxi to get you home. Ultraviolet by Paul Pairet – Immersive Dinning

 

Week 2: Final Project Pitch “Hi-Jack”

This past week, the post-graduate students pitched their ideas for our year end final project. Their idea was to build an interactive bar/lounge that incorporates various interactive components for a more engaging user experience, naming it Hi-Jack. The initial idea for this project is to incorporate outdated, old, and raw materials with new technology; hijacking old materials to make them new again, hence the name Hi-Jack.

Some of the features mentioned in their presentation included:

1. Mosaic Projection
2. Hidden Screens
3. Augmented Reality
4. Sensors

Thoughts

Combining outdated and raw materials with new technology is a great idea to balance the overall atmosphere. The overall aesthetic of the bar I think is quite interesting and a well balanced juxtaposition. Features that appeal to me personally are:

• hidden screens – having hidden screens embedded in artifacts, tables, and etc. can increase the customers interactivity in the bar.

• mosaic projection – this can be used for projecting content the user wants to, game infused content can be projected, historical facts of the character Jack can be posted on this mosaic

The features mentioned for the bar/lounge on its own is interesting and engaging on its own but incorporated all together might be too much. It wasn’t too clear why each feature was picked and how it will exactly work, besides the sole reason of it being interactive. If there were a narrowed down and concrete purpose for the features, I think will gravitate more people and make the experience more memorable.

Ideas and Recommendations

As someone who would prefer to stay at home watching videos of corgis jumping on couches, I personally think of how to make a more engaging, different, and interesting experience for customers. For instance, some personal issues I always have when going to bars are:

• taking too long to get a drink at the bar
• not having an accessible drink menu
• overall not being interested being at a bar

Focusing on fixing reoccurring issues of customers while a incorporating a unique experience can elevate the success of the bar. Kristen and I reflected on our experiences on going to bars and how it would make it more enjoyable. Incorporating the interactive component we need to have, some of the ideas we came up with were:

• customizable drinks (incorporating the mosaic projection or screens on the tables)
• customer interaction (being able to know what the customers drinks are, socializing etc.)
• accessible drink menu (have a set menu on each table/projection)

Overall, I think the idea behind the immersive project has a lot of potential to be successful. As a collective, we need to narrow down our ideas and focus on the purpose of the bar and work specifically on the features afterwards.

-AA

 

 

 

 

 

 

 

 

 

 

Week 1: Medium is the Message

For the past couple of weeks,Marshall McLuhan has been a reoccurring topic in most of my classes. Rightfully so, his insight is highly helpful for us as Interaction Design students.

Marshall McLuhan coined the phrase “Medium is the message.” Meaning that the medium in itself is the message as supposed to the content. This way of looking towards the world can change how us designers create things. Certainly, it has opened my mind to be more aware, which I believe to be the point.

Our program will be joining with the post-graduate students to create an immersive environment. In aMcLuhan fashion, we are approaching the immersive environment as the medium and the people as the content. We have been told that we are going to be creating an interactive bar which I think will be an interesting challenge. There is a wide range of possibilities that can come out of that idea and am looking forward to explore them these next couple of weeks.

-AA