CODE / WORDS UX Series: Lesson 1

Okie Dokie… I have officially attended my first ever Tech/web development/hipster class, and I just gotta say: I Love it.  This is an entirely new world for me, but I can tell already that it is a world that I belong in, and that itself is an uplifting feeling.

So as I said in the first post, the first 4-week class that I’m attending is called UX Design. Ux, or User Experience, Design (so far) is a little bit less about the actual ‘nitty gritty’ coding and developing side of tech (that will come), and more about the conceptual design of products and how users interact with them. Again let me iterate that:

<UX Design is about understanding how and why a user interacts with a product>

It wasn’t until I started chipping away at tasks during the class that I realized how much I really love this part of the tech world.  I love to conceptualize, draw conclusions, empathize with different types of people, and make changes based on observation… this is a LOT of what is involved with UX Design. It requires you to ‘think outside of the box’ and explore designing things in ways they have never been before, for the benefit of ALL users.

—————————————————————————————————————————————–

Now that we all generally understand a little bit more about what UX is, I will [try to] explain a few key concepts to you, mainly so that I can keep them documented in my big, fuzzy noggin’.

Like  I said above, UX is really all about Interaction.

The 3 elements that are key to interaction are:

-Discover

-Understand

-Use

In other words… how easy it for the user to do the above three things.

One must remember this when designing a product: WHO is your user. If your user spans multiple generations or cultures, then you will have to scale your product to be easy enough to discover, understand and use. Conversely, your scale of these three elements would be completely different for a product that is designed for mostly the millennial generation.

Another simple but powerful concept to follow as you design is Form Follows Function.  There is absolutely no purpose in having a final product that looks pretty if it doesn’t perform the function that it was intended to effectively and efficiently.

Ok, to all those following along, thank you! I know this is all kind of a lot, but I hope you enjoy hearing what I am learning as much as I enjoy trying to explain it.  I am actually leaving out quite a bit of more in-depth, technical terms and concepts, but for the interest and purpose of this blog, they aren’t really necessary to express here.

Now our instructor, Tim, gave us a homework (haven’t heard that in a while) to complete and present in class today…

The task assigned was to design a touch screen thermostat that would be used in Sheraton Hotels worldwide.  Keeping all of the concepts we’ve learned in mind, we were supposed to design the product to be more effective, efficient and easy to use than the thermostats most hotels today use.  I’ll let you take a peek at my very, very, rough storyboard (<– important word) below:

FullSizeRender 2
This is V1… simple, scaled down. disregard the, ahem, shape of the thermometer.

So in version one, I had all of the touch pad options already printed on the screen and you would simply select the function you wanted at the time.  The thermometer is a ‘slider’ that you would actually use your finger to set the temperature.  Also, if you look closely in your upper right hand corner, the thermometer has the ability to toggle from Fahrenheit to Celsius… remember I am designing this for Sheraton Hotels Worldwide!

FullSizeRender
This was V2 after thinking through a few limitations of V1.

Version 2 took what V1 had and tweaked it a bit… thats what versions are all about btw!  I consolidated things a bit by making the function and fan buttons a ‘drop down’ menu that appears when you tap the button, eliminating some of the clutter from before. I kept the thermometer but sized it down a bit to fit more data on the screen.  I kept the Fahrenheit-Celsius toggle, but made it a drop down as well.  I added the ability to choose different languages for the text (worldwide usability).

I put a small window in the bottom left that shows all of your selected settings in a more ‘readable’ form for those who don’t get the ‘spread out’ version.  The box to its right tells you the real temperature data of the room, and outside (which I think would be great to know!).

I added a ‘preset bar’ along the bottom left border, that allows the guest to save their desired settings for later use.  The user simply holds the number until they hear a beep, just like setting presets on the radio! Finally, I added an alert button for when the system is acting up, and this would send direct alerts to the hotel and the maintenance staff that assistance is needed. No more annoying calls to the front desk!

FullSizeRender 3
This is Sheraton Air, the corresponding app the guest would use.

This simple phone app would be available for the user, but of course is not required.  If the user decided to use the app, they would simply enter in their last name and room # and the app would automatically sync up with their room’s thermostat.  Any presets would be available in real time to the user, or they could change the temperature of the room remotely through tapping and swiping.  This would be so great for people who turn up the air to save energy while they are out, but want their room to be comfortable for them when they return… They could simply save their temperature preferences as a preset, then load it prior to returning to their room!  I personally want this to be a thing… like now haha.

 

Alright y’all, that’s all I have for you in Lesson 1 but I truly hope you have enjoyed me rambling about this cool thing called UX! There will be SO much more to come and I look forward to sharing it… As always, let me know what you think in the comment section below!

Cheers,

Eli

One Reply to “CODE / WORDS UX Series: Lesson 1”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s