Big Data is transforming the customer relationship management industry while on its way to being the “disruptive technology” that everyone in the data circles are talking about. It augments our supporter information and arms us with deep customer intelligence. But its arch-nemesis is ‘Dirty Data’.

Dirty Data mainly manifests as:

• duplicate data/information
• inaccuracies due to aging data
• inaccuracies due to human errors

Dirty data can be kept in control by paying attention to Data hygiene. Now, what is data hygiene?

“ It is defined by the International Data Sanitization Consortium as the process of ensuring all incorrect, duplicate or unused data is properly classified and migrated into the appropriate lifecycle stage for storage, archival or destruction on an ongoing basis through automated policy enforcement.”

How does Dirty Data affect organizations?

Dirty Data wreaks havoc on a company’s bottom line the most. Customer intelligence is the lifeline of any organization. The impact dirty data has on the success of an organization is high. Poor data quality costs the US economy approximately $3.1 trillion annually.

The different ways that dirty data impacts an organization is:

• Loss in revenue, Loss of time
• Failure of business objectives
• Wasted outreach efforts
• Misinformed decisions
• Poor customer relationships and customer experience
• Poor lead generations and many more.

Why is Dirty Data increasing?

Why do we have duplicate and/or inaccurate data? Few likely reasons are:

• User is asked too many personal questions too early in the process and to protect his/her anonymity they enter false information,
• If forms contain too many inputs, users, in an effort to speed the submission process will be tempted to provide false information,
• Lack of Normalization/Standardization,
• Human Error,
• Lack of visibility settings,
• Bad discoverability.

Steps to tackle dirty data

Perform an Audit

• Internal — Evaluate which input fields are actually necessary. More is not better!
• Collecting more information than necessary increases the potential for dirty data.
• If input fields do not add value to the customer or our sales and conversions it should be deprecated.
• External — Audit the data that we leverage from external platforms. Survey forms, webinar registration forms, white paper download forms, etc.

Standardization

An address can be written in different ways and they will be saved in our CRM as duplicates of the same address or multiple addresses of the same contact.

• “Apartment Number 110, North Queen Street”
• “Apt No 110, N Queen St”
• “#110, N Queen Street”

Another example could be a part of the CRM records contact name as — Last name, First Name whereas another part of the CRM or an external platform that we leverage might record name as — First Name followed by Last name.

Standardization rules can go a long way toward preventing dirty data. Consider which input fields should be standardized. Standardization rules should apply to internal systems, as well as customer-facing ones. Few things that can be standardized for consistent representations:

• all numbers,
• monetary values,
• other nominal values,
• Case sensitivity should be eliminated unless absolutely necessary,
• salutations such as Ms. and Mrs,
• Spelling should be normalized according to one standard dictionary such as US English. Abbreviations such as Ave., St. and Pkwy should be converted to their long forms or vice versa.

In a few places, constraints can be placed to standardize data input. Constrains can bring about consistency and thereby decreasing the potential for Dirty Data. Constrains can be enforced on inputs like the following by using pick lists with pre-determined values to avoid free-form data entry, whenever and wherever possible:

• Date range
• Time range
• Zip Codes
• Country Codes
• Job titles
• Other demographic information.

Progressive Profiling
The user can be asked for information based on the data that he/she has previously entered or picked. This eliminates the need for unnecessary input fields.

Visibility Settings
User roles, responsibilities and accessibility should be strongly enforced to avoid wrongful change in data and maintain data accuracy and hygiene.

Automate Data Cleansing
Manually cleaning the data for inaccuracies and duplicates requires a lot of effort, time and manpower. From the chart below you can see that human error is the highest contributing factor towards the lack of data accuracy. Investing in creating an automated data cleansing system will be fruitful.

“Cleansing systems are able to sift through masses of data and use algorithms to detect anomalies and identify outliers resulting from human error.”

Automated data cleansing systems can be set up to sift through data, recognize duplicates using rules and algorithms and merge and removing duplicates.

Update Data — “An Ounce of Prevention is Worth a Pound of Cure”

Change is the only constant. The data that we get from our clients begins to decay and age very quickly. People change phone numbers, move places, change jobs, get promoted, etc. The data that we have on them keeps changing too.

“Each year, up to 18% of all telephone numbers and up to 21% of CEOs change. What’s more, up to 60% of individuals change job functions within their organizations every year”

“B2B data decays at a rate of 70%per year.”

This means that when our customers try to reach supporters they will hit dead ends 7 out of 10 times. We should try and update our data as frequently as possible and even better in real-time to prevent chasing dead-end leads. We must invest time, resources and energy to build systems and set processes in place to automate data updates.

This article is a brief overview of dirty data. It is a space that requires a lot more looking into. I have tried my best to ensure that the above-mentioned facts are as correct as they can be. If you find any discrepancies in my understanding or in the information I have mentioned please correct me.

Dirty Data — What is it and how to prevent it? was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Have you ever been in tricky online payment situations that give you mini panic attacks ever so often? Ever wondered if your payment did go through? or did it not? or why is it taking so long to give you confirmation? This sure does happen to me a lot and always makes me very anxious to not have control when it comes to things ‘money related’.

Inspired by ‘Designing Mobile Payment Experiences’ by Skip Allums I put together best practices for enhancing mobile payment experiences. If you have not read the book, you must. From my reading, I have summarised important best practices to keep in mind while creating mobile payment experiences.

Focus on the user’s goal.

Favour speed over spectacle. Keep user needs above yours. It is easy to get lost by exploring emerging technologies and constantly tweaking UI elements. Avoid lots of data entry by :

• Because you are designing for mobile you can take advantage of the mobile’s camera to click a picture of the card and use character recognition to eliminate data entry. Refer to image 1.
• Don’t ask for card type because the first six digits of the credit card number encode the card type. Refer to image 2.
• Get zip code first and then use an API to pull city and state.
• Stick to shallow navigation by setting a primary payment method the first time.

A conversation with the users. React to every action.

Provide constant feedback to show the user that there is an outcome to the actions that they just took. Feedback can be visual (text and/or animation), sound or vibration pulses(if working on a native app).

Information is power.

Parse MMC (merchant category codes) codes to allow users to make financial decisions like selecting a category of rewards and such. Allow users to feel in control by:

• Review payment before submission.
• Showing balances and recent activities.
• Offer transaction (transaction history) records in plain English

Security

At the UI layer, it is better to use customized keypads rather than stock OS keyboard to punch in 2FA and Auth0 codes, passcodes/mPIN, Gesture Patterns, User Data and preferences. Reasons being :

• To avoid nefarious programs listening in on common touch coordinates
• To allow for larger touch targets as opposed to calculator-like interface with special characters and mathematical elements which is unnecessary in this context (image 3).
• Another option would be to use biometrics for mobile security (image 4).

Design for error cases.

Any errors with payments can lead to sheer mistrust. How your app handles these situations can make or break the experience. Providing feedback is important here as well — visual (text and/or animation), sound or vibration pulses. Be sure to explain the error and next steps the user can take instead of leaving the user high and dry. Lighten the situation by using amusing instructional text (image 5).

Avoid tech jargon.

Use plain English. Financial apps, in particular, are notorious for using industry jargon. Users need to see warm and familiar language that is concise and easy to understand. Explain to the user why they are waiting and what is happening in the background.

Dress the part. If something looks odd, users won’t trust it.

Users trust familiarity. You do not want to throw them off their comfort zone when dealing with money. Make the interface as predictable as possible by using IOS guidelines on IOS devices and android guidelines on android devices. Always provide users with what they are used to.

Function follows form.

This could be classified as service design. Be transparent about transfer time, processing fee, service fee etc. Keeping the users in the loop about a delay and wait times supported with reasons and next steps cut down on user’s anxiety and panic. Bring to the user's attention immediately that they have to make adjustments to their hardware if that is the reason for the delay.

Teach and Educate

This is a new way to pay for things and services. So users have to be instructed and educated about the processes.

• Use tutorials and/animations to educate users. This is far more important when dealing with proximity payments.
• Provide easily navigable FAQs and help sections.
• Instruct consumers, merchants and support teams to guide and educate the users as well.

Award repeated use.

Incentivize with offers and loyalty points to motivate users to use mobile payment ways. Examples — Starbucks, Groupon etc.

Best Practices for Mobile Payment Experiences was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

A typical day in a program or project manager’s life includes keeping a check on every project that the company is involved with, plan for future projects, delegate work, meeting with teams, make sure all the collaborations run smoothly, keep an eye on work dependencies etc. Keeping track of all these is hard, strenuous and results in very crowded and congested spreadsheets. A program manager approached us with this problem and wanted a web application that would solve for this. We ran this project through EDC (Experience Design Center) to take it further.

EDC does the Discovery

At this stage we had a very generic understanding of the project. So, to discover the depth of the problem we conducted a quick and short PDW (Product Discovery Workshop). During the PDW, we met with the stakeholder, a young Program Manager and asked her open ended questions to dissect the problem and convert them into opportunities for us to intervene.

Our stakeholder is from a small to medium sized company and is the sole programme manager of her company. We documented all her pain points and now had to validate that these pain points were global and not just limited to her. We ran through our contacts, found every other project manager/program manager we know and after speaking to them about these pain points we realized that there seemed to be a genuine overlap of these issues.

After the PDW is when we usually create personas, but because the target audience is already quite narrow we skipped this step in this project. To still keep the focus intact without a persona, we boiled down the pain points to the following:

• Tracking everyday task was difficult
• Missing out deadlines, or missing out on the priority of a task
• Excessive workload on an individual

We then laid down these pain points as opportunities, and created a mind node.

Design

Based on the mind node we made rough paper sketches and converted the paper sketches to rough paper prototypes. These paper prototypes were for the usability studies, which would validate if the product is meeting the user needs. First, we had to recruit people who will be a good representation of the potential users. We got in touch with all the project managers/program managers we spoke to at the discovery phase, including the stakeholder, requested them to walk into our Experience Design Center for a usability study with the paper prototypes. We conducted usability studies with 6 recruited representative users. While the users were interacting with the paper prototype we observed and documented the happenings.

Usability Study

After the study we spoke to the users about their experience and pain points during the interaction. Based on our observations and the user interviews after the usability study, the feedback we received were:

• The workflow while creating a project should be straightened out.
• The restriction in colour. Having distinctively different colours.
• The milestone colour should be the main focus of the screen.
• Sharing a project should be simpler. Ability to view who the project is shared with.
• Possibility of the text on the milestone bar being truncated should be avoided.
• Show only the available colours to be chosen from while creating a project.

Taking all the feedback, we iterated on the mind node and made user flow diagrames.

As we had worked on rough low fidelity wireframes to make the paper prototypes, it was easier to sketch them out on paper and then dive straight into visual design. For the visual design, we followed the Design Language System by Skcript

Validation

The idea and the product was validated at equal intervals through out the design process. Once the visual design was ready we built tactile interactive prototypes to test with the potential users and iterated the design based on our findings. After incorporating all the feedback, we passed the design on to the developers and the application is right now under development. We will give you a peak into the application soon!

How we built a Project Management Tool @ Experience Design Center. was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Everyday, everything you touch and use is designed by someone. Some are good, some are bad but still they work. In our daily life we carry out a lot of tasks with these things, how many of them are easy to use? and how many of them are hard and completing the task is a nightmare solely because the experience sucks? How many times do we cringe to do a task just because it is unpleasant or frustrating to complete? GBUX — Good and bad User Experiences, this new project aims to tackle this issue. Read to find out just how.

GBUX is a new project to create a pool of good and bad user experiences. We will appreciate what is good and leave the bad ones open for enthusiastic designers to make it good. Can we solve it all? Maybe not, but this sure is a step in the right direction. The aim is to make bad user experiences good and the good user experiences better. This is a way to give back to the community and in-turn making living in this world a good experience.

This project will be heavily crowdsourced but also moderated, solely because we do not want bad images that do not communicate the experience properly. So, how this will work is :

Tweet to us an image of the good or bad user experience with a small description @gbuxhq

Or

1. Click an image/video of a good or bad user experience
2. Submit the image with a small description about why it was good or bad user experience in the google form. You can also tweet to us @gbuxhq
3. Let us know your preference about being tagged in the post on GBUX’s Instagram and Twitter page.
4. On receiving this data we will post this on Instagram and/or Twitter and a tag the sender (only if permission is granted by the contributer)
5. Feel free to pick up a bad user experience posted on GBUX’s Instagram/Twitter page and find a solution to make it better using Design and/or Technology.
6. Post your solution on Twitter and/or Instagram and tag us @gbuxhq

You are urged to contribute. You do not get anything return, but you will start conversations among people who can make a difference by making the world have better user experiences. Lets get started!

Follow GBUX on Twitter and Instagram!

Do you call yourself a Facebook addict? Are you hooked to your Instagram scrolling through pointless feed? I recently read an amazing book by Nir Eyal and went on a spree noticing such addictive behaviors across many applications I uses on a daily basis. Read to find out my take on it.

This article is based on Nir Eyal’s book called Hooked which is about building habit-forming products. He categorizes products as two types, vitamins and pain killers. Vitamins are to prevent a medical condition while painkillers are pain alleviators when the medical condition persists. People can do without vitamins but painkillers are something that people can’t do without. Painkillers have the potential to become a habit as slowly it morphs into a pain alleviating product from a pleasure seeking product. In this scenario, a medical condition coupled with the painkiller over a time period becomes a habit.

Nir Eyal says, connecting the user’s problem with a solution with enough frequency forms a habit. He formulated the famous hook model to build habit-forming products. The hook model has four phases, Trigger, Actions, Rewards and Investments. To understand more about the hook model please read the book, Hooked: How to Build Habit-Forming Products Video Course

Below, I have attempted to recognize the four phases of the hook model in applications that I use on a daily basis.

Whatsapp

Trigger:

External: Notifications

Internal: Fear of missing out on conversations, to be constantly in touch with friends, anxiety, stress, itch

Action: Open the application and text contacts

Reward: The single and double tick acknowledgment that the text has been received or read.

Investment: A reply to a text message. This keeps the conversation going, causing it to be a habit-forming product.

Medium

Trigger:

External: Initially they hosted controversial articles and integrated with Twitter to gain traction.

Internal: To read, write and share articles about topics that interest the user with the community.

Action: Users read and write articles.

Reward: Users receive claps from the reader as a form of appreciation.

Investment: The rewards encourages the users to write and post more as they get the feeling that people read what they write and their ideas are being validated and accepted.

Amazon (or any online shopping platform)

Trigger:

External: The need to buy something

Internal: To shop from the comfort of your home

Action: Log on to your Amazon profile, look for an item to purchase, place the order

Reward: The thrill of anticipation, offers, shopping suggestions

Investment: The user shows interest in other purchases. Thus making this a habit-forming product.

Linkedin

Trigger:

External: Notifications, Contact me part of people’s profiles

Internal: The need to be easily connected with work peers and people who can help your career growth.

Action: Connect with peers and share posts.

Reward: Ability to grow your network and keep up with their professional change.

Investment: Creating a small network has a multiplying effect. The user gets more invested in the service.

Facebook

Trigger:

External: Notifications, Share to facebook prompts across the web.

Internal: Lonesome, seek connection, the need to keep in touch with friends and family, fear of missing out

Action: Scroll through the feed, like comment or share posts

Reward: User feels included in the lives of his friends and family, receives likes comments and friend requests, the user feels engaged in virtual conversations, social acceptance

Investment: Notifications act as external triggers which drive the users back to the service, Add friends

Instagram

Trigger:
External: Notifications, Pictures with pretty filters on Facebook and twitter posed as external triggers and linked back to the service. This made users download the app and sign-up.

Internal: The need to capture beautiful and memorable moments, need to create a self persona.

Action: Clicked a picture, applied a filter and posted it.

Reward: Likes and comments, social acceptance.

Investment: Rewards act as internal triggers and makes the users post again. This is an investment back to the service.

Snapchat

Trigger:

External: Notifications.

Internal: Fear of loosing the moment, Quick honest conversations.

Action: Open the app, click a picture or shoot a bite sized video and send.

Reward: Excitement of anticipation , creative because of its endless possibilities of editing the picture, You can expect honest replies because the image goes away in seconds.

Investment: Prompts like ‘Double tap to reply’ acts as investment because they are external triggers for the next action. Thereby making it a habit forming product.

Pinterest

Trigger:

External: Notifications, prompts in other social media.

Internal: Boredom

Action: Sign-up with the service, scroll through feed

Reward: Other users re-pin their which is a social reward.

Investment: Pin , Re-pin, like and comment

Everything listed above are from my observations. If you find any discrepancies please do let me know, it will be very helpful.

Why are we hooked to social media? was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Working in the design industry for the past few years, I have learnt to work with different departments towards the same goal. A complete fully functional product that is easy on the eye and provides a pleasant, if not out of the world, experience. Key to this is following a design language. Read along to find out about Design Language Systems and how you can begin to curate one.

Building a Design Language System

When you read ‘Design Language systems’ you might brush it off as something the design team should be thinking about, but that’s not the case and I’ll tell you why. First let’s define it.

Design Language System

It is a set of rules or guidelines that heightens the level of harmony in a digital ecosystem.

Now what is a digital ecosystem? It is nothing but interdependent group of enterprises, people or things that share a standardized digital platform for mutually beneficial purposes. To keep this ecosystem in harmony we need to understand the different groups involved, their requirements and expectations to build a wholesome design system that is scalable and efficient at the same time. This interdependent group of enterprises/people/things is where all of you (designers, developers) come in. All you should be doing is:

• Get everyone ready and on the same page.
• Collaborate at healthy intervals to curate a wholesome design language system.
• Keep in mind the collective desire to provide good user experience while adding to internal efficiency.

The Design Language System is like setting a foundation for you to build on. It’ll make the build time shorter and much more efficient. Let’s start laying the foundation.

Tools

Standardize the tools different teams use in different phases of the project. Right from the discovery of the project through the design, development and validation phases. Make sure everyone is aware of the tools other teams use. Tools used for collaboration should be easily accessible and agreed upon by everyone in every team.

Folder System

Create a folder system to organize work. Standardize the naming convention. This will make it easier to find a particular file. Find a formula that works best for all the teams, perfect a naming convention and STICK TO IT.

Documentation

Document all these standardizations. Create a one stop shop for every information related to the system followed.

Style Guide

Conduct a UI Audit (If working on an already existing platform). This is essentially making an inventory of all the components that make up the digital product. All you have to do is take screenshots of all the elements and components that make up your product and categorize them. The components range from right, from the text to buttons and accordion to tabs.

Benefits of an UI Audit are

Consistency: To provide a consistent and cohesive experience

Documentation: So that there are no surprises while scaling/redesign/rebrand etc.

Retrofitting: To analyze the feasibility of responsive retrofitting.

Convinces your boss about a common interface language: This is important in larger organizations where multiple people work on the same project.

Groundwork for a Design Language System: It breaks down the product to its atomic level thereby helping to set up a style guide or a pattern library.

Other steps to make the style guide more useful :

Tool Box

Create a tool box of all the tools that are used to design along with plugins used. So, when there is a new member to your team all they need is the toolbox and they are set to maintain consistency.

Naming Conventions

Similar to naming folders, find a naming convention that works well for the team. Follow the convention to name layers, component and symbols.

Grid System

Set the grid system that works best for the product. It’ll help reduce the design decision time. Have one generic grid system and give yourself the liberty to modify based on requirement of every new product.

Typography & Text Style

Fix on the typography and text style for faster visual design.

Pattern Library

This is essentially like breaking down a product into re-useable building blocks which can be categorized and grouped. This library will have details of every building block’s interdependencies and the set of rules which will a affect the way each block looks. The patterns will include everything from the text to buttons and accordion to tabs. For all the developers out there, your contribution to the pattern library is highly recommended as it has a monumental effect on the code base.

And like everything else in design, perfecting the design language system will and should be an iterative process. From this understanding its given that a design language system benefits more than just the design team. It greatly benefits the brand, the business and the end users.

Benefits of a Design Language System

In the previous part of this post we saw how we can build a Design Language System. Now lets see what benefits it brings along.

We established that Design Language System is a set of rules or guidelines that heightens the level of harmony in a digital ecosystem. Digital ecosystem consists of every interdependent group of enterprises, people or things that share a standardized digital platform for mutually beneficial purposes. Grouping these interdependent groups into three broad categories as Brand, Users and Business, lets see all the benefits that DLS brings to the table.

Brand

Recognizability

A DLS creates a personality for a digital product. A personality that has its own character and other quirks which gives it its own identity and allows it to be recognized in this over populated world of digital products.

Example: Facebook’s like button is it’s signature interaction. From its launch on Feb 9, 2009 to now, it has become imperative to the brand. Users recognize the ‘like’ button even when used out of context, in a third party site as a web beacon.

Consistency

Allowing the user to interact with consistent set of interact-able elements helps in defining the perception of the brand. This is always good as compared to a fragmented experience which a non-consistent product would provide. A good design language system understand the nuances of consistency and modifies elements and interactions based on context and does not over do consistency.

Authenticity

The claps on Medium to show appreciation for the article. Its unique and has not been done before, as opposed to likes and upvotes in other applications. This makes it authentic to Medium. When such authentic design language is followed consistently throughout a platform it creates recognizability for the brand.

Users

Ease of Use & Enjoyment

This is a no brainer. The user’s experience is heightened when he interacts with consistent, easy flowing applications that he is able to recognize and carry out his functions with ease. His experience become pleasurable and enjoyable.

Business

Efficiency and Cost

Having a design language in place enables a team of designers, developers and every other interdependent group in the digital ecosystem to create, recreate, modify or iterate on a product in a quick and cost efficient manner. The end product will then align holistically with the product ecosystem. This level of efficiency can be credited to DLS.

Example : Karri Saarinen, Design Lead at Airbnb built and maintains Airbnb’s design language system. The goal his team set for the DLS was

“ to create a more beautiful and accessible design language. We wanted our designs be unified to drive greater efficiency through well-defined, reusable and cross-platform components.”

Since the DLS was now built, the developers could concentrate on building feature logic than spending their time on view code. This method worked out to be very efficient to the teams in Airbnb.

Stability and Flexibility

The DLS acts as a guiding light to every one in the ecosystem. It becomes a conscious effort by everyone in the ecosystem to align future builds with the DLS. This brings in stability. The design language system should be an iterative process, this ensures continued stability. The flexibility that DLS provides proves that it is here to stay as it evolves with time and context.

A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.

- Karri Saarinen, Head of Design — Airbnb.

Innovation

Once the DLS is implemented in the product or application it brings to light opportunities to make the product’s user experience better which will benefit the business. These opportunities create more ground for innovations.

The benefits of a Design Language Systems are endless and can be used not just in the digital ecosystems. Read the next part to read about an example of the Design Language System.

A Design Language System Example

In the first two parts of the #DLS series, we saw how to build a design language system and the benefits it brings along to the brand, users, and the business. In this part let’s see an example of a Design Language System, but before we jump into that, below is a comprehensive DLS checklist:

• Addressed to the entire digital ecosystem
• Tools for everyone in the digital ecosystem
• Naming Conventions
• Folder System
• Documentation
• Style Guide with a UI Audit
• Pattern Library
• Tool Box
• Grid System
• Typography & Text styles

Benefits of a Design Language System as discussed before:

• Recognizability
• Consistency
• Authenticity
• Ease of use
• Cost effective
• Improves efficiency
• Stability and Flexibility
• Innovation

Let us now review the Atlassian’s Design System.

Atlassian’s Design System

From its very landing page, the system is addressed to every interdependent group in the digital ecosystem. A section for the brand, for marketing and the products itself, apart from guidelines for other aspects like the logos, colours, illustrations etc.

• The level of documentation that Atlassian’s design system provides with a very efficient holistic thinking covering all the interdependent groups shows inclusivity and throws light on their own culture.
• They provide a web UI kit that is available for download. Attention to detail is commendable.
• They have a set of patterns documented and frequently keep updating this list. They make sure this is communicated to the users in a section called What’s new? Staying pro-active in iterating the system adds value by staying relevant.
• At Atlassian, they follow a grid system to produce visually harmonious and coherent screens. The grid system is thoroughly documented and available for the public to see.
• The typography for different OS with the font stacks and its usage is documented and also available for download as a Web UI Kit.
• The section about brand highlights the benefits that the system brings to its products.
• The section for the brand addresses the personality that Atlassian’s products should reflect and the writing style the texts should follow. This personality gives its products recognizability and authenticity.

Other examples of design language systems are :

• Polaris — Shopify’s Design System
• IBM’s Design System
• Airbnb’s Design Language System
• Fluent — Microsoft’s Design Language System
• Nachos — Trello’s Design Language System
• Lightning Design System — Salesforce
• Apple’s Design Language System

Every day, a new Design Language System is built to make brands and businesses better and more efficient. Watch this space to learn about how Skcript’s design team built its very own Design Language System.

Design Language System was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Blockchain is the new ‘in’ thing that is beginning to take the tech world by a storm. In the years to come, Blockchain will play a central part of most of the transactions that happen in this world. For someone who is just stepping into this amazing and powerful space of technology it is important to understand what Blockchain means, the extent of its power and reach, its capabilities and also influences.

Few resources that helped me understand Blockchain:

What makes Blockchain beneficial over other technologies?

WTF is The Blockchain?

How to know if your business needs blockchain?

Blockchain Project Ecosystem

Banking as we know it, will be long gone before year 2037

More about Blockchain.

Now that we have understood what blockchain is and its working (to an extent at-least), its just obvious that the way a user interacts with the platform built on blockchain should be taken care of and enhanced for better experience. Blockchain itself, to me, seems like a backend effort to make the user’s experience better.

Designing for complexity doesn’t mean make things simple. Make the tasks easier but don’t take away their control.

— Dante Guintu, UI Designer

As designers we can use design to show the user every step involved thereby making the platform feel more transparent, which would in-turn increase the users trust on the platform and help get users do more transactions without second thoughts. It basically means make the design as closer to the user’s mental model and as farther away from the implementation model as possible. This is well explained in Alan Cooper’s About Face.

Few things that designers can do to help support blockchain :

Expose content and process

All the data and its processes should be on display to the users. This increases transparency by letting the users know how the platform works and how blockchain benefits their actions. One important aspect to be kept in mind is to display only the data and processes that are relevant to the users. This relevancy will differ based on user roles.

Provide Feedback

Blockchain is usually used in platforms that require high security and efficiency. Providing frequent feedback will let the platform connect with the users and have conversations. The platform will be less alien and more inviting.

Design consistency

Maintaining visual consistency gives the user the perception of trustworthiness. Users create visual associations with design to retain information. This allows for faster adoption.

Guide the users through the platform

By doing this the user is guided to carry out steps that will help them get started with the platform and be early adopters. This will contribute to the user never left feeling lost. As designers we should anticipate every hurdle the users will face and design to communicate a safe and productive route to the next steps. Make the communication between the platform and the users illustrative thereby reducing cognitive overload.

The capabilities, extent of its reach and impact of Blockchain is always growing and so should the design, to accommodate better user experience. Usually our design process encompasses doing extensive user research, but while working with such disruptive technologies we should also have extensive discussions with the developers. This will help us, the designers, understand the points at which effort were put to make the user’s life easier. Use design to show the users that this is not any other application but a blockchain based platform and it has its own benefits. Let’s make Blockchain’s user experience better than never before.

This article was written from a designers point of view and limited understanding of Blockchain. If you find any discrepancies in my understanding or in the information provided, please write to me. It will be beneficial.

It is the entry point to a platform that enables the user to perform an action that leads to positive conversion for business. It should convey the necessary information in a short, to the point and succinct manner. The landing page should not be tied to the website by any global navigation. This limits the options that the user can interact with and guides them towards conversion. Landing pages are of two types,

Click Through or Step Page

A Click Through or as I like to call it, a Step Page landing page is typically used to provide enough information to help the user make a purchase decision. This is a page that directly helps in conversion. This type of landing page is usually used in e-commerce sites where the user should be given enough information of the product to enable him to make an informed purchase decision.

Appropriate Usage : When the users click on an advertisement and is directed to a cart he is less likely to make the purchase in comparison to when he lands on a Step Page. If the user is directed to a step page when he clicks on an advertisement he is given enough information to make an informed purchase decision. Likelihood of conversion is higher when a Step Page is used.

Examples of a Step Page landing page:

Lead Generation

This kind of landing page is used to collect user data like name or contact information which can be used at a later time for marketing a product. Details of what the user will get in return will also be mentioned. The page usually contains a form and a description of what you have to fill and why. The important point to note here is to keep the form as short and concise as possible. Only the information that is needed should be asked for, nothing more. A very lengthy form at this juncture will lead to negative conversion.

Examples of lead generating landing pages:

Few things to keep in mind while designing a landing page:

• Keep the CTA above fold, bold and prominent.
• Direct the user’s attention to the CTA.
• Be succinct with your information.
• Keep the design simple. Don’t distract the user with unnecessary design elements.
• Show the product used in context.
• Display clientele and their testimony to increase authenticity and dependability.
• Highlight what the users get in return on interacting with the land page.
• Avoid linking the landing page to the website using any global navigation.
• Make the page a conversation and let it emote.

A Landing Page has to emote

After a user interacts with a lead generating landing page, it has to emote back to the user. It should be a smooth conversation between the user and the landing page. The user should be made aware that his action of filling the form is appreciated and he will be rewarded for the same. You can use this as an opportunity to extend your conversion and tell the users about the next steps.

This is it about landing pages for now. Get started designing your own landing page and if you are having any trouble, get in touch with me :)

A common mistake UX designers make while designing a digital product is they miss out on paying attention to empty states. It leads to the detriment of user’s experience and adds to the user’s cognitive load. Designing for empty states is as important as designing populated screens. The questions to ask yourself while designing for empty screens are,

• Why is there no data?
• How to add data?
• How to make the user add data?
• How to show the user the process of adding data?

Answering all these questions will lead to the perfect empty state which will lead to an adaptive user base. Having an adaptive user base is any day good for business. The users are faced with an empty state on landing on the platform and there is no data populated. The other scenarios are when the data is cleared or when there is an error. Treating these states right and giving it it’s due importance will elevate the user’s experience. Let’s see how each of these scenarios can be dealt with.

First Use

The first time the platform is being used the user is going to be met with empty screens. What the user sees at this stage is very important. First impression is the best impression and if gone wrong it is very difficult to overcome. Based on what the context is the empty screens have to communicate the following,

1. The user has to be informed about the empty screen, the whats, whys, and hows.

2. The user has to be prompted towards taking an action to populate the platform.

3. The user has to be educated about the platform and all its features.

Data Cleared

If data is cleared and the user is faced with an empty screen the user has to be informed about re-populating the platforms and the ways and means to do so. If clearing the data is a positive task then the user must be rewarded for such actions, but if it is a negative task then the user must be made aware of his actions.

Error

This is a tricky situation. The user has to be made aware of the situation but should not be actively held responsible for it. It should not be a ‘in your face message’ but rather an escape route should be mapped out for the user to take the right next step and get out of the ‘error’ state.

Empty states caused by the absence of internet should be dealt with differently. Components or elements to engage the user offline should be incorporated to keep the users on the page. If not for long at-least for a minute, hoping the internet is back by then.

Anthropomorphism

Anthropomorphism is adding personality or human traits to non-human things. Using anthropomorphism in the empty states helps the platform connect with the user. It sets the tone of the dialogue between a human (user) and a thing (platform). Anthropomorphism in my perspective is the one global route to tackle empty states. It can be reflected in text and illustrations. It will progressively prevent the detriment of the user’s experience.

So, clearly empty states has got a lot more to think and design for than just leaving it empty. It connects with the users and creates a tone in the conversations. Lets make empty states as important as the platform itself.

Reference : All Images from http://emptystat.es/

DISCOVERY

Product: TV remote for the elderly

Target Audience: Elderly people (60+) above the age of 60. The are mostly:

• Retired (if in government jobs) or
• have started to delegate or pass over a business to their successors
• Homemakers

Their declining health/energy level/motor skills make them take a step back in life and opt for more leisure activities during the day. One such is watching TV. Fine motor skills would be important in using a TV remote, and with its steady but slow decline, it is important to make the user’s experience with a TV remote as easy, smooth and direct as possible.

Goal: To design a TV remote for the elderly (60+) which they can use with ease and without strain.

Design: The design will be based on the primary and secondary research. The design phase will be carried out assuming that the remote is to access only the TV and not any other connected devices (set-top box, DVD player etc.).

Design deliverables: To provide a rough sketch of the remote with documentation of the design thinking process.

Design deliverables do not include:

• Production, which would be the hardware of the remote.
• The technology used in the remote signals.

Validation: The design will be validated through user feedback, based on which the design will be iterated.

RESEARCH PLAN

Methodology

Primary research:

• A minimum of 3–5 interviews (remote or in-person) will be conducted where open-ended questions will be asked. Each interview will last a maximum of 10 minutes.
• Surveys were avoided as it might be a little too daunting for the target audience to fill.

Secondary Research:

• Taking a look at existing TV remotes designed for the elderly.
• Collecting data about designing for the elderly.

Participants:

The primary characteristics of the study’s participants:

• Age: 60+
• Retired (if in government jobs) or
• Have started to delegate or pass over a business to their successors
• Avid TV watchers

Interview Questions (conversation will not be limited to the following questions)

• How often do you watch TV? How many hours a day?
• How do you like using the remote control that comes with your TV?
• How important is it for your remote to be easy to use?
• What do you like in it?
• What don’t you like in it?
• What do you think about the size and shape of the device?
• What do you think about the size and shape of the buttons?
• What would you want to change about your remote?

RESEARCH IN ACTION

Primary Research

Interviewing 12 users from the target audience helped me empathize with the users and difficulties they faced. The interview questions were the ones mentioned in the research plan but was not limited to just that. Their responses to the questions led the conversation ahead and every-time we went on a tangent from the main topic of the interview I was able to steer the conversation back to the right direction.

After the evaluation of the gathered interview data, I extracted the relevant information to find the user’s pain points.

• Too many tiny buttons on the remote confuse them and they have a tough time pressing buttons with precision. They end up pressing more than one button not letting them carry out the function they meant to.
• They like to have a better grip on the device without their finger accidentally pressing buttons.
• Majority of the respondents hold their remotes in one hand and operate it with the other. Although 2 of them did operate the remote while placing it on a center table.
• I learned that the elderly are creatures of habit and have a fixed set of favorite channels. On an average 5 to 6 channels, that is the only TV they watch.
• A bigger size of the remote would be more convenient.
• They don’t realize when the battery drains out and end up getting frustrated when the buttons don’t work.
• They don’t find the remote sometimes in the place they usually would keep it, and a small dark coloured remote becomes difficult to find.

The data gathered from the interviews were similar across all participants and so I didn’t find the need for an empathy map or a persona.

Secondary Research

Remote Body Colour

• To make it easier for reading, very dark coloured text on a white background should be used
• Patterned backgrounds should be avoided.

Remote Body Material

• The material used to make the device should be lightweight.
• The texture of the material used to make the body of the remote should not be slippery on touch. The texture should be easy to grip.
• The glossy effect should be avoided as it creates glare that can make reading the limited text also hard.

Buttons

• Extra large buttons
• Non-slip texture
• Bright and easily visible on the remote body.
• Inactive space between buttons should be at least 50% of the button’s width.
• The On/Off button can be further isolated to avoid accidental activation.

Text Color

• As you get older, yellow, blue and green become increasingly difficult to differentiate if they are used in close proximity to each other, especially if the user has cataracts. Yellow can almost disappear.
• Allow for whitespace as it provides natural places for the eyes to relax and can help the user focus on what they are reading.

Text Fonts

• Fonts should not be less than 14 points and you may find they are easier to read at 16 points.
• Decorative fonts are difficult to read and should be avoided.
• Stick to a regular font that is bolder, with thick lines that are more legible.

Competitive Analysis

Products in the market that empathize with the user’s pain points to an extent :

Flipper Remote

Pros

• The less number of buttons doesn’t confuse the user
• The buttons are big and bright.

Cons

• The remote is too narrow and the colour of the device is not bright enough
• The flip that hides the other buttons can get loose or break away causing a hurdle for easy use. The user has to navigate to the desired channel using the channel buttons

TekPal

Pros

• The less number of buttons doesn’t confuse the user
• The buttons are big.
• The colour of the device is bright.

Cons

• The remote is too small
• The colour of the buttons are not bright enough
• The font type is not bold enough.
• The user has to navigate to the desired channel using the channel buttons.

DESIGN AND VALIDATION

On testing paper prototypes with 4 users in the target audience, iterations were made to the design. Users preferred the remote to be bigger and to have a stronghold or grip. The final prototype is 11” in height, 10” in width and 1” in thickness. With provision to hold the device with both hands helps them get a stronger hold on the remote. Users have the liberty to hold the device in one hand and operate with the other or place the device on a flat surface to operate. The users liked the bright buttons and less clutter. The bold font type was legible. A 3D model of the final prototype gives a better picture.

REFERENCES

• Print and Web Design for Older Adults — Discovery Eye Foundation
• How to Make Home Entertainment More Accessible for the Elderly — By Michael Antonoff
• Big Button Remotes
• Simple Television Remotes Designed for Seniors

Rethinking a TV Remote for the Elderly was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.