#rainbowradar

[ourhappymediums]

Rainbow Radar Keynote Prototype

Here’s the prototype of the Rainbow Radar app I've made for IXD303 Designing User Experiences.

[ourhappymediums]

Rainbow Radar Design

Connected Product

So for part of the IXD303 module, we have to think about how our weather application could become a real-world object and use the IoT (internet of things) technology to connect to the weather API and data, in order to be a physical connected device.

My idea for the connected Rainbow Radar device is a wall-mounted circular rainbow device.  The device itself would be either made out of perspex or glass, and be connected to your homes wifi router via an Arduino.  

The Arduino would be programmed in a similar way the javascript would be within a HTML website, and pull the current daily weather data, once in the morning, once in the early afternoon.  This should provide accurate weather data for the device.

How the device then works for the user is that the device subtly lights up using connected LEDs, the more chance of rainbows (based on weather conditions) and more rings light up, eventually leading to a full coloured rainbow, if the conditions are just right.

[ourhappymediums]

Rainbow Radar

Cross device compatibility

Thinking about how the Rainbow Radar app would look and interact across devices, I began thinking about how it would appear on a smart watch, particular what type of interface change would have and what features should be included, and what needs taken away.

I decided that a simple push button activation of the apps main feature would be suffice for the user, so as the app loads up, the user is introduced to the big red rainbow button.  Once this is pressed, then the button screen flips over to the main radar scanner, which scanner for about 1500ms, after which the weather icon will appear via fade & scale.  Once the weather icon appears, Terry the unicorn then pops out with a small message about the current weather and if its ideal enough for rainbows.

[ourhappymediums]

IXD303 Designing User Experiences

Overview

The IXD303 module of the this has made me think a lot about UX design and how it could, and should, be integrated into the technology, products and services in which we use.

Although I was not able to complete a final build for the project and produce a finishing working application, the entire experience I can say has still been a positive one.

The main aspect of this project was to design a new weather app, using weather data that can be gathered using an API.

I researched the technology available and discovered that you could potentially build a rainbow detection device via the following:

Geolocation via GPS

OpenWeather API (for current / forecasted weather data & UNIX timecode)

Google Maps Elevation API (for topographic / Elevation data)

Javascript / Jquery (for retrieving data from API, publishing to HTML)

SunCalc.js (for suns position in the sky)

HTML & CSS (for design, layout, animations, micro-interaction)

Bringing all that data together and making it working is currently above my experience level, but its something that I will continue to work on and grow my skills as part of personal development.

Designing the Rainbow Radar

I decided to focus my attention on designing the user experience for the weather app, with my primary goal, designing a fun, unique weather app experience thats suitable for both kids and adults alike.

I designed the interface based on old radar systems from world war 1 and world war 2, as I wanted the interface to look and feel as if this was a real-world object, a tangible product that you could actually hold and use.

Another feature of the design was to include all seven rainbow colours within an appropriate colour palette that wasn't too visually striking and had a more subtle feel to it.

I decided to go with a old-school metallic style radar system, that would be contain the seven-colour palette, helping subdue the colours and make them more visually appealing.

I really wanted to focus on how this device would be interacted with in the real world, and so I decided that the interactive content should look and feel how it would on a real device.

I had been working on my skew-morphic illustration skills throughout the IXD304 - Creative Entrepreneur module and felt it was the best style to work with in order to bring this design to life

I initially designed the desktop interface, with the idea that this was a large device, and focused on making the navigation and interactive elements fun and intuitive.

After research about designing user experiences and interfaces for children, I found some really great resources that helped a lot.

https://www.nngroup.com/articles/childrens-websites-usability-issues/

https://www.smashingmagazine.com/2015/08/designing-web-interfaces-for-kids/

https://www.smashingmagazine.com/2009/11/designing-websites-for-kids-trends-and-best-practices/

https://www.smashingmagazine.com/2016/01/designing-apps-for-kids-is-not-childs-play/

http://rosenfeldmedia.com/design-for-kids/designing-for-8-10-year-olds-p/

Designing User Experiences

I’ve really enjoyed completing this module, and I feel its helped me out find my our illustrative style, and really think about what user experience and UX design really mean.

Sadly I was not able to complete a working prototype using HTML, CSS & JS, but this is a project that I will continue to work on over the summer in order to complete it.

I think the final design, UX, and interactions I've built into the Rainbow Radar really allow it to stand out from the crowd, and as a mobile/tablet application, I would really like to see this appear on the marketplace one day.

[ourhappymediums]

Rainbow Radar Design

Some concepts for the Rainbow Radar

[ourhappymediums]

Rainbow Radar Design

The Rainbow Radar Style Tile

For the Rainbow Radar branding & identity, I’ve went with the full colour palette of the rainbow, creating 7 distinctive rainbow colours that I think work really well in the project.

The logo, a big bright circular rainbow, I think stands out really well as part of the Rainbow Radar identity and uses all the colours of the palette. The branding of the device, Rainbow Radar 9000, is inspired by the 2001: A Space Odyssey computer, HAL 9000.  

The typography really brings this home by using the ‘HAL’ typeface by Kyle Robinson, which can be found at:

http://freetypography.com/2016/12/11/free-font-hal-typeface/

I’ve designed the buttons to have a slight skew-morphic design, adding 3D visuals to a 2D platform.

With the icons for the device, I decided on cute and cuddly, and went with illustrated weather icons that have their own personalities.  The main illustrated graphic for the application is ‘Terry’ the Unicorn, a clumsy, goofy looking unicorn that pops up now and again with alerts, tips and notifications.

[ourhappymediums]

Rainbow Radar Research

Lovely CSS animations for LED interactive buttons

https://www.bypeople.com/active-led-css-button/

[ourhappymediums]

Rainbow Radar Research

A really great demo on building interactive knobs with javascript

http://anthonyterrien.com/demo/knob/