Designing an intuitive dashboard for IoT Products

Smart homes are soon becoming a more acceptable norm of society now with devices such as Amazon Echo, Google home, Alexa etc. But it is not just the technology that makes these products a massive hit among customers. A lot of thought has gone into designing such user-friendly IoT products.

As a product engineer or a UX designer who is working on an IoT project, your main focus is centered on creating and designing a product that brings immense value addition to your client.

One of the most crucial designs in IoT products involves the look and feel of an IoT dashboard which serves as the touch point for the user to interact with the device.

In this blog post, we are going to talk about the 4 steps involved in designing an intuitive dashboard for IoT products.

1. Break down the User Journey:

Take this a thumb rule – before you even get to the stage of picking up your pencil and sketch pad, spend some time to research and understand what kind of IoT product are you designing for?

It could be anything ranging from a smart system that controls the lighting of the house to a smart refrigerator that sends updates on the grocery list or a super efficient home locking system.

For better understanding, let us take the example of designing an IoT dashboard for a smart refrigerator that allows the user to track the details of grocery items and to set up reminders in the user’s mobile to stock up items.

Now, before we get down to designing this dashboard, as a product designer you first need to understand the underlying technology that will be used by the refrigerator such as, what kind of sensors would be triggered, what kind of data will be recorded, how will the data be analyzed etc.

Your job is to represent this underlying data in an intuitive manner. This is where your creative mind kicks in and is expected to think about the user journey and different use case scenarios. Also, while designing it is very necessary to be mindful about the target audience who is bound to use the product.

In the above example, the smart fridge is going to be used by a household which would include:

• a family of 4-5 members
• the users could be aged between 24 to 55 years
• the user could be either male or female
• pet-friendly house

Now based on the above user scenarios, you will be able to sketch out different user journeys.

2. Create the Skeleton with Wireframes

This is the fun part because here is where you actually visualize each and every action of the user. Some people call the wireframe stage as setting up the blueprint of the design and functionality of the product.

Now, when you are designing the dashboard of an IoT product, it is necessary that you visualize each and every step of the user and jot them down into squares, circles, and triangles. The key here is attention to detail. Step into the shoes of the user and think of the ways he/she will use the product on a real-time basis. Document scenarios that are not so obvious but have a probability to pop up.

In this stage, you also get to logically test the flow of user actions. Yes, ‘Logic’ is the word here. Don’t just go by your gut or instinct, you need to think if the steps in your wireframe make logical sense in the bigger picture. Sketch out as many possible scenarios here. Do not restrict your mind to – ‘this is it’! Explore different options and also be conscious to capture different user emotions while sketching the wireframes.

Don’t just put a button because it has to be there. Think of how you expect the user to navigate to a particular page such as – to check the grocery stock, to get alerts on food items that are running low on storage, setting timers for bakery products etc.

Once you have a gamut of ideas, sit down and evaluate the best possible user flows to create an unparalleled user experience (UX). This is the most important part of the whole designing process and so it is imperative that you get it right. The UX is the make or break deal for the success of your IoT product.

3. Bring your Product to life with Visual Designs

For all those creative artists out there, this is the stage where you need to find the Picasso inside you and splash those colors into the wireframes. But don’t just add any color – keep in mind factors such as color psychology and branding guidelines (if any) while choosing the colors.

Let us go back to our example of the refrigerator dashboard and see the kind of colors we could use.

It would be advisable to use a lot of white space in the design to give it a neat and easy user interface (UI). Also, depending on the USP of the overall IoT product, either blue or green could be a great choice of color for a dashboard.

If the highlight is more on the technology, then blue would be an ideal choice as it showcases intelligence and is a color that is most commonly used with electronics. But let’s say if the USP of the IoT product is to highlight health or any environmental benefits, then green would be an excellent choice to complement the messaging. Also, colors such as red, yellow and green can be used to indicate any functionality features to the user.

So, in a nutshell, while you are creating the visual designs keep the end user in mind and choose colors that are able to communicate instantly with the user.

4. Test your Designs – Time to Prototype:

This is the last and final stage of the design process where your designs are put to the ultimate test. With the help of many online tools such as Adobe XD or Invision, you can test your designs in real time and showcase the functionality to your clients.

This real-time feedback helps you to iterate designs on-the-go and incorporate all feedback at one point. It is important that all designers prototype their designs since quick and responsive designs translate into happy clients.

Thus, designing for IoT products can be slightly different from creating mobile apps and websites as User Experience is the key here. But with the above-guided approach, you can be assured of designing a vibrant and intuitive dashboard for IoT products

Designing for Artificial Intelligence

A new age design manifesto needs to grow beyond its traditional scope. As an outcome, it needs to factor in the growing space and time ecosystem enabled by new age technologies like Artificial intelligence (AI) and robotics. Hence the design principles of the past have evolved significantly to include new policies and principles.

Interested to explore what these new age design principles for AI are? Then read on..

1. It solves a real life human problem

The modern day design principles around AI should focus on solving a specific human problem. Going beyond the buzz and hype, a well-designed AI system has to concentrate on resolving a human problem (for e.g. delivering true value in service or product). The intent has to come out clearly when looking at using design to increase the value proposition of the AI system.

An example is the supportive body suit from SuperFlex. It mimics the natural body and muscle movement and helps out elderly people who have muscle or bone issues preventing them from carrying out routine tasks like moving hands or standing up.

2. Design for AI need not follow historical context

As mentioned earlier and as depicted by the emerging design trends, design need not conform to historical context. With new technologies it is obvious that design too needs to move beyond what we have experienced in the past and open our eyes to something totally new. This is essential when designers are working on truly ‘smart’ objects and should not be limited to just AI-based robots.

3. Design needs to understand the utility value of AI

AI was never designed or promoted to replace humans. It was instead designed to add value to human lives and make it more efficient/productive. If designers keep this basic difference in mind the resultant AI system would have better success potential in the market. When you are brainstorming for design ideas you need to ask yourself “Can AI  complement human lives rather than replicate it?”

4. Good AI Design needs to help everyone

A smart AI based product needs to be embraced equally by the tech lover and the senior persons of the family. Typically it is seen that one person who brings the system inside the house loves it while others aren’t easily swayed by its prowess. Designers need to figure out how they can have the entire household to get to use the product and derive benefits from it.

5. Good AI design doesn’t get in your way

A designer needs to understand that the AI product has to be subtle and discreet in its functioning so that it delivers a stellar experience without getting in your way. Such a well-designed AI system needs to generate subtle signals about the action being performed without disturbing the activity that you are doing.

August Smart Lock is one good example here.  It allows the user to unlock the door automatically when he/ she is nearby. You need not stop to take out keys from the bag or retrieve the smartphone from your pocket to unlock the door.

To conclude

With these principles in place, designers for AI systems will be in a truly remarkable place in the near future. This will be important as design will definitely be playing an increasingly influential role in building complex Artificial Intelligence solutions and systems.

The Design Thinking Approach

Even though Design Thinking has been there for many years now, the aspects related to this commendable process have now evolved. And, the primary reason behind it is the gradual increase in online products and services.

As we know that Design Thinking is not just a way to deal with the design of a product but is a platform to create a complete brand for a business. With the advancement of technology, new methods have been introduced for keeping up with a proper Design Thinking process that may help in creating a better product. And, the new aspect has encompassed an ideology for the betterment of digital products and services as well.

• Focus on the emotional side of user’s experience

This aspect is not a new one. Building up user’s experience with a touch of emotion has been termed as empathy where a design thinking process uses the experience of the consumers to understand what they need and want. Being an emotional aspect, it is harder to deduce in terms of quantitative values, but it does reflect a powerful message over a customer who is looking forward to get a new product or service from you. It is believed that a product or service that is connected with the emotional sides of its user is more likely to perform well in terms of sales.

• Designing of diagrams for solving complexities

Design thinking process has been widely used for developing physical products so that their intangible and complex issues can be removed while researching. Even for services, design thinkers use physical models such as blueprints, data flow charts, diagrams, etc. to communicate, define and explore with other thinkers and solve any problems that may occur with the service. The aspect is still quite practical in the current world for the betterment of products.

• Using Prototypes for Design Thinking

Another aspect that has been a successful implementation for designing quality products is the use of prototypes. Whenever a new product or service is to be created a prototype model is created for better understanding. While diagrams are capable as well, a prototype offers a much more space and functionality with which design thinkers can communicate and end up with various solutions to any comprehensive situations.

Moreover, prototypes are a good way to interact with users as well. A model that has been created for demonstration tends to let users understand what the product will be used for and what benefits it would provide to them. In addition, a prototype model that can be demonstrated in front of the audience is a far better way of communicating than a complicated diagram.

• Failure tolerating culture

Design thinking process considers failure of designing a product as a learning step to achieve a better one. Even the best of companies have failed in designing products and services once or many times in their business period. And, there is no shame in failing in this aspect.

Creating products and services in the current scenario is not that different from how it used to be in the past. You will find that most aspects are just an evolved versions of the Design Thinking process that have been used in the past. Nevertheless, all these aspects are built to help create better products.

What is the Design Thinking Approach?

Embracing designing thinking means understanding that the customer is a real person with real problems, rather than a sales target. Instead of traditional market-research data, design thinkers dig for data that are user driven and offer a deep understanding of a customer’s sophisticated needs. Design thinking helps reframe questions in a way that expands the boundaries of the search itself.

“Big businesses can be really offensive, demanding a level of efficiency that is good for today but bad for tomorrow. The pressure is relentless, but the battle is often uninspired.”

The need is to inculcate a way of thinking that can spur inspiration and innovation even in the most traditional of workplaces. It is called design thinking, and it’s simply a different approach to problem solving. Design thinking nurtures creativity, which is not as random as you think.

Let us take the example of Procter & Gamble who were hellbent on improving detergents used to clean floors. That particular focus was limiting. Design thinking pointed out them to a better answer, a better mop. And hence was born the unique Swiffler.

It is all about structured brainstorming, which uses the data collected during the discovery phase as input, then converts output into something valuable.

Design thinking works to make marketplace testing practical by engaging customers in the act of building a new product. You need to create as vivid an experience as possible. You are engaging the customer to get at their needs. It is not a dress rehearsal. Unlike traditional marketplace thinking, design thinking expects to get it wrong. You experiment and then you figure out why it works or not. The goal is to fail early to succeed sooner. Actively look for data that proves the product will not work. It is valuable information for saving money and zeroing in on how to make products that do work.

“Design Thinking” is a design methodology primarily branded by the product design firm IDEO. It consists of both a process and a set of values.

The process is generally defined to be:

1. Observe: This phase is dominated by “needfinding,” a process by which designers go out and observe users participating in activities that inform the area in which you are designing. This can include just observing, or interviews.

2. Understand: Analysis of the data collected through observation, attempting to understand the user’s deeper motivations, feelings and values.

3. Define: Define a point of view (POV) on the problem, that directs your understanding of what you are trying to design.

4. Ideate: This generally consists of a variety of brainstorming techniques to come up with new ideas.

5. Prototype: Build out ideas in a physical form.

6. Test: Bring your prototypes to users to get feedback to revise and adjust your prototypes.

Design thinking dispels the belief that only someone special can part the seas and create like the “Moses Myth.” It arms even the most traditional thinker with ways to blossom creatively. Those include tools that allow to see possible future conditions to journey mapping that is nothing but assessing things through the eyes of a customer.

Another well-recognized image of design thinking is the brainstorm, complete with post-it notes and whiteboards. The list of “brainstorming rules” often used by design thinkers is as follows:

1. Defer Judgement: This is the grand poo-bah of brainstorming rules in a design thinker’s mind.

2. Quantity over quality: Hand in hand, rather than try to come up with the BEST idea, just go for whatever comes to your mind.

3. Encourage wild ideas: Write down everything, even the wacky ideas that would never work (you never know what would spur someone else).

4. One conversation at a time: Don’t talk over each other, read out your ideas, and listen to what others are saying.

5. Build on the ideas of others: Intake ideas and keep the useful ones.

6. Warm-up: start with a small exercise to get people’s minds working.

7. Visualize it: Don’t write it, draw it. (see above in the “be visual” value)

8. Provide focus: this is where the POV (point of view) becomes useful – by focusing your brainstorm to come up with good ideas.

So, the question you should ask yourself is: ” What is design for you? The way it looks or the way it works.”

5 micro interactions that enhance UX on iPhone

Have you wondered why Apple is a world leader when it comes to product durability and design. As many experts have pointed out it their ability to solve general problems and a great eye for even the minutest detail.

We bring to you 5 such features from the iPhone that stands out and makes the iPhone a design inspired phone.

1. The Flashlight Icon

Check the flashlight icon on the iPhone ‘Control Center’ menu. Observe how the button on the flashlight icon is set to ‘off’, now see what happens when you touch the icon and turn on the flashlight.

The small button on the flashlight icon goes up, indicating that the flashlight is now on.

Here is a side by side screenshot:

2. The Portrait Orientation Icon.

Like the flashlight icon, even the Portrait Orientation Lock icon changes accordingly. 

3. The Clock Icon

The clock icon on the iPhone home screen is a real time working analog clock.

4. The Weather App

The native Weather app is a classic example of attention to detail by apple.

On a clear sky day – you’ll see those one off clouds hovering the sky on the app.

On a cloudy day – you’ll definitely see those thick clouds.

On a rainy day – you’ll see the rain fall graphic along with lightning if there are chances of one.

5. App Updates

For simplicity and innovation Apple has built have built a beautiful synchronization design for the App update in the App Store and on the Actual App.

Update your App:

Now look at the App at the same time :

Attention to detail is what sets Apple aside as one of the most respected technology creators in the world. Apart from world class design and product durability, such features engage and amaze the customer.

Photoshop hacks to help you design better

Without question, Photoshop is one of the most preferred and most favorite image editing software for graphic designers, digital painters and photographers alike. With each revision, Adobe adds more power to the program.

In this article we will be looking at 5 tips and tricks you can use in Photoshop.

1. Surfacing the new features

One fast way of getting up to speed with the latest changes is to go to Window>Workspace>New in Photoshop CS6. This closes all the panels and replaces them with the above section with a panel showing all the new features.

In addition, if you now return to the Window menu, you will see various features highlighted as in the screenshot below:

2. Making bitmaps bigger without blurring

In Photoshop CC a new feature allows you to increase the size of bitmaps with negligible quality loss. In the past, one could increase the size of an image, but it would blur and artifacts would become visible.

To activate it, go to Image>Image Size. In the screen shot above, note the Re-sample option at the bottom of the dialog box. This gives you many options for controlling the quality of the image as you increase the size.

3. Blending Options

If you right click on a layer in the layers toolbar, and then click blending options this will bring you to a whole vast array of effects that will keep you busy for hours. Use these options very sparingly.

4. Removing People from Your Photos

Take at least a dozen photos in your ideal spot, the Too Many Adapters blog recommends. Then head to Photoshop and go to File > Scripts > Statistics. Select “Median” for the stack mode and check “Attempt to Automatically Align Source Images.” Finally, click the “Browse…” button to select your set of photos and hit OK.

Photoshop will process the images to preserve the static background and remove everything that changes between the shots . There might be some cleanup to do in Photoshop but this might be the quickest and easiest way to get postcard-quality photos of your last trip.

After the Trick!

5. Matching Skin Tones

A sunburn or a blush can disrupt a portrait, especially if there is a contrasting pale person nearby. Photoshop has a tool to correct that: “Match Color” offers control over skin tones. Open your image and use the Quick Selection tool to roughly select the red skin areas.

You can hold down the Alt/Option key and subtract areas from the selection. Click on Select → Modify → Feather and enter a value of about 15 pixels. Use the Control/Command + J shortcut to copy the selection to a new layer.

Using the same technique, copy the non-reddened skin to a new layer. In the next step, you’ll have to differentiate between the source layer and the layer to edit, so rename these two layers meaningfully; all it takes is a double-click on the layer name. You could use the naming scheme shown here and call them “Beautiful skin” and “Reddened skin.”

Activate the layer with the red skin, and select Image → Adjustments → Match Color from the menu. For “Source,” select the current document, and for “Layer,” select the one with the beautiful skin. Control the effect using the “Luminance” and “Color Intensity” sliders in the Image Options area. Once you confirm, you can control the effect’s strength with the Opacity slider.

We will be coming up with a whole new world of tricks from out bag on Photoshop and other such tools that a designer must perfect.

Stay tuned for more!

What is Design Thinking?

Gone are the days, when the performance of end user satisfaction was measured by GMV or revenues. Today, user experience has emerged as a separate discipline in itself. It focuses on solving the end user problems. This way companies can develop products and solutions that fit the user’s needs.

Design Thinking is nothing but a whiff of change in the mindset of the companies to align themselves with the end user requirements. It beautifully combines creative and critical thinking that helps the companies to develop products meant to solve real customer problems.

Many examples have proven how design thinking can steer business growth in the right direction. Here are 3 interesting examples of how companies have benefited from this new age design philosophy.

1 – Uber

Remember those days when taxi hiring used to be a cumbersome job. You need to call several hours before to reach the destination on a timely basis. But, Uber disrupted the market in 2012 with its cab aggregator service focused on user-centred design principles. What did the company do? It created a visualization of a taxi’s approach and solved many customer grievances with its ride hailing app, such as:

• Completely eliminated the risk of fake dodgers by creating a cashless payment drive.
• Put the responsibility on driver for exemplary customer servicing by giving customers the power to rate drivers and the ride

By focusing on customer requirements, Uber was able to bring a massive change in the traditional business model.

2 – m-indicator

Residing in Mumbai and commuting by local trains is not a piece of cake. A lot of challenges are faced by a common man face including train schedules, arrival times, route changes and delays. M-indicator app is the solution to all the customer woes. Its owner, Sanjay Teke launched this app while he was still working in a firm. What he actually did? He visualized the problem that a common man faces to avoid peak hours. By providing the train commuters a view of the upcoming trains the app completely eliminates second guessing and loss of time. No wonder that today, it is the most trustworthy app that provides detailed information about how to go around in Mumbai.

3 – Burberry

Once known as a fashion brand of the bygone era, the company pushed the envelope and created a niche market for itself by applying the design principles. What did the company do? In order to boost the revenue growth, the CEO of the company Angela Arhendts joined the social media bandwagon to convert millennials to its most loyal customers.

Burberry cultivated a social media environment of digital democracy, where users and the brand could collaborate freely on its designs and new launches. It not only attracted new customers but also strengthened its goodwill. The outcome? From 2011 to 2015, Burberry had posted a revenue growth of 68.1%

Conclusion

Design Thinking is nothing but putting yourself in the customer’s shoe to gain empathy and awareness about their needs. With such principles, you can bootstrap the business the smart way, acquire users quickly, and take customer retention levels to its peak.