How Human Memory Works: Tips for UX Designers / July 3, 2017 by Gavin Lau

One of the greatest information processors we deal with in our everyday life cannot be seen or touched. It cannot be bought or sold as well as taken from other people; however, it can be developed and strengthened by many ways. It cannot be easily described but belongs to the most precious features of human life and determines perhaps any step we take and any decision we make. It is a wonder we rarely think about that way. It’s human memory.

Memory presents an amazing natural complex of data storage and processing. It keeps great loads of information through life and is even able to organize it for the sake of the holder. Moreover, it takes responsibility of setting priorities and keeping some details which could be remembered just off the top of our heads while erasing others which seem not necessary or haven’t been used for a long time. Human memory is one of the mechanisms determining person’s interaction with the outer world.

Obviously, this aspect needs to be studied and considered in the sphere of UX design responsible for interfaces of all kinds. Knowing how memory works, designers can create human-centered interfaces which correspond to the natural abilities of the users, save their effort and boost usability.

Basic points about memory

In general terms, human memory is the natural storage for the data right in the human brain. It reacts to the outer stimuli, collects the data, processes it and organizes in different ways. Also, it enables a person to access the needed data collected in the memory when it’s needed. However, it doesn’t present the perfect mechanism as it’s influenced by a big number of factors of physical and emotional nature.

Basically, psychologists mention three types of memory:

sensory memory holds the data for a short moment when we perceive it with our physical senses like hearing, vision or touch;
short-term memory (working memory) allows a person to keep some data remembered for a short period of time without repetitions;
long-term memory presents the storage for big quantities of diverse data which could be saved for long periods of time, potentially up to the whole lifetime.

The effective methods of getting the information kept in long-term memory are repetitions and associations. Taking a look at the scheme below, which was provided in the article by Learning Solutions Magazine, we can see the basic flow of data from the first outer stimulus to the long-term memory.

Creating the flow of interactions with a website or a mobile application, UX designers have to take this factor into account. Surely, they aim at long-term memory which will keep the core data about the app and will allow using the interface easily again and again. Knowing the steps moving the data to this storage enables designers to set the effective strategy of data perception and necessary repetitions. Also, it helps to organize the data on the screen properly and strengthen information architecture of the product.

Basic laws of memory

Three core aspects of memorizing which are mentioned by specialists in psychology are very simple:

1. Concentration. To remember a thing or chunk of data, a person needs to concentrate on it. Otherwise, the chances are high that the data will be discarded on the level of short-term memory.

2. Association. The memory presents the huge network of links connecting different data. If a person builds the association which links the new data or object with something well-known or kept in long-term memory, the chances of memorizing get higher.

3. Repetition. It is one of the effective ways to activate the data in working memory several times until it moves to the long-term memory storage.

Organization of the interface content based on these three points performs with visual hierarchy and perception which can mark important layout elements that should be remembered and make the interaction easier.

Expert explorations of memory

There are also some laws and rules which were concluded from various research, experiments and practical testing. Among them, we would mention Miller’s Law and Hick’s Law.

Miller’s Law

The number of objects an average person can hold in working memory is about seven.

This exploration was offered on the basis of scientific research by George Miller in 1956 psychological review «The magical number seven, plus or minus two: Some limits on our capacity for processing information». In general terms, it states that short-term memory of an average human is able to keep and process about seven objects or chunks of data plus/minus two at once. Obviously, the formulation given here is generalized as the real flow depends on many factors, including the nature of information.

Later studies, for example, the review by Richard Shiffrin and Robert Nosofsky called «Seven plus or minus two: A commentary on capacity limitations» provided deeper insights into the work of working memory. In particular, the authors mention that the number of objects which a person can remember at once after they were presented is dependent on the nature of the objects, on average with seven for digits, six for letters and about five for words. It gives the brain abilities to quickly process information, recognize its character and connection to the objects already existing in long-term memory and finalize memorizing.

In design perspective, this information plays the vital role in building up the usable and clear layout. Interfaces, which demand to remember too many options at once, can create the tension and get users irritated even if they aren’t able to describe the reason of unpleasant emotions.

Hick’s Law

The more elements people get, the harder it is to make a choice.

At the first glance, it seems that this law is not about memory, still, the connection exists. Memory is one of the mechanisms that protects people from negative experience. The more options people get at once, the more distracted they get with numerous associations which can be called — and that’s impossible to predict how good or bad they can be in this particular case. In addition, giving many options for the choice at once, again we can overload users memory with the bigger number then the working memory can process. In particular, this factor needs special attention in cases of platforms for e-commerce, which should keep the hard balance between giving the user all the necessary information and overwhelming him or her with too many options. Finding this harmony is one of the major challenges for UX designers.

Tips for memory-friendly UX

On the basis of the factors and explorations given above, let’s consider a set of tips applying this knowledge for the sake of usability.

1. Don’t make users memorize many items at once.

Definitely, it doesn’t mean that all the screens or pages should be limited to 5–9 elements. Still, the number of elements that present core interaction points would rather be considered in these terms. Making several objects in the layout prominent and attractive, designers can follow the law of concentration which will catch the key zones like menu, call-to-action, an image presenting the product etc. Visual hierarchy is one of the vital strategies that enables to create an interface containing many elements visually grouped and divided in a way which is digestible for human memory.

It is also effectively applied to the copy content in the interfaces. In the article, devoted to this issue, we mentioned some investigations: according to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5–6 words work effectively, not less than extensive headlines presenting a full sentence. One of the reasons for that is obviously connected with the ability of the working memory to process such chunks of data faster and more effectively.

2. Don’t present too many elements for the choice together.

It’s important to care about the concentration ratio. If you present several choices, buttons, options at once, you should be ready that it will take more time and effort for user’s short-term memory to work them over and this can distract him or her from making the final decision or interaction. This can be the reason of inefficient landing pages or sales funnels: even if they are stunningly designed, the over-distracted user can go away before the conversion happens. Apply scrolling and transitions based on careful prioritization, dividing the objects on the screen or page into groups of primary, secondary and tertiary importance — this will help users and make navigation through the interface more natural.

3. Save memory effort with recognizable patterns and symbols

No secret, people are visually driven creatures, so designers usually master the art of applying images that not only attract attention but also inform users and organize the content. In one of our articles, we gave the details on how users recognize icons and copy. It shows that pictorial elements such as icons and illustrations are perceived faster while copy can be more informative. This can be useful in interface design to apply diverse models and markers which are widely recognizable not only in this particular interface but generally in a variety of them. Magnifier icons for search, shopping cart for the page collecting orders, plus button for creating a new item, flags marking the buttons changing the language — all of them present the elements existing in human memory for a long time and bringing up correct associations without the need to keep and process new information.

Moreover, going to a broader perspective, most users expect to see the sign of the brand and the links to core sections of the website in the header while the contacts, privacy policy, terms of use and credits in the footer. Knowing these and other similar patterns of user behavior, designers can save users’ effort making basic operations simple and intuitive. This way it’s easier to focus user’s attention on new data and make its perception quick.

4. Apply consistent markers in navigation

Navigation is the crucial factor of usability. Enabling to move through the interfaces, it also presents the data which should be kept by users’ memory; therefore, designers apply a variety of techniques making transitions and interactions consistent and clear. For example, color or shape markers sorting out particular sections, icons defining specific groups of items, fonts used consistently for specific names or types of copy, illustrations and mascots uniting different screens — these and similar tricks boost memorability of the layout and often support user in processing new data.

5. Don’t hide the core elements of navigation

The discussions about various menus showing or hiding blocks of content are still hot and popular. It’s vital to remember that the key aim of the interface should be the user clearly understanding what’s going on. So, the decision about hamburger menus, sliders, hidden layers of navigation and content should be based on the careful analysis of the target audience. In most cases, especially for the complex interfaces used by the diverse target audience, hiding core navigation elements can serve badly: users need to find and memorize the patterns of reaching them. Some users can appreciate the techniques saving space for other elements, while the others will be annoyed with the necessity to remember how to find the necessary section. Again, prioritization plays the great role: hiding secondary elements while leaving primary ones always visible, designers focus users’ attention on what is the core for them. User testing helps to evaluate the efficiency of the navigation flow and its impact on conversion rate.

6. Stimulate different types of memory

Remember the scheme given above? You could see that the first and the quickest stage of absorbing data is the sensory memory. Basically, it is divided into several types of memory which depend on the sensor: it can be visual, audio, kinesthetic, verbal, mechanical etc. Activating them, not only do designers create more memorable interaction flows, but also support broader circles of users. Research and experiments show that different people have different types of memory as the most effective for them. That’s why, for example, icons given with copy in the names of core categories of the menu can boost usability supporting users via both visual and verbal memory. Sounds accompanying interactions can also create memorable flows and operations.

7. Remember about emotions

Make no mistake, emotional feedback from the interaction is the great factor in retaining or losing users. Bad experience stimulates quicker forgetting the details but tends to leave general negative feeling because in this way brain tries to protect the human. Vice versa, positive emotions, be it fun, aesthetic satisfaction, gratification for the quickly solved problem or accessible communication can bring the person back to feel it again and again.

So, the bottom line is simple: creating interfaces for people, designers have to know how people interact with the world and what influences their behavior. Human memory is one of the essential features determining successful and positive user experience on both conscious and unconscious levels, so it needs to be studied, considered and tested for human-centered UX design.

Stop Being an Ego Designer / June 30, 2017 by Gavin Lau

Photo by: Nik MacMillan — Photo by: Nik MacMillan

Wow! The new client project has landed and you will be the lead designer! Great, everybody has to do your biddings. Gnaar! Thats wrong, dude!

I believe that every project and teamwork will push you more into the character of an altruist. Designing a digital product with your ego creates a product that is unauthentic, not focused, does not stick to the clients company and especially not to the user. Being more focused to your users, clients, your team and the whole audience of the digital product will create a better design at all.

What is altruism?

The International Encyclopedia of the Social Sciences defines psychological altruism as “a motivational state with the goal of increasing another’s welfare.” Psychological altruism is contrasted with psychological egoism,which refers to the motivation to increase one’s own welfare.
(Source: Wikipedia)

Me, myself and I

It is not about who designed which screens, who is the lead designer or which person had presented the project to the client. It is teamwork. Everybody is talking about “There is no I in the word team” but just a few people are living this credo.

If you have a look to the design platform Dribbble, you will see so much of fictive weather apps, chat apps, redesigns of Facebook, Whatsapp, Uber, Nike and all the big players around the world. In my opinion it is not because all these brands has atrocious digital products out there or to pushing the own designers skills to a next level. — In my view they are doing it for just for one reason: Likes, Ego Push and Social Fame.

Weather App Concept №98.76543 Source: Dribbble — Weather App Concept №98.76543 Source: Dribbble

Being a good designer means, put yourself into the situation of another person as I wrote in “Why Every Designer Should Do Side Projects”. That is probably the first step of losing your ego.

1. First of all: Design ≠ Art

User Interface & User Experience Design is a problem-solving-discipline with a clear focus on users, target groups and KPIs. While Art creates emotions, moods and discussions. UI & UX Design is driven by roadmaps, agile processes or strategic approaches. All this is based on parameters like costs, activites, processes, human resources and stuff like this. It has to fit into the client‘s brand values, legal, social, political, environmental, safeties and economic constraints. While Art do not have to.

UI & UX Design is an problem-solving-discipline. Not Art.

2. Know your skills

After some projects in digital business, you will know what your positive characteristics are. For example: You are really good in Typography. Being specialized into some issues is perfect. This business is so complex today, nobody can know everything and do everything on the same perfect level. So if somebody says he or she is an allrounder, means: Everything and nothing is perfectly done.

3. Know your weaknesses

As I sad: nobody is perfect. — And that is perfect. There are some critical points in your skillset. Know them and communicate these to your team. Try to fix them. Watch tutorials, go some extra miles and read books or medium articles about your skills which are not the best in your portfolio. But the important thing is: know and communicate these “not-so-well-skills”, because someone in your team will assume these tasks, hopefully. And as soon as you are fixed your skill gaps you can help somebody else out.

4. Know your speed of working

Giving a realistic time assessment of the workload which is pending is a base of professional teamwork. Nothing is more unprofessional as a wrong time assessment, because this will f**k up the whole work, motivation and spirit in the team. Do not be shy, if you know that some tasks will takes more time more than you will confess. If your team mates do not accept your assessment: argument why do you need more time than they expected, they will understand you, for sure.

5. Know the skills of your team mates

If you know the skillset of your team members it is so much easier to plan projects. So you can spread out all tasks to the guys who are very good in there topic. — Being a good team mate means being a good designer and being a good designer means being a good team mate. It is important to know that everybody has to rely to the other.

6. Remember your audience

You have to understand for what and especially for who are you designing. It is not about your digital product. — It is about theirs. You are suppose to understand the business and the users needs. What ever you will create, it has to be fit to your audience. — In every single pixel.

7. Check every perspective

User Interface and User Experience Design is not a One-Man-Show. You have to take care of everybody, who will get in touch with the digital product. You have to understand Stakeholders, Developers, Product Mangers as well as Users, Business Analysts and Clients.

Illustration by: COBE — Illustration by: COBE

acit

Remember, you are the guy who is capable to create great digital products for great people out there. — But you have to step back, kill your ego, be a great team player and altruist to be a real good designer.

This is the main rule. “You are designing for users. Not for yourself.”

Transforming Data to Insights / June 29, 2017 by Gavin Lau

Behind-the-scenes view of building Analytic Apps for Customer Success

A few weeks ago, a couple of us from Salesforce Analytics UX team were at a customer site to chat with users about building Analytic Apps. After learning about their process and challenges, we realized one of the main struggles our customers face is designing information — more specifically, finding a task-oriented and actionable visual representation of their business goals. They have huge amounts of data mostly in the form of spreadsheets and they find it difficult to translate that into a simple interface. We spent the rest of the afternoon walking them through the design team’s process of designing and building Analytics Apps.

The UX team conducts design studios with stakeholders, product managers, and developers to answer business questions and produce and test those ideas. In this post, I am going to break it down into a three step iterative process.

1. Empathize — the Bedrock of Good Design

The first step is understanding your end user. One of the best ways to frame, structure, and align on information is to map the user’s path of inquiry, i.e. a structured outline of all the user’s needs to achieve their goal. You can map it out by identifying the user’s objectives and business questions.

Mapping out a path of inquiry for Sales Manager

While building our Sales Analytics App, we started with identifying our target persona. Then, we mapped out their journey to get answers to their goals. The target persona in this case was a Sales Manager who wanted to make their selling process more efficient.

Identify Goals. Start by listing out the main business goals and questions needed to answer those goals. For the Sales app, some of the high level goals were to track business performance, review pipeline, and forecast to identify behaviors that drive sales.
List Questions. List out all the questions that user might ask to answer these goals. Some of questions a Sales Manager might have are “How much quota is remaining close for this quarter?” or “Do I have enough pipeline to hit my quota?”. Once the questions are listed out, we find pattern in the questions and group them into categories such as Forecasting, Identifying New Opportunities, Team Performance and Benchmark, etc.
Define Metrics. Choosing the right metrics to identify how your business is doing is critical as it helps you focus and take subsequent actions. In our case, a Sales Manager who tracks their team performance would want to compare reps reporting to them on various metrics such as their quota attainment, win rate, deal size, etc. Once they spot an outlier, they might take actions such as growing pipeline, assigning new opportunities to a rep, or coaching them.
Prioritize. Finally, it’s important to prioritize these metrics. Prioritization helps create an architecture and hierarchy of your data and avoids overwhelming the user with too much information.

2. Ideate —Collaborate on Ideas

Ideation centers around sharing ideas with users, product managers, developers, and designers. We do a 60–90 minutes design studio where the team gets together to sketch and share. We did many rounds of design studios for our Sales App where the entire team sketched ideas to represent forecasting, measuring team performance, and similar metrics that a Sales Manager cares about.

Materials you need for sketching session are papers, markers, stickies and most importantly an open mind.

Sketch. Multiple rounds of time boxed sketch sessions where each participant sketches one or more idea.
Present. Each participant gives a 3 minute presentation of their sketch.
Discuss and Sort. The group discusses, groups, and sorts the sketches.
Prioritize. Each sketch is prioritized based on relevance to answering user goals and questions.

These collaborative workshop sessions are super helpful to kickstart a vision towards the final product. A diverse team can bring in different ideas and viewpoints to the table. You emerge from these sessions with the strongest concepts and visualizations to represent them.

3. Design — Create A Plan for Communicating

After the first two steps, we are left with a set of loosely organized ideas. Designing information starts with organization. A good design has a clear structure which is based on similarity and hierarchy, e.g. persona or task.

Pages in an app should be laid out so that they tell a story. The story should be focused and task-oriented to help users accomplish a goal.

We structured our Sales app based on personas such as sales leaders, managers, and reps. Each persona has a set of pages or dashboards that are structured based on tasks that they perform.

To convey the right story, consider the following factors.

Layout

Pages can be laid out like a newspaper or article where they have a summary, content and conclusion.

Summary. A page has a headline that is reserved at the top of the page to display the most important information and summarizes the rest of the dashboard.
Content. The dashboard body provides more details about the headline with supporting visualizations.
Conclusion. The concluding section of the page is a list of details and actions that are used to look up detailed information.

F, Z, and Side by Side layout are the most common layout we use for pages. These patterns help get the user’s attention to the summary KPIs first, followed by supporting visualizations and a detailed actions list at the end.

F pattern layout places summary KPI in the left pane. Subsequent detailed visualizations are positioned to the right of the pane and serve to provide more details.
Z pattern layout involves a top down scan of the page. The summary information sits at the top of the page. Supporting visualizations are positioned below the summary and occupy the full width of the content area.
Side by side layout works for comparing two things. This pattern allows user to scan left to right and vice versa to compare information.

Information Scent

At first glance, the user should be able to know whether a metric is good, bad, or neutral. Information scent provides user with just the right amount of visual information that provides valuable context to provoke further curiosity.

In the example above, the number $534K doesn’t have a meaning by itself. Providing contexts such as comparison to last year and adding a benchmark adds more meaning to the KPI. The user now knows if something is good or bad and can drill in further to view more details.

Charts

Choosing the right chart that derives the most important insight is vital to telling a story. Using the incorrect chart creates confusion and misrepresents the underlying data. There are a lot of studies and books written around the topic of information visualization — one of my favorites is Dona Wong’s The Wall Street Journal Guide to Information Graphics: The Dos and Don’ts of Presenting Data, Facts, and Figures.

Color

Using color in context helps users notice alerts and take desired actions. Keep in mind that using too many colors defeats the purpose of associating meaning with colors. Based on our experience and research sessions with customers, five is a chunk that humans can easily retain.

User Feedback

It’s important to get user feedback during this entire sprint and iterate.

Ask users about their feelings when they first see the app/dashboard.
Ask them to demo or talk through visualizations.
Ask users questions that we listed out in our first step of mapping out the path of inquiry, and see if users can find answers to those questions in your app.
Follow up by asking them how they would rate the app on a likert scale.

For the Sales App, we started with opportunities, activities, accounts, and users datasets. The main challenge was to figure out what the end user wants to know about their business so we can work with the raw data and find the right visual representation to answer those questions. Following the design studio process, we were able to ship an amazing Sales App that makes our users’ selling process more efficient. We are continuously getting feedback from users and keep iterating to deliver actionable insights to our customers.

Analytics should not be about tracking a bunch of metrics; rather, it should be about getting insights about your data. Following a user centered design process allows us to build a consumable interface that represents complex information, delivers insights, and ultimately brings about customer success.

12 Tips for Mobile Design / June 25, 2017 by Gavin Lau

If you’re not thinking about the end user experience before you start a new mobile app, it’s time to start. The most important thing to keep in mind when designing a mobile app is to make sure it’s both useful and intuitive for your users. If the app is not useful, it has no practical value. At the same time, if the app is useful but requires a lot of time and effort, people won’t bother learning how to use it. Good design addresses both moments: It has a clear focus on key users goals and removes all obstacles from their way by bringing clarity into user interface. But creating good design is not an easy task. In order to help you create really great mobile user experience we’ve prepared these 12 UX design principles.

1. De-Clutter Your User Interface

A huge factor in making your app’s mobile UX shine is its user interface. Clarity is the most important characteristic of a great UI. User attention is a precious resource, and should be allocated accordingly. Cluttering your interface overloads your user with too much information. Since mobile displays have a limited screen estate, every added button, image, and line of text makes the screen more complicated. You need to focus on delivering messages in a clear and concise manner, so try to keep the UI as “invisible” as you can—focus on the essential content.

2. Design for Interruption

Whatever you’re designing for a mobile device will be used “on the go.” Users often have to quickly accomplish one core function in a mobile app—make a payment, check for new messages, etc. This critical flow should be crystal clear for the user, so break down larger tasks into smaller ones so as not to overload the user. A simple rule of thumb: one primary action per screen. Every screen you design for the app should support a single action of real value to the person using it. Short mobile sessions also mean that you must design for interruptions—allow users to save state and re-engage with an app later.

3. Make Navigation Self-Evident

Know your user and design to support this user’s core need. Use easily recognizable functions that are inherent in other well-known apps in your category together with simpler layouts. Surface these functions in an obvious way and make it clear and intuitive. Navigation should help the user discover and use these functions. Good navigation should feel like an invisible hand that guides the user along their journey. After all, even the coolest feature or the most compelling content is useless if people can’t find it.

4. Making a Great First Impression

It’s no surprise that a first impression is a big deal for mobile app. Just like a person, your mobile app doesn’t get a second chance. There is only one chance to sway someone into becoming a user, because if you disappoint the first time, you can bet (with 80 percent confidence) they won’t be back. Onboarding shouldn’t be generic or interruptive, instead it should be beneficial to the user. Think of onboarding as building an entry ramp for people to use the app. It can include a variety of techniques to keep users engaged during their first time, but it should only be employed if it’s really essential for first use. The trick with onboarding is to show just what users need to know to get started—nothing more, nothing less. If you’ll keep onboarding light and simple, you’ll see an increase in usage.

5. Align with Device Conventions

As you build your app for Android/iOS, don’t carry over themed UI elements from other platforms and don’t mimic their specific behaviors. Because if you replicate elements from one platform to another, you risk compromising the user experience and conversion. Input fields, check boxes, switches and other functional components should give a native feel. You should use the native components as much as possible, so that people know how to use them, and trust your app with their sensitive data.

6. Design Finger-Friendly Tap-Targets

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big enough so that they’re easy for users to tap. Create controls that are 7 to 10 mm in size so they can be accurately tapped with a finger. Such button size allows the user’s finger to fit snugly inside the target. The edges of the target should be visible when the user taps it.

7. Design Controls Based on Hand Position

Hand positions and grip should influence the placement of controls on a mobile design. It’s important to place top-level destinations and frequently-used controls within the thumb’s reach. In the figure below, the diagram that appears on the mobile phones’ screens are approximate reach charts, in which the colors indicate what areas a user can reach with the thumb to interact with the screen. Green indicates the area a user can reach easily; yellow, an area that requires a stretch; and red, an area that requires users to shift the way in which they’re holding a device.

Representation of the comfort of a person’s one-handed reach on a smartphone. Image Source: uxmatters — Representation of the comfort of a person’s one-handed reach on a smartphone. Image Source: uxmatters

8. Create a Seamless Experience

Users can use your apps on a phone, on a tablet, or on a desktop, and when users engage with the app through a specific device, they see it as one of the many interactions that make up their overall user experience with the app. Since users often don’t complete an activity in one sitting or through a single device, apps that allow users to switch channels while completing tasks have a competitive advantage.

A seamless user experience—regardless of device—is one of the most important requirements for a usable cross-device experience.

You should design for the entire journey, not a single interaction experience.

9. Use Subtle Animation and Microinteractions

User-experience is not just about usability. It’s also about feelings. It is the little things that can make your user experience truly delightful and memorable. By injecting subtle details—like animated microinteractions, animated feedbacks, or in-app sounds—into design, you can make users feel like they are interacting with something that’s has a personality. And showing personality in your app, website, or brand can be a very powerful way for your audience to empathize with you.

10. Focus on Readability

When compared with desktops, mobile devices have relatively small screens, which means that one of the challenges of designing for them is to fit a lot of information on a small UI. You might have a temptation to squish everything down in attempt to provide as much information as possible, but you should resist that temptation. Keep in mind, that text content should be legible. A rule of thumb for mobile: Text should be at least 11 points so it’s legible at a typical viewing distance without zooming.

You can also improve legibility by increasing line height or letter spacing. Good, generous whitespace can make some of the messiest interfaces look inviting and simple.

11. Don’t Interrupt Your Users

No one really wants to be interrupted, much less for something useless while they’re in the middle of something important. Avoid interrupting users by asking them to rate your app if they’ve only recently downloaded it. Instead, wait until they prove to be repeat users and they’ll be more likely to rate your app and provide more informed feedback. Also if your app lacks a specific feature or content, try to use an in-app browser. But do not invoke the smartphone browser, or you will cause users to lose track and not return to the app, which will increase abandonment and reduce conversion.

12. Refine Your Design Based on User Testing

All too often a mobile design looks great when viewed on a large desktop screen but doesn’t work nearly half as well when used on an actual mobile device. Even the most thought-out UX will ultimately contain some unseen flaw when put into the real world. That’s why it’s so important to test your app with real users on a variety of mobile devices. You should ask real users to complete regular tasks, in order to see how well the design really performs. Treat your app as a continuously evolving entity, using data from analytics and user feedback to constantly improve the experience.

Feedback helps you move forward / June 25, 2017 by Gavin Lau

The past Friday I participated in a very nice design feedback meeting and decided to write a few words that could be useful to people who are or will be participating in such events.

There are many types of communication we experience daily. But few are as important as giving and receiving feedback.

Feedback is essential for us as humans to be able to change. It is equally essential for our creative process. It helps us surpass our limitations, move forward and create better quality products.

Sometimes, people will refrain from giving constructive feedback in order to avoid potential conflict. Other times the delivery sucks and the receiver of the feedback does not get the point. This leads to damaged relationships and bad design decisions.

Good ways to deliver feedback

As the person giving feedback make sure to increase your empathy to its maximum before you open your mouth. Make sure you understand correctly the presented problem/solution. Understand what decisions were made and why.

Frequently, the design feedback presentation is not enough or the presenter simply lacks experience. This automatically puts the feedback session in a bad direction.

As a person delivering the feedback, we can help compensate. Ask questions that will help you and the rest of the listeners understand the thought behind the design decisions.

“Whatever words we utter should be chosen with care for people will hear them and be influenced by them for good or ill.”

– Buddha

Only after you feel you’re understanding the presented problem/solution, you can start shooting your “wise” words.

Remember we are all people who by default make mistakes. Giving and receiving feedback is the way to correct them.

Specificity and focus

Telling someone that he/she can do better without specifying how, is equal to slapping them and telling them they’ve failed.

If the design is totally off the business goals or is violating well-established design patterns, don’t react like “OMG this is shit!”. It is called Critical, not Destructive Feedback for a reason.

Clarify the points that are not working and say why it is not working the way it is now. Suggest potential ways to fix the specific problems. Good feedback is very specific and not vague! It provides clear and actionable information.

Stuff like “You know, I just don’t like circles and pink is not my favorite color.” is a big NO! If you have such feedback in your head, keep it there until it evolves into something more specific and actionable.

Positive frame

Constructive and critical feedback is hard to deliver especially in a positive light. It is not as simple as forcing a smile on your face because that might seem like you’re making fun of the person’s failure. Or you are a person who likes causing pain to others. :)

“We all need people who will give us feedback. That’s how we improve.”
– Bill Gates

To put myself in a positive frame I like to think of the people involved in the feedback session as family members. Each of them imperfect as myself. We’ve gathered to help each other and elevate our work.

This helps me get into a more supportive state of mind and not let the critical mindset dominate me.

For example, instead of saying “You’ve failed to communicate the purpose of the screen and that will lead to reduction in the conversion rate” you can say “The purpose of the screen is not that clear as it is now but I am sure if we do a 15 min. brainstorm session we can resolve that issue quickly.”

Remember, all of the people in that meeting were hired to make the product/service better. The goal is one and we need to move as one unit supporting each other.

Having a positive frame in the feedback sessions creates stronger bonds between the people and predisposes people to be more open for future feedback meetings.

Amount of feedback

Delivering the right amount of feedback is an art of its own. People are different, which means they handle feedback differently. The aim is to give enough feedback so it can be digested and used to improve the design work.

Defining the right amount is a very subjective task. It becomes easier when you get to know the person you’re about to give feedback to. The more feedback sessions you make with the design team the easier it will become to adjust the right amount of feedback.

Giving too much feedback could seem a bit too aggressive and could lead to offending the receiver. Or simply overloading him with too many things at once. Digesting too much food (for thought) can be quite demanding.

Personal feedback

Sometimes, you might want(have) to deliver personal constructive feedback. It is better to wait and deliver that type of feedback in person and on neutral ground(not on your own turf). Avoid giving personal feedback publicly. An exception could be a “High Five” type of positive feedback, then you might want to make it publicly.

Receiving feedback

Receiving and asking for feedback is equally important as delivering one. As the one asking for design feedback make sure you are well prepared.

Prepare in advance a short presentation to communicate clearly what you want feedback on. Present the problem/solution explain the key points and the thought process behind them. Consider having a time slot for Q/A.

Prepare mentally to receive all feedback without defending

When the feedback starts darkening the sky like a rain of arrows falling above your head, don’t raise the shield. Take them head on and trust the people in the room not to hit any vital points. Be brave, you will get out of it stronger and better.

“Examine what is said and not who speaks.”
– African proverb

Take notes! Get an old fashioned pen and write the valuable feedback. Also, put a name if you think you will need to talk to the person again for more clarification after the meeting.

Note on why writing the ideas down is good. It helps the brain absorb the new information better since it gives additional tactile information contributing to the memory formation.

Final thoughts

Great feedback is a two-way communication. Engaging in active dialogue is always a good idea.

Strive to deliver and receive feedback in person when possible. Especially when the feedback is critical and important it is good to deliver it face-to-face.

As Designers, we should aim to deliver and ask for feedback as soon as possible. It speeds up the process of improving our designs.

Chatbox UX: Crafting a Valuable Conversation / June 23, 2017 by Gavin Lau

All chatbots are not created equal. What separates a good chatbot from a bad one? A good chatbot helps users accomplish something more efficiently. A great one makes it enjoyable. A bad bot wastes time, returns nonsense, and may annoy or frustrate users enough to drive them away.

No one wants to build a bad chatbot, but if you’ve never designed one it’s easy to underestimate the effort involved, or assume technology is all it takes. And that can result in a chatbot that harms the user experience instead of enhancing it. Creating a useful chatbot to successfully automate a process or solve a problem takes planning, writing skill, iteration and ongoing effort. Powerful technologies still need people dedicated to understanding and anticipating users’ needs to craft the right experience. Read on to learn how to plan and design a chatbot that delivers users value—and not just a lot of talk.

Bot Basics: What makes a chatbot “intelligent?”

A bot is a computer program that automates tasks. A bot that engages with people using a conversational or “chat” interface is a chatbot. Using text or voice inputs, it simulates how humans interact when conversing. Chatbots can complete a simple action like retrieving information or provide a practical service like communicating with customers. Any task that doesn’t require a human interaction—asking questions about reservations, ordering food, checking the weather—may be done more efficiently by chatbots.

There are chatbots that use artificial intelligence (AI) and those that don’t. A simple chatbot may use rules or a decision-tree to chat. Its paths are limited, and users select from defined options. Instead of programmed responses, an AI chatbot can use machine learning or natural language processing systems to respond. Machine learning uses continuously updated algorithms to test data and responses against an outcome–data is taken in, applied, and “learned.” Users ask a question, the chatbot deciphers it and responds using its intelligence and turns the user’s input into more data. An intelligent chatbot becomes “aware” of user needs and can handle different scenarios. (For examples, check out Chatbot Magazine Beginner’s Guide and list of best AI chatbots.)

Sidenote: What’s the difference between AI and machine learning?
Artificial Intelligence is the larger concept of computers systems executing tasks normally done by humans in an “intelligent” way. Machine learning is an application of AI where machines use data to improve their responses learn own their own. Natural language processing is an application of machine learning. Read more about how these terms are different.

Why build a chatbot? (Or when not to)

The reason to build a chatbot is not to have a chatbot. Just because it’s the new, fun thing to have doesn’t make it a good idea. If a chatbot is going to help meet business goals and achieve tangible returns, it needs to do more than make jokes and follow limited direct commands. A chatbot must have a purpose or fulfil a need for users. If you can’t identify a task, service or process that a chatbot can perform to make something easier, faster, or better than it’s probably not the right solution. When a chatbot is an appropriate solution for users and company objectives, a successful implementation can lead to benefits like:

Increased brand affinity and loyalty
Reinforced brand voice and personality
Differentiation from the competition
Increased engagement and interaction times
Higher conversion rates
Better informed customer support before live chat sessions

Chatbots are also an amazing source of rich data to better understand users. Beyond simple analytics like visit times, clicks, and abandon points, chatbots can gather data on user language, sentiment, and needs or ask for direct feedback during chat sessions. This intelligence can generate ideas for content or services, uncover frustrations, or identify opportunities to build a better bot.

Chatbot Purpose and Planning

With so many creation options and open access to AI platforms with codes, templates, and instructions, it may be tempting to jump right into development. Experimentation is great, but taking the time to design the experience will result in a better outcome for the chatbot and users. As one Smashing Magazine article details, “Building a conversational chatbot that isn’t awful is extremely hard.” Use these steps to plan the chatbot project and avoid meaningless conversation.

1. Define the purpose and strategy

Whether it’s a two-person R&D project or a customer service department effort, there needs to be a defensible reason for having a chatbot. Answer these questions to help articulate the chatbot’s purpose and rationale for investing in its creation.

Who is the audience?
What do they want?
What service will the chatbot provide? What problem will it solve or common task can it make easier or faster?
How will the bot provide value to the audience/users? What will make it useful?
How does the bot align with our business or marketing objectives?
Is this the right customer service model for our company and brand?

2. Outline the scope

After identifying the need the chatbot will fulfill, outline the details of its specific capabilities. Not all tasks or experiences transfer well to a chatbot interaction. Define what the bot will and won’t do. Make a list of the use cases. This will keep the development work focused and help manage expectations regarding the end product. This is especially important if it is the first time stakeholders or your team have worked on a chatbot project. Have the discussion at the beginning to gain consensus and avoid misunderstandings or disappointments later.

For example, will the bot use a hard-coded straight path or be a dynamic, intelligent decision engine? Do you really need to implement a sophisticated chatbot that can dig into customer questions or would a simple linear model work instead?

My advice: start simple. Build what is needed to address users’ needs and don’t over-architect it. Focus on the chatbot doing one thing really well and then add complementary features later. See what is and isn’t working before adding complexity that might diminish what could have been a simple and satisfactory solution.

3. Define success

After implementing the chatbot, how will the team know if it is a success? Establish measurable metrics to show the results. The metrics should relate to the strategy (step one above) and will depend on the service the bot is providing. (e.g. Reducing customer service calls by X. Increasing traffic to Y page. Improving user efficiency time by Z to find a certain product.)

Tools like Google’s Chatbase, Dashbot and Botanalytics can illustrate how users interact with the bot, providing insight to improve the bot’s conversation flow and effectiveness. Put the chatbot to work gathering metrics too with direct feedback questions. Ask users about accuracy and helpfulness, “Is this what you are looking for? Was I able to solve your problem?” And if the answer isn’t positive, make sure your chatbot has a good response. More on that below…

4. Identify triggers and scenarios

How will the chatbot integrate with—and not interrupt—the user experience? Outline the trigger actions and entry points when users will encounter the chatbot. What has the user done or seen and what does he/she want to do that the chatbot can now assist with? Write the scenarios for your user personas (or do user research if you don’t have any) to plan the varying interactions the chatbot will need to support. Whether a user is a first-time visitor, returning to a transaction, or arriving after clicking an ad or link from another site may change the chatbot’s initial engagement and the conversation flow.. (These scenarios are also useful later for testing conversations scripts.)

5. Create a chatbot persona and personality that reflects the company brand

While a persona isn’t required, creating one can make planning interactions and scripting responses easier. The bot should have a personality that is appropriate for the company, brand, and the users it will interact with. Be creative, but use the company style guides for voice and tone within the conversational writing. A persona can help writers determine the right words and syntax and bring consistency to dialogues so the chatbot doesn’t have multiple personalities. (Meet Poncho, a weather chatbot with personality.) No matter what the personality is, don’t ever be insulting or put users down.

Crafting the Chatbot Conversation

Outlining the conversation experience can be the hardest—and most fun—part of designing a chatbot. To begin, generate ideas in a collaborative ideation, team up at a whiteboard, or grab a pencil and start sketching. Pick an ideation method that fits the project and how your brain or team works best. The tools don’t matter, but planning out the conversation to create something valuable for users does. Use these suggestions to craft the conversation.

Paths and Flow

Outline possible topics, functions (things the bot can help with), and conversation paths.
Look for patterns and arrange ideas in categories or functional groups. (This E-commerce example uses “Don’t know, known product, known brand, known category” groups.)
Create a tree diagram, decision-process flowchart, or mind map (tools like motion.ai, xmind, mindnode, or twine) to visually organize information and show relationships.
Start with the “happy” path (Google’s example) for when the conversation goes according to plan and a user accomplishes the task in the ideal way.
Branch into exploratory paths. These are additional conversational turns the user might take that still accomplish the task.
Lastly, tackle errors edge-cases. Plot rescue paths to handle situations when users do something unexpected that the chatbot doesn’t understand or have the data to respond. What happens if a user sends an image and orders “find me this sneaker” or inputs garbage “asdfsdfs” text? Give users alternative paths or exit options beyond a string of, “I’m sorry, I don’t understand” bot replies that go no where.

How Google’s walkthrough suggests conversation repair outside of game context.

Boundaries and Constraints

Conversation is limitless. Users can ask anything in any format. When a user interacts with a chatbot, the program must determine what his/her intent is and decipher word variations and syntax. It must figure out what the user is asking for or wants. Intent can be explicitly declared through text or set selections or inferred based on the context of the interaction. There needs to be a map between what a user inputs and the corresponding reply or action taken by the bot. User intent is a big topic, so let’s focus on when it’s not an AI chatbot. (For more on intents, read key concepts every AI developer should know.)

To prevent conversations from going astray you need to create boundaries. Stay away from having the chatbot ask open-ended questions—you won’t be able to plan out relevant responses. A few open-ended questions might be needed (e.g. asking a person’s name or email), but you’ll go crazy trying to anticipate paths unless you limit them.

Another technique is to restrict user responses to a limited set of predefined options. Don’t ask “What can I do for you?” Ask, “Would you like to do X or Y?” such as “Can I help you find a contact or submit a service request?” Many chatbot platforms also allow the addition of buttons or menus. Using these UI elements with user input creates constraints to keep the dialog focused on what the bot can actually help users with.

Dialogue and Scripts

Dialogue scripting takes time and skill. Pullstring, the AI platform behind Mattel’s talking Hello Barbie had a team of writers develop 8,000 dialogues lines to make sure her words were credible, consistent, and right for the Barbie brand. A talking Barbie is way more complicated than a web chatbot or app, but the point is powerful technologies still need people dedicated to envisioning the right conversational experience.

Write like a person talks but don’t have the bot pretend to be one. It won’t fool anyone and can be offputting.
Approach it like scripting a play, or have a real conversation and capture the interaction.
Don’t go overboard with personal dialogue; keep it brief and productive. Too little personality and the bot will be mechanical, too much and it will be distracting.
Accommodate a range of communication styles (Yes, yea, please do), phrases, and word variations. (Smashing Magazine’s designing voice experiences article has an example of a phrase mapping table.)
Draft alternatives where syntax might vary. Switching “good morning” with “good afternoon” based on time or greeting a returning visitor differently from a first-time user.
What will the bot say when people are negative or swear? “I see you’re frustrated. Would you like to contact support?” might not solve the user’s frustration but it’s better than silence or a smart-ass chatbot response.
Write a fallback phrase that can be used for unanticipated situations. “I don’t understand. Would you like to email info@company.com for help?” provides an alternative path to abandonment.

When the script is done, read it out loud. Hearing it can help identify things that sound awkward or aren’t a natural fit for the bot’s persona

Conversation starters: How to make a good first impression

When it’s time to put your chatbox into action, successfully onboard users to make a good impression and keep them coming back.

Manage expectations. Be upfront about what the chabot can and can’t do. Explain the its limitations from the beginning of the interaction.

Guide people into how to use it. Provide examples and help users get started.

Use standard conversation conventions. Start with a greeting and introduction, acknowledge questions, and end with a conclusion.

Repeat things back to confirm understanding and reduce errors.

Be patient and give people enough time to respond. Speed varies for texting, typing, speaking, thinking, reading.

Above all, keep interactions short and simple. The user is trying to accomplish something and is not there to to chatter. Respect people’s time and get them on their way as quickly and easily as possible. If the chatbot was helpful, they’ll be back to chat another time.

Three Simple Principles for Creative Leadership / June 21, 2017 by Gavin Lau

If your actions inspire others to dream more, learn more, do more and become more, you are a leader. — John Quincy Adams

This quote has inspired me throughout my career. As a young man, and as with most new leaders, I eagerly searched for leadership advice. The elegance, simplicity, and directness of this quote served as a beacon as I journeyed in a leadership role.

Over the years, I’ve been privileged to build and be part of various talented teams. Through trial and error, I’ve collected a handful of insights and organically formed a simple framework comprised of three core principles: Inspire, Direct, and Support. As a leader, ask yourself three questions: Does the team feel inspired? Does the team have clarity on direction? Does the team have enough support?

Yes, there are hundreds of books and articles discussing leadership methodologies. Why write another blog post? The answer is simple; there isn’t one perfect approach to leading; however, I do believe that there is a core framework. Each team has its own personality, rhythm, and nuances. When leading creative professionals — designers, engineers, writers, or product managers — there is a heightened sense of independence, ingenuity and uniqueness.

Please understand that this framework serves as a guideline and overarching plan that provides the flexibility and latitude within it to tailor to the unique needs and personality of your team. With this said, I can attest that this framework has helped deliver quite a few happy and productive teams along the way.

Inspire

The true sign of intelligence is not knowledge but imagination. — Albert Einstein

Some assume that creativity is solely the application of colors, typography, and layout. Thus, people expect that inspiration comes from aesthetic sources. As a designer that values aesthetics, I find that assumption to be a bit narrow. As humans, we often fail to recognize that our genius is revealed when we imagine a fresh approach or a novel way to solve a dilemma. Creative design, in its purest form, is the search for an elegant solution to a problem. Yes, visual design is essential, and we all love beautiful things. However, above all else, a usable foundation is critical for a solution to satisfy user needs.

Opportunities to craft astounding experiences and products, drive imaginative people. Few things motivate more than an inspiring project. It is vital that the team feels a purpose and feels able to contribute something that positively impacts people. As a leader, your role is to nurture a culture that challenges the status-quo and leads to true inspiration. Within the framework the first principle — Inspire — I have found some of the following methodologies to be successful.

Look beyond the horizon
Set aside time, as a group, to explore concepts or discoveries outside of your product or market. Rally the team to be willing to research and reinvent. Below are a few steps to start a session.

Ask each person to present an example of a product or experience that excites them.
Provide a casual platform for the team discuss and describe what moves them about the example.
Ask HMW (How might we…) questions such as: How might we benefit our clients with X? How might we leverage X to increase X?
Synthesize thoughts and ideas into themes.
Sketch potential solution vignettes

This simple exercise is an enjoyable way to investigate innovations and form a sense of “the art of the possible.” It opens imaginations and germinates cross-pollination opportunities for existing or new products.

Expand their network
Encourage members of the team to follow industry luminaries or organizations on Twitter, Medium, LinkedIn, Facebook or other sources. A few people I emulate are: Tim Brown, Tony Hsieh, Des Trayner, Julie Zhuo, Kevin Rose and dozens more.

Encourage them to contribute to open source projects on Github; even if they’re not comfortable with coding. Many open source projects are looking for help beyond coding in visual design, testing, and writing.

Ask the team to join local meetups or online groups to connect with peers or industry leaders. By broadening one’s network, the team is exposed to diverse viewpoints, new ideas, and new techniques, thus strengthening the team.

Get out of the building
It’s easy to become complacent sitting behind our oversized screens. Too often, our view narrows and we lose sight of our customers’ needs. Energize and enlighten the team by organizing “in the wild” moments of discovery through exploration workshops, on-site client visits, sales calls, or industry conferences. These interactions help increase needs-awareness and empathy for your users, and fosters creative problem-solving.

Experiment and play
Secure “playtime” for your team to examine new ideas or emerging technologies. Many impactful inventions have blossomed from a subtle sketch or emerging technology experiment. If a defined focus is necessary, work as a team to formulate a list of potential areas to investigate. It goes without saying, experimentation is the lifeblood of innovation. Yielding time for learning endeavors will serve to inspire and prevent the development of an ordinary and uninspired team.

Strengthen their voice
Writing is an excellent means to tune our communication style and ignite creativity. Authoring a view actually facilitates and grows our capacity to form thoughts and express a story.

Make the starting step effortless; ask them to write a blog post. The subject doesn’t need to be about business; just as long as the process of writing about the topic builds confidence. As a showcase:

Heather Boyer, a software architect on the team, manages a very successful blog on crocheting, photography, and other creative endeavors.

Danelle Bailey, a senior designer on the team, serves a popular blog on design, branding, lettering, and other topics.

Jen Aldrich, a designer and researcher on the team, delivers her design insights on her influential blog.

As blogging platform, I highly recommend Medium. It provides a low barrier to entry, a beautiful user interface, and a captive audience. Also, Hemingwayfor editing and Grammarly for spelling and grammar checks.

Showcase your team
Regularly highlight the team’s work within the group and throughout the organization. If it’s not secret, share it with the world on Twitter, Dribbble, Behance, ProductHunt, Medium and other places. An appreciation for accomplishments goes a long way towards building confidence and fostering an inspired and motivated culture!

Place inspiration everywhere
Post compelling sketches, screenshots, diagrams, user photos and artwork throughout the workspace on pinboards and office walls. Include vignettes from the team and thoughtfully include inspirational examples from others. Ensuring that these inspirational elements are shared in a more permanent location is critical. Although inspiration can be found through visits to a website or an app, these sources provide a brief moment of impact and quickly fade when moving to the next browser tab or app. Placing your artifacts of inspiration in more analog and permanent locations helps to keep them more visible and in the forefront.

Direct

It doesn’t make sense to hire smart people and then tell them what to do; we hire smart people so they can tell us what to do. — Steve Jobs

Leading a creative team isn’t a top-down effort, but a participatory one. Imaginative professionals are naturally inquisitive, thus work best in open and collaborative atmospheres. Be willing to roll up your sleeves as a leadership approach. Adopt a guiding approach as the standard method, as opposed to a forceful approach. Some of the successful methods that I have used within the framework of this core principle are described below.

Express a point of view
Illustrate the mission and purpose of the team. Articulate what behavior is acceptable and unwelcome. Make sure that you are explicit and clear, and above all, practice what you preach.

Define the target
Involve the team in the process of identifying areas for improvement and potential goals. This approach will encourage ownership and build a deeper understanding, along with fostering the concept of a team. Work with the team to craft goals and measurements. Ensure that they are always visible and at the top of their minds. Improve the accessibility by making them visible outside a spreadsheet or presentation in the cloud. Place current metrics throughout the workspace. The concept of ownership — owning their goals and results — is driven by this approach, along with the understanding of where they are in the process.

Be realistic
Frequent failure without success can be dangerous for team confidence. While setting stretch goals is healthy; ensure they’re achievable. Be clear what is considered success. Only track and measure what matters, invest the time to focus on impactful metrics. Lots of metrics and slides may appear impressive. However, they can quickly become a burden and distract the team.

Embrace change
Seldom does a project follow a straight line from A to B, rather, a typical project’s path leads through loops and zigzags — and this is not always a bad thing. Projects, no matter preparedness, can be misdirected by unforeseen obstacles, budgetary adjustments, distracting outside priorities, and the list goes on. As a leader, expect and embrace these bumps in the road. Understand that what may be a challenge, obstacle, or constraint, may actually be an opportunity to make an incredibly beneficial adjustment. If you encounter changes, confidently guide the team through the new challenge. Discuss alternatives and paths to an outcome. After considering all options, state the current plan and move forward.

Accept negativity
Nothing can damage team morale or inventiveness more than complaining. Let’s be honest, we all do it; it’s human nature. However, evading negativity usually causes more harm. Rather than fearing negativity, accept it as a necessary evil. Empower the team to transparently vent concerns and frustrations. If the opportunity arises, steer the energy towards designing a potential remedy.

Ask and listen
You’re human; you’re not going to know all the answers. If you have the right team around you, they’re going to be smarter than you in core areas. Trust your team; ask for their advice; use them as a sounding board. Continually seek their insights on vision, improvements, and goals.

Be honest
Be transparent and sincere; no one likes to be bullshitted.

Communicate efficiently and often
This doesn’t mean filling up a schedule with meetings or drafting more verbose emails. Rather, consider the type of message and audience and communicate through the best channel.

Be asynchronous and limit meetings by communicating with tools such as Slack and Trello. If you need to meet, bring an agenda and only spend the time necessary. Lean towards giving the team their time back. Only invite people with relative input and asynchronously communicate decisions or updates to others. Reserve the team’s valuable time for design reviews, social rituals or rich collaboration sessions; avoid meeting simply because it’s on the schedule.

Just enough process
I am a firm believer that elements of a process should add value (reducing risk or increasing efficiencies) and should be balanced with the burdens it places on the organization. Be ruthless about removing steps that add little value. At the end of the day, the value we provide users and business stakeholders determines our prosperity.

Support

By putting the employee first, the customer effectively comes first by default, and in the end, the shareholder comes first by default as well. — Richard Branson

In my mind, a crucial role that a leader plays is to ensure that the team has the elements it needs to be successful. Achieving great products and engaged clients requires an environment for people to learn, collaborate and feel comfortable. I have always envisioned that a portion of my job was to remove obstacles that hindered my team.

Set the stage
A comfortable setting cultivates imagination. I’m not talking about buying some beanbags, foosball table or cheap desks from IKEA. First, focus on the essentials and thoughtfully blend elements such as wall color, artwork, acoustics, ergonomics, and lighting. Something that “looks cool” becomes useless when: lighting is harsh, a chair is painful, or the foosball table breaks concentration.

Breakout sessions should be organic and instant, though can interrupt the flow for others. Construct accessible rooms around the workspace for those moments of serendipity.

Capture the flow
Flow is exceptional; it only lasts for a few hours, but its contribution is quite measurable. Make sure the atmosphere allows flow and moments of invention. Being strongly tied to a typical 9–5 work day, or adding more hours, rarely increases creative contributions; however, a few hours a day under the right conditions can be much more productive.

Access to the right tools
Tools don’t build incredible experiences, although having the right tool makes people more productive and happier. Everyone has their workflow and preferences. Avoid prescribing a tool, rather, illustrate its value and guide them.

In the technology industry, it is crucial that the team is equipped and comfortable with the latest technology and methods. Conferences & training are essential to learning about what trends or technologies are emerging or available. Yes, there is the internet — however, conferences can yield a greater return through early access and opportunity to meet or hear the vision from the industry leaders. Help each team member form a personal development plan.

Buffer from bureaucracy and politics
Nothing can damage morale quicker than constant change or lack of vision, or a constant barrage of distractions, such as unnecessary meetings. A leader should work to translate vision, negotiate on a scope, and eliminate unnecessary distractions. Providing air cover, allows the team to remain focused on the task at hand. In short, a leader filters extraneous noise and removes obstacles that appear, allowing the team to stay focused on what they do best.

Make the connections
At a big or small organization, it is usually difficult for the team to distinguish essential team players. It can also be intimidating for team members. When a new project begins, or a new member comes aboard, make an effort introduce them to the key players. Communicate their role and highlight their strengths. Though subtle, the interaction will build confidence and foster collaboration and the concept of the larger team.

Make people more awesome
Think of yourself as a great coach. I’ve had a few outstanding mentors throughout my career. They coached and mentored me, enabling me to reach prosperity for myself and others. Paying this forward is core to my leadership approach. Giving people the right coaching serves to elevate them, helps to understand their unique needs, strengths, and weaknesses, and builds a stronger team. Invest time in one-on-one meetings to listen to challenges, offer advice and help them prosper.

We’re all in this together
Understand that people have personal lives and stresses outside of work. Be empathic to this when seeing frustration or dimming engagement. Privately, take a moment to listen and understand. Provide people with support and flexibility during difficult times — the investment is paid back tenfold in commitment and loyalty, and future returns.

Absorb blame, deflect compliments
Applying this concept can be challenging for new leaders. In the past, you were rewarded for your contributions, and being noticed helped you to recognize your value and build confidence. But times have changed. As a leader, it is important that you think beyond yourself as an individual and concentrate on making the team successful. When someone makes a mistake, a leader absorbs the blame (remember the old concept: “the buck stops here?”) and then use the mistake as a learning and growth opportunity for the team member. Work with them privately on improving. If you receive compliments, deflect them and highlight the team members who achieved the accomplishment, providing them with those valued moments in the spotlight.

Summary

Inspire your team to dream the unimaginable. Direct with purpose, participation, and confidence. Support them with the environment, “air cover,” and ingredients for them to realize success.

Remember, as a leader, the value you bring to your organization is your capacity and talent to develop and empower your team to achieve the unimaginable!

How to build the best Design Team: 6 UX roles / June 21, 2017 by Gavin Lau

Today, I’ll talk about how to build the best design team, who does not only focus on being user experience competent, but also a team that is well rounded.

The creation of in-house teams, responsible for user experience, are becoming more and more popular in companies.

In making these recommendations, we will examine six of the key roles that has to be present on the user experience team.

1- Content Strategist

This role is a recent emergence in the UX space.

Content strategy allows for usable content to be created, published and governed. Something that is important to remember is that content does not only mean text; the stream of what is called alternative media and content channels, like social, only highlights the necessity to have this content strategist role on the design team.

On most teams, this role also includes that of the information architect and search engine optimization (SEO).

Typical outputs from the content strategist are:

An editorial calendar;
An editorial process and governance;
A guide on the content’s tone of voice;
Evaluation of the content and an audit thereof;
Writing templates;
Evaluation of the content, including policies, information architecture and taxonomies;
The content itself and strategy.

In projects where SEO is of prime concern, that content strategist will have to implement the SEO plan.

This role, also, is sometimes separate from the user experience team as it deals with guiding and commanding an editorial team. It is important to note that content creation leads to the success of a website, either as an equal aspect to or a more important one than visual design and interaction.

The background of people in this role will be an editorial department, where the person was part of the editorial team on a content-heavy website, publishing or media.

The role will also face changes in the future, and the content strategic would need to be even more skilled in content other than copy. There are more content channels being created, too, so the Internet of Things (IoT), amongst others, brings with it the demand to create and manage content that can be used across various types of channels.

One thing is important to remember: a content strategist and a content producer is not one and the same; a content strategist is rather someone who facilitates the production of content and this requires autonomy, which will lead to success.

2- Visual Designer

This role is very important in order to build the best design team.

Also called graphic designers, visual designers are responsible for choosing and ordering elements, like images, colors, symbols and typography, to express a message to people.

Over the past few years, with the advancement of mobile design, increased browser capabilities and responsive design, the visual designer role has changed.

An absolute must is that these designers are creative and able to create solutions.

A graphic designer these days has to create visual components and systems that, together, are dynamic in nature. This has caused the gap between the multifaceted designer, who is able to work on screen and print, and a designer who is specialist in nature — they work on mobile or web designs and are well acquainted with visual design that is interactive for the user.

Lately, there has also been a development in which these designers undertake a front-end developer role; however, this happens mostly when the interaction on the project isn’t heavy and where JavaScript is less important that cascading style sheets (CSS).

The most common outputs from the visual or graphic designer are:

Design composition and rules;
Grid systems;
Iconography;
Style guides and tiles;
Mood boards;
Typography.

It is key to recruit visual designers that have a strong interaction focus; whether they are self-taught or studied design.

Moreover, the person who fulfills this role needs to be able to work with the tools and methods that are utilized in the execution of front-end developers, particularly when responsive techniques and CSS3 are involved.

Graphic designers need to be more than capable to design systems on screens that are static. For example dealing with microinteraction will be a key skill to have.

3- UX Researcher

This role is responsible for collecting insights into the user, as the user’s needs need to be detailed. As the project progresses, user testing, including other user-orientated activities that tests design, content and level of interaction, will be done by the user researcher.

The user could be customers (new or existing), employees, partner or supplier (B2B), or a visitor to a website.

As the user researcher has become more of its own role, so has it grown with popularity.

There are three factors that have had an effect on this role: design that is data driven,service design and lean startup.

Not only are qualitative techniques used, but quantitative ones as well. The latter includes Web Analytics, A/B testing, advanced surveying and eye tracking.

As such, user researchers need to be able to work with statistics. On a big user experience team, the capacity is there to have some people dedicated for working with data that is quantitative in nature while others can work with qualitative data.

While some companies do not want user researchers who focus solely on user needs, there is a case to be made that companies would want designers that have a background in researching user needs.

The reason for this is that information can be lost when the data is handed over from the researcher to the designer, and the research is about both inspiration and insight. Thus, these companies need to make sure that all the members on the design team are capable enough in user research.

The typical outputs from user research are:

User stories and requirements;
Service blueprints;
Customer journey maps;
Mental models as well as personas.

4- FrontEnd Developer

In the design team, this role is the only one touching the code.

Specializations of front-end developers include CSS, HTML and the client side of JavaScript.

The person in this role should create aspects of the solution that is user-oriented by using the code that is implemented in the browsers of the user.

The skill set of a front-end developer changes all the time.

This is due to the progress of browsers as well as mobile devices and the fact that the quality of the expectations of the user is continuously growing. When the web first started, a front-end developer only needed to be skilled in HTML; nowadays, they need to know JavaScript, HTML5, CSS3, together with working with various frameworks and large codebases.

Such changes will likely continue at an even faster pace in the future; as such, front-end developers require a strong desire to keep up to date with the latest developments in their fields as well as an eagerness to learn.

The outputs of front-end developers are:

HTML code;
JavaScript code;
CSS architecture.

If the company has an UX and development team, the technical UX designer will fill the cooperative role. Furthermore, depending on the needs of the project (i.e. big JavaScript applications and codebases), you should take note that the front-end developer role demands a structured approach and not just knowledge of JavaScript.

5- Interaction Designer

The interaction designer is responsible for creating and changing things that are digital so that people can use it. It deals more with the behavior of these digital things and the look of it.

Furthermore, the effort for interaction designers focuses on the flow and sequence together with the layout and form.

Candidates who are purely interaction designers are not common; most often, it is the front-end programmers or visual designers that possess these skills.

Outputs that these designers deliver are:

Wireframes;
Site structures;
Concept descriptions;
Desired system behavior descriptions.

Strong communication skills must be looked out for as the deliverables are interconnected with the final project delivery. Especially in agile projectsdoes this role enable both communication and production.

If you want to hire an Interaction Designer just keep in mind that you need someone with, at least, 2 years of experience in this role. And also it is very important that an Interaction Designer have both UX and UI skills.

6- UX Lead

As the role name suggests, the experience lead supplies that leadership aspect that the design team needs.

The team needs a dedicated leader who can ensure that the team moves in the right direction.

Unlike all the other roles, this one has no direct outputs other than the end product. In order to succeed in the vision of the project and get to the end result, the experience lead role may require a lot of communication with the team, facilitation and even decision making.

The experience lead should have enough skills and experience in order to fill the other roles as well (or some of them), so the person would not be solely responsible for leading the team.

One skill is very important to have: a good predisposition for business, as it is the spokesperson for the team in relation to the team’s relationship with the leaders of the company. Mentoring is another nice to have skill.

Furthermore, the line becomes obscured between user and customer experience with regard to the experience lead.

Conclusions — How to build the best Design Team

In order to build the best design team, companies need to know the duties and responsibilities of these professionals in order to put hiring and staffing plans into practice. Projects may require different needs and roles, so you need to make sure your team is aligned with those needs.

It is important to have a team whose members have more than one skill. Indeed, create a team with overlapping competencies will ensure that the best UX is delivered for the user.

As the roles on a user experience team are generally not clear or well understood, challenges result when these members are recruited and hired.

Furthermore, since every project is different and needs are not the same, together with UX roles that are not defined, it is virtually impossible to make sure that the results needed are delivered.

In this article, I identified six of the key roles that has to be present on the design team.

Content Strategist
Visual Designer
User Researcher
Front-End Developer
Interaction Designer
UX Lead

It is important to note that it isn’t necessary to have 6 people on the design team, but the people on the team, whether there are 7 or 3, need to be able to carry out all of these roles. In order to have a team that fulfills all 6 roles, make use of the descriptions below.

These are merely a guide for you to know what to look for and also who to choose to fulfill all the roles.

Designing Facebook Spaces (Part 4) — Creating a VR interface / June 19, 2017 by Gavin Lau

A new type of interface

One of the biggest challenges for our design team was to design the user interface of Spaces. Unlike with traditional web, desktop or mobile design where we can rely on existing UI elements and interaction patterns that people have learned over the years, most of those patterns have yet to be invented for VR.

An important goal of our interface design was to make sure the UI was here to serve the conversation, not get in its way. While we could have had interfaces that take full advantage of the space and isolate people while they focus on performing an action, we instead looked for interfaces and interactions that empower people to reach their goals while still being in the space with their friends and continuing their conversation. We wanted the UI to feel transient and useful, not interruptive.

To help people distinguish “real” objects and people from the user interface, we adopted early on a holographic visual language for our UI. This not only allowed us to visually separate interactive elements from the rest of the environment, it also allowed us to be more flexible with physics and temporality for our UIs, as people already have a preconception of holograms being lightweight and ephemeral.

Throughout our progress building Facebook Spaces, we came up with a few interfaces and interactions that are worth mentioning. Some of them didn’t turn out successful and had to be thrown away, while some worked out better. In the next few paragraphs, I’ll share some of the concepts we explored to solve some of our problems and the learnings we made.

Virtual Table

During our early days, we built prototypes in which people could freely roam around a space. We tried different solutions to the locomotionproblem and tried different types of space. We quickly realized one of the biggest problem with that approach: it was hard to actually have a conversation with someone. When able to freely move around, people tended to get lost and weren’t really interacting with each other.

In another experiment, we built a tool in which people could create music together. In its first iteration, people would be side by side, looking at a giant keyboard-style instrument. While really fun and playful, people were never really looking at each other and talking.

A quick observation of how we tend to operate in the real world when spending time with people having conversations pointed us at the essential element we were missing: a virtual table, to anchor the conversation and create a social construct.

At F8 2016, our first pass at a table was a rectangular tray people would stand around and on which they could pick up/drop objects. We also played with different sizes and configurations (square, rectangle, large, small, solid, transparent, etc). The solution that felt best for us was a circular holographic table that can sit 4 people comfortably.

Main Navigation

VR Watch

One of the first interfaces we worked on was our main navigation UI. Our first prototype was a virtual watch that would be attached to your virtual hand and contain the top level menus of our app. While very discoverable and cool, we learned how hard it was to aim at buttons attached to a moving hand. It was also quite tiring for the arm, as it required people to raise their elbow quite significantly to put make the interfaces readable and reachable. This indicated to us that the watch could be a great place to surface short-length temporal information with limited interaction (for example, notifications) but wouldn’t feel as good for complex interfaces like a main navigation system.

VR Tool-belt

Attached to your body, the tool-belt felt very personal. Appearing the moment you’d look down at it, it would allow you to make selections or grab objects with one hand, which felt pretty nice. But after a few days of using it, we realized how uncomfortable it was on the neck to repeatedly have to look down at the tool-belt. It was also challenging for people using the app seated who would keep hitting their legs when using it.

VR Buddy

The idea behind VR Buddy was to provide a single object you could move around and place wherever you wanted it in the space. Hitting that object would open a radial menu around it, giving you access to its submenus.

The benefits of this approach were multiple:

You could manipulate the UI with one hand and it was anchored to the world, allowing you to be precise and take your time.
You were also able to choose its position in space, allowing you to bring it with you when you were drawing on the side, etc.
Moving it was quite fun and delightful, especially when the submenus were open as they were placed on a spring and were lagging behind the core in a fun and bouncy way.

But the drawbacks were also multiple:

The radial menu approach meant having to wave your hand in the air multiple times to hit the different submenus and get to what you wanted. This created fatigue in your arm and was quite inefficient.
Opening up a 2D interface meant either having you turn around to face it, or opening it in a weird position in which we couldn’t ensure your comfort.
The fact that you could move it around also meant you could easily misplace it and have to look for it.
It was hard to build a spatial model/muscle memory of how to use the UI as you were regularly changing its position and orientation.

VR Dock

With the learnings from those past explorations and a few others, we designed the first version of what we called the VR Dock: a 3-dimensional interface anchored to the table in front of you that lets you access your content easily and quickly without having to move around too much.

This solution had the same benefits as the tool-belt without the main inconvenient of forcing you to look down too much. The main concerns with this were scalability and the amount of space this was occupying on the table. The floating orbs were also getting in the way of you interacting with the objects on the table.

VR Plate

The idea with VR Plate was to incorporate an interactive surface on the table with an outer ring and an inner ring as a way to structure the information. The inner ring could also serve as a region for delivering 3-dimensional objects like a selected tool or media.

Similarly to the first VR Dock, the main drawback of this exploration was the amount of space used on the table, which we considered solving by adding a open/close button near the edge of the table. Another problem was to communicate the origin of any UI that would come out of a selection you’d make in that interface, which wasn’t easy with this concept.

VR Dock 2.0

The solution we shipped with was very much a marriage of the first Dock and the Plate: a 3-dimensional Dock with a 2D interface on it, that can project a UI or objects in front of you, and can be closed down into the table when you don’t need it.

This solution worked out for a few reasons:

People seemed to immediately know how to interact with it. The resemblance with a tablet was a signal for people that they could touch it with their fingers to make a selection.
The projector metaphor worked really well to communicate the origin of the UIs, how to turn them on/off or how to switch between them.
The minimal amount of real estate occupied in front of you gave you a feeling of control and it didn’t feel in your way.

Display Center

Another problem that we had to figure out was how to allow people to show media content to the other people in the room. From our first prototypes, we knew that turning a selected media into a 3-dimensional object felt right. Holding a photo or a 360 orb in your hand feels real, and passing it to a friend feels natural and delightful.

But we also needed a way for people to display media big, where everyone in the room can comfortably see it. Our early interaction was to let you stick a 360 orb to your face to activate. While pretty delightful, it wasn’t very discoverable and we saw some people hitting their headset with their controller the first few times they’d try. We also felt the need to be able to display a 2D photo or video big where everyone can comfortably watch it.

We called the solution we came up with the Display Center: a circular zone at the center of the table, which activates when you drop a piece of media inside of it and automatically starts displaying that media. A 360 photo or video suddenly becomes the environment, while a 2D media starts projecting on a large screen.

Once projecting, people can control their media from a distance using their dock. They can also end the projection, either from the dock or by taking the media out of the Display Center.

Wrist UI

Another challenge was to figure out a way to interact with a particular object in the space. After a few concepts, we created the Wrist UI, a contextual interface that appears on the inside of your wrist when holding an object and displays the action buttons you can use for that particular object. It’s the equivalent of a right-click on a desktop computer.

This interface worked out pretty well, as it was very discoverable and easy to understand and use. The biggest challenge with it was to make it feel visually okay to have a UI floating off your arm. The hologram metaphor turned out very useful in this case, as seeing a hologram projected on your forearm feels much better than a solid object attached to your invisible forearm.

VR Watch 2.0

With our first prototype of the VR Watch as a main navigation system, we learned that the concept of a virtual watch should probably be kept for fast, easy interactions, to prevent you from keeping your arm in mid-air for a long period of time. We also learned that flipping your wrist to access information felt fast and magical.

With those learnings in mind, we rethought our watch interface to serve as a notification center. When a friend sends the person a message on Messenger, tries to call them or sends them an invite to join their space, their controller vibrates and a sound comes out of their watch, catching their attention. By a flip of the wrist, the person can read the notification and take a quick action.

An evolving system

Together, those different interfaces allow people to find their friends, access their content and tools, display their media to the people in the space, and stay connected with the outside world. They’re just our first attempt at solving some of those problems and it’s likely that most, if not all of them will eventually be replaced by more robust solutions in the future.

The journey ahead

Building this first version of Facebook Spaces has been the most challenging, fun and rewarding time of my career. I’ve gotten a chance to tackle something both crazy ambitious and very fun with a team full of talented and passionate people. Designing for VR is both frightening and exciting, as you can’t rely on the skills you’ve been perfecting over the years and have to get out of your comfort zone to go acquire new ones. And designing social VR experiences turned out to be extra challenging, as the feeling of presence and immersion is very strong and the opportunities and challenges are numerous.

But as with everything, both for Facebook Spaces and for VR as a whole, this is just the first step of a long journey ahead and I’m grateful to be a part of it.

Designing Facebook Spaces (Part 3)— Connecting With Friends / June 19, 2017 by Gavin Lau

Social presence

One of the new cool buzzwords you can hear in every talk about VR is “Presence”. The reason is quite simple: the goal of any virtual reality experience is to immerse you in a world that is different from the physical world around you and make you believe you’re there, present in that reality. A true feeling of presence is the ultimate goal of VR.

Presence is a phenomenon enabling people to interact with and feel connected to the world outside their physical bodies via technology.

Anything that reminds you that what’s around you isn’t real breaks that feeling of presence. That’s why it’s important for designers of immersive experiences to be on the constant lookout for anything that can break the magic.

Mark Zuckerberg giving a demo of Spaces at Oculus Connect 3 with his guests being in different locations.

With social VR, the challenge becomes even more interesting: not only does your experience need to make people feel present in a space, but it needs to make them believe their friends are also physically present with them, no matter where they are in the World.

This becomes particularly challenging when people start having real conversations with their friends in VR. Quickly, they start laughing, are surprised, or amazed by something they see or say. Today’s VR headsets aren’t able to detect facial expressions and the avatar face stays neutral, creating a distance between the avatar and the person animating it.

To help overcome this problem, we created a series of avatar emotes that people can use to express their emotions through their avatar. By performing certain hand gestures (e.g. hands in the air for yay!), or by using the joysticks on their controllers, people can make their avatar smile, act surprised, scared, etc.

By using the joysticks, or by performing certain gestures, people can control the facial expression of their avatar.

A lot of our work over the last year has been focused on finding the key ingredients to enable that feeling of social presence. Here are some of the things we’ve found to be contributing in a meaningful way:

Hand gestures — Seeing your friend’s hands moving and matching their real hand gestures plays a crucial role in making you believe they’re with you.
Eye gaze — Even if the current VR headsets don’t support eye tracking, animating the eyes of the avatars of your friends to indicate where they’re looking is crucial. It also allows you to make eye contact with a friend, which is truly visceral and special.
Lipsync — When a friend is speaking, animating the mouth of their avatars in real time, combined with spatialized audio helps you believe you’re looking at your friend and not an abstract representation of them.
Facial expressions — Adding facial expressions like smiling, laughing, being confused… to the avatar faces makes them feel alive and believable. It also makes for great selfies!
Distance — Interpersonal distance plays a crucial role in building social presence. If your friends are too far or too close from you to chat, you stop believing you’re having a normal and real conversation with them.
Self reference — Being aware of what you look like in VR plays a really important role too. Having a mirror or selfie stick in the space makes people feel even more present with their friends.
Hand contact — Being able to grab a friend’s hand or high-fiving them is incredibly powerful and makes you really forget they’re not physically close to you.

If you’re interested in the particular aspect of designing for hands in VR, I wrote a note a few months ago that shares some of the learnings we made.

A safe space

With Facebook Spaces, we focused a lot of our attention towards creating a space in which people would feel safe and included. We chose to limit the experience to small groups of 4 people and to only let your friends join your space.

Because VR is so new and different, people want to understand what they can and can’t do. When seeing a friend’s avatar next to them, people want to try to touch it, to see how it feels. Or they want to test what happens if their avatar collide with their friend’s. While this may be done with a harmless intention, we still wanted to make sure everyone always feels comfortable in their space.

For those reasons, we created a personal safety bubble that acts as a shield and protects you from anything or anyone entering it. For example, if a friend tries putting their hand in your face, their hand will start disappearing, and they’ll see the edges of your shield. If they get too close from your body, your entire body will disappear to them and theirs to you. This pattern has already been tested in a few other VR experiences as a way of creating some safe boundaries between people.

The safety bubble protects people from other people encroaching their space

Another important element of creating a safe space is giving people the tools to control their experience.

Whenever people want to take a break from their experience, whether that’s because the pizza delivery guy is knocking at the door, there’s a destabilizing shaky 360 video around them, or they’re feeling uncomfortable, they can pause their experience by pressing the pause button located on the inside of their wrist, or by taking their headset off. This teleports them out of the space momentarily and into a “paused space”, giving them a chance to catch their breath and take action if needed (resetting the space, muting/kicking people out, reporting content…).

Pressing the pause button allows people to take a break from their experience

Building a safe experience also means protecting people from some of their own fears: to prevent people afraid of heights from experiencing vertigo in certain 360 photos or videos, we designed a platform that appears whenever you look down.

Doing anything, anywhere

Once we’ve successfully managed to connect people with their friends in a safe virtual space, it’s important for us to provide them the tools to enrich their conversation and ensure they’re having a great time together.

One of the core aspects of the Facebook Spaces experience is the ability to access the same photos and videos you’re used to seeing on Facebook and show them to your friends in the space. This means you can watch the latest Star Wars trailer together or show your friends the photos from your recent vacation trip.

It also means you can explore the countless amazing 360 photos and videos available on Facebook. When you display one of them, it feels as if you had been teleporting where that photo or video was taken. You can now be together on Mars, front row at the stadium, or swimming underwater with sharks. The feeling of presence is real.

The challenge was to design a user interface that would allow people to access and navigate all of that great content while continuing their conversation. While people are used to certain paradigms and interactions on 2D screens (grids, scrolling, selecting, etc), finding ways to create a similarly intuitive browsing experience in VR took quite a few iterations. The result is an intuitive interface that immediately feels familiar. 360 content appears as mini-windows into a new world, leveraging your head motion to create a parallax effect that helps you preview the content.

Alongside exploring media content together, Facebook Spaces allows people to express their creativity and have fun. Using our 3D markers, people can draw in 3D and create objects and decorations.

Those drawings can be used for anything and can also be attached to an avatar, allowing people to decorate themselves. While we could have added countless advanced features and tools to it, we decided to keep our marker as simple and approachable as we could, leaving it to people to be creative within its constraints.

Bringing everyone in

While being present in a VR space with a friend is where the real magic is, we were aware that some people don’t own a VR headset yet. As VR continues to grow, we — as an industry — need to find ways to make VR approachable and attractive. One good way is to try to break the wallbetween VR and the real world and allow people to share their VR moments with the rest of their friends.

The first feature we built is a selfie stick, which allows people to capture their best moments in VR. This feature quickly turned out to be one of people’s favorites. When holding the selfie stick in VR, people often end up smiling in real life, demonstrating the strong attachment to their avatar. Once captured, people can immediately see the selfie they took and share it with their friends on Facebook via a simple tap of a button.

The second feature we built is a way for people to video call their friends on Messenger. This makes it possible for them to share a VR moment with a friend who doesn’t own a headset or is on the move. A simple tap on a button initiates the call, and the friend on Messenger will see the caller’s avatar and the space around them. This makes it possible for the person in VR to show their friend what they’re seeing and doing, giving them presence in the space.

Mark Zuckerberg video-calling me on Messenger during a rehearsal of our Oculus Connect demo in October

Designing Facebook Spaces (Part 2) — Presence & Immersion / June 19, 2017 by Gavin Lau

Being yourself in VR

If we were to build a people-first platform, we were going to focus our efforts on understanding what makes you feel truly present with someone else in VR. Very early on, we decided to build an experience for the Oculus Touch controllers, which were providing the highest fidelity VR experience. We were particularly interested in exploring what hands and hand gestures could provide in a social context. Our early research demonstrated that people were able to recognize their significant other from other people in VR just by recognizing their hand motion.

The first challenge was to figure out how to represent people in VR. While the first instinct is to try to represent people exactly like they are in real life, in very high fidelity, we had to find a way to avoid falling into the uncanny valley.

We played around with different types of avatar systems and different visual treatments. A lot of explorations that seemed interesting in theory turned out pretty disturbing or disappointing in VR.

One of our first explorations that ended up being pretty successful and delightful was what we called the Rabbitars, some very cute and expressive rabbits with flopping ears. With the Rabbitars, we learned the importance of a torso and arms in making you feel like the avatar next to you was present in the space. Since only the head and hands were tracked by the hardware, we used a technique called inverse kinematics to predict where the arms and torsos would be. While this technique doesn’t work really well when applied to your own body, we found that it works surprisingly well when looking at other people in a social context. Another really positive aspect of those avatars was how expressive their flat textured eyes were.

On the other hand, while very charming, those rabbits were far from ideal when having a conversation with friends. The moment you’d be with multiple people in a space, you were constantly looking around to figure out who was talking and it was hard to remember who was who. You were constantly reminded that you were not really looking at your friends but just at an abstract representation of them.

A few of our many avatar explorations

With every iteration, we learned new things that informed the next one. Here are some of the things we learned along the way:

To achieve the feeling of being present with your friends in VR, you need to be able to bring some elements of your real-world identity.
Attaching body and arms to head and hands makes your avatar feel more realistic and give it presence and volume in the space. Even if the current generation of VR headsets don’t track the body and arms, generating them based off the hand and head data goes a long way.
Adding motion to certain elements (hair, for example) when a person moves gives the avatar more life. For example, your glasses can move up and down on your nose when you shake your head.
For eyes, 3D eyeballs are a lot of work, and they are not as charming as we thought they were. We found that 2D eyeballs were easier to design for emotes (e.g. laugh) and more inviting/less intimidating.
When starring at an object or person, our eyes rarely stay still and wide open for more than a few seconds. Adding a fake “look away” intermission and some fake blinking helps make eyes feel alive.

In the end, we landed on very stylized avatars that act as a cartoon representation of yourself. Charming and inviting, those work really well within today’s constraints of VR systems and allow expressiveness and self representation without falling into the uncanny valley. This style also means the avatars are quite flattering and tend to be more of an aspirational version of who you are.

The evolution of our avatars between Oculus Connect 3 in October 2016 and F8 in April 2017

Creating your avatar

Alongside figuring out what our avatars would look like, we had to design how people would create their own. Immediately, our instinct was to look for ideas that would prevent people from having to do a step by step, pick a facial feature after the other, type of interaction. Too many games and experiences force you to spend 20 minutes painfully creating an avatar you’re not sure yet how you’re going to be using. And with VR, there’s the extra difficulty that you need to remember what you look like in real life, as you have a headset on your face.

Thankfully, the advancements in AI over the last few years made it possible for us to create an experience in which we can automatically create an avatar for you out of one of your Facebook photos. This makes the process of creating your avatar blazing fast and fun.

Example of an avatar generated out of a profile photo

The moment we started testing our algorithm, we realized it was going to play a big role in the success of our product. The experience of creating your virtual self suddenly felt simple, fun and magic instead of clunky and time consuming.

Because so much of our understanding of what we look like and how others perceive us comes from us looking at ourselves in the mirror, we designed this experience around a virtual mirror in which people can discover their new virtual face and customize it. The floating photos around the mirror serve as a reference point as people tweak their avatar, but can also be picked up to generate an avatar automatically out of the selected photo.

To edit, people can select a facial feature they’d like to change by simply tapping on it on their reflection, and a set of alternative options appear on the mirror for them to choose from.

For choosing special elements like clothing and glasses, we came up with the concept of a virtual magazine in which people can pick something they’d like to wear and it automatically applies to their avatar.

The simplicity and fun of this experience combined with the expressiveness and friendly look of the avatars made our avatar creation experience something that feels fun and magical.

Designing Facebook Spaces (Part 1) — Embarking on a new VR journey / June 19, 2017 by Gavin Lau

On April 18th, we introduced an early beta of Facebook Spaces, Facebook’s first social VR experience, on Oculus Rift. With Facebook Spaces, you can spend time with your friends in VR, no matter where they are in the world and feel like they’re here with you.

A people-first computing platform

In early 2016, I joined the newly formed Social VR team as its first Product Designer. The goal for that team led by Mike Booth was both ambitious and exciting: explore the future of social interactions in Virtual Reality. As I stepped into this new medium, I quickly realized how incredible its potential was: it could be a huge step in our journey towards making people feel more connected and closer to each other and to the world around them.

It also became clear to us very quickly that the Facebook experiences would have to be reimagined to double down on what this new platform could provide.

As Mark Zuckerberg described in his keynote at Oculus Connect 3, we’ve spent decades building software platforms that are organized around apps. When we pull up our phones, we see a grid of apps. We have apps for making phone calls, apps for sending messages, apps to browse the web, apps to order food… But unsurprisingly, the ones we spend the most time with are the ones that let us connect with our friends. This way of organizing software around apps doesn’t align really well with our human nature and the way we process the world around us. This doesn’t align with how, as humans, we approach the world. But there is a unique opportunity for VR to be a people-first computing platform. A platform in which people are at the core of the experience, with a true feeling of presence,and where they can choose to do the things they want, together.

Putting people at the core of the experience.

Designing for VR

Designing a virtual reality experience is both intriguing and daunting: few of the interaction and visual design patterns we’ve been crafting and polishing over the last decades are immediately applicable to VR. The industry is in its early days, it is a time of exploration and experimentation. Some of the interactions and design patterns we are inventing now may become standards in just a few years, or become completely obsolete as we make more progress and learn.

Facebook Spaces is the result of months of those experimentations. A lot of trial and error combined with a constantly refined design process. But even if VR is still uncharted territory and we don’t yet have all the processes and tools to help us explore it, some of the tools we have crafted over the years for software design are still useful. One of the most significant one is to define your design principles early on in the project, as they will guide a lot of your day-to-day decisions. We early on defined our design principles as follows:

Promote Agency — People should always be able interact with the content and environment around them and feel like they’re in control.
Embrace Asymmetry — VR interactions should work asymmetrically when possible (i.e. have a counterpart in the 2D world / with different input systems). Connecting with people both inside and outside of VR should be celebrated.
A Safe Space — Give people the tools to feel safe.
Feels like Facebook — The experience should feel new and exciting, yet familiar and have Facebook character.

Another aspect of our traditional design process for building new products or feature at Facebook that still applies to building VR experiences is to answer those three questions:

Who are we designing for?
What is the people problem we’re trying to solve?
What does success look like?

Doing this exercise helped the team understand what we were trying to achieve and what our high level goals should be, which allowed us to stay focused on the right things along the way. We decided to focus on delivering an experience that would allow you to:

Be “in person” with your friends regardless of where they are
Experience meaningful content together
Spend quality time together doing things you enjoy

Process & Tools

Once we have a better understanding of what we’re trying to accomplish, we move on to exploring how we can solve the problem. With VR, exploring that spectrum of solutions is often done with traditional design tools. Whether it’s by drawing on paper, creating a mockup in Sketch or Photoshop, or making a prototype in Origami or After Effects, we try to visualize some of the different ideas we have for interactions or interfaces. This allows us to move quickly and explore a large breadth of concepts and solutions.

But unlike with traditional software design, a lot of the ideas and concepts that seem very powerful and effective in mockups or videos can end up very disappointing or ineffective once in the headset.

2D mockups don’t always give a good perspective on the spatial contextand ergonomics of the interface or interaction you’re designing. Is this interface 2m large and 1m away, or 1m large and 50cm away? How far do I need to reach out to grab this object or touch this button?
It’s often hard to predict how an interaction will feel when using virtual hands, in a virtual world. Swiping windows in the air ala Minority Report looks cool in a movie, but when you can’t actually feel the windows at the tip of your finger and your hand goes through them, how effective is that solution?

One of the important lessons when designing for VR is that you should move your idea or concept as fast as possible to prototyping. Trying the interaction or interface in headset gives you a far better understanding of whether or not the solution will solve the problem.

Our team developed Facebook Spaces using Unity, a robust game engine used by many to develop 3D applications and games. Unity is also fairly approachable to designers as it offers a powerful editor that allows them to visualize the environment and make changes to every object without having to jump into the code. You can try your scene, make changes and see them reflected in the headset in real time, which is very useful when trying to fine tune the position, size, physics of an object or interface, for example.

We early on decided to do our prototyping in Unity as well. This means we can not only test our ideas rapidly, but can add them to our app and test them in a social context, with other people in a space with us. To move fast on complex prototypes, designers often pair up with engineers with the goal of standing up the core of the idea quickly to test it.

Another important aspect of making a concept come to life is creating the 3D assets and effects that will support the feature or interaction. Designers often pair up with 3D artists who can model, texture, animate or create the effects that will help craft the solution.

The last part of this process is to test those prototypes with as many people as possible to validate that the solution works with everyone. For us, this means having as many internal employees as possible trying it out and giving us feedback, as well as bringing external people in our research labs to understand how they interact with that feature. It also means looking at how people use the feature once launched to understand what works and what doesn’t.

Building a VR team

One of the biggest challenges of building Spaces was to assemble the teamthat would solve those new types of problems. Traditional software companies like Facebook have been crafting their team structures and hiring process over the years to facilitate agility and empower people to express their talents. But VR requires new types of skills that are hard to find.

A lot of our time while building Spaces was spent identifying those necessary skills and finding that talent: 3D art generalists, character artists, prototypers, real-time game engine experts… Different industries have developed and leveraged those skills in the past (movie and video game industries, for example). We had to search for those talents, get them excited about our mission, mix them with more traditional software designers and engineers and create the right process for them to collaborate and learn from each other. In the end, we built a team of incredibly talented people with diverse backgrounds and perspectives which allowed us to tackle those new types of problems.

Horizontal scrolling in mobile / June 19, 2017 by Gavin Lau

History of Horizontal scroll

Way back in 2005, the nationwide web usability report stated that one should NEVER use horizontal scrolling web design for websites. And that was because the whole UX of sideways scrolling was confusing to the user and it just did not comply to conventional web design standards.

How did the trend shift?

Horizontal scroll saw a shift in acceptance with the emergence of technologies such as iPads and extensive usage of smartphones in the recent years. With mobile devices, swiping movement became more intuitive and a whole site’s information could be available to the user at the swipe of a fingertip. The trend of horizontal scroll could be well attributed to

Most people, including you and me, immediately scroll down vertically when we click open an app.. What is it then, that we can do as designers to make a horizontal scroll intuitive? There are few things we need to keep in mind when we are incorporating horizontal scroll in our designs —

1. Careful planning — Figure out what fits where

Okay, okay — this might not be the most mind-blowing tip on the list, but it’s definitely the most important one on the list.

Carefully planning out the interface is the first things we learn about design. Sometimes time crunch, short deadlines or lazy days leads to just doing away with planning. But, with a horizontal design you definitely want to take the time to plan it out, draw paper prototypes and mock-ups, and figure out where and how everything is going to fit. There are a lot of things to consider and because it is not what most designers or visitors or used to, you have to plan a lot more than you might with a vertical site.

2. Use horizontal scroll in specific cases

Horizontal scroll works best when you want to display a subset of a category. A few situations where horizontal scroll have seen good success are -

1. Displaying a large catalogue of products or items so that different product categories can be easily shown

2. Displaying information in a large visual area that is not easy to see at a glance (e.g. a map)

3. Displaying discreet sections or slides of information on applications

3. Show visually

Horizontal sites are not as intuitive to visitors as vertical sites which they see all day, every day. So, desktops use arrows or dots to show the same. Your visitors would much rather be guided the way than have to click around to figure out how each thing works even if it makes complete sense to you as the designer. But this works well for desktops. Mobiles are touch based rather than click based.

For mobiles you have to do it differently. Your design must have a visual hint that a set of content is horizontally scrollable. The best way to do it is, letting a part of the scrollable content peek out!

4. Indicate extremes of a list

It’s important for the user to know when the scroll ends. We have noticed users repeat the scroll operation because they think that they didn’t scroll enough in the previous attempt.

1. A neat animation helps users realise that they have reached the end of the list.

2. Another way of indicating the end of the list is use of extra space at the end.

Positives of horizontal scroll

It is a design that is almost 100% consistent across all devices.
It is designed to allow space for secondary information, that doesn’t hog page space. For example when displaying images in a photo gallery, horizontal scrolling lets users see a small sample of the content and gives them the option to quickly ‘swipe’ or click for more.
Horizontal scrolling saves a lot of vertical screen space. Rather than displaying all the content at once on a very long page, horizontal layouts introduce users to smaller chunks of information. The layout is much more flexible. One can add content in both directions — vertical and horizontal.
Horizontal scrolling allows users to see options within a category by swiping to the side, or scrolling down to see different categories. This use of two dimensions helps users by showing a variety of options without making them visit separate category pages.

Conclusion

There is a lot of debate over the internet about the usage of horizontal scroll and it’s impact on UX. But I believe, if it’s used wisely it saves a lot of vertical space and helps in compartmentalising the content on an app. I’m happy to hear your thoughts on horizontal scroll and learn few more tips to make it intuitive.

Startups’ essential tools to manage a business / June 19, 2017 by Gavin Lau

Around $100 bucks is what a startup would need to pay monthly to have a fully functional work flow and identity online.

6 AM on Cairo’s ring road, while having the best coffee in town at On the Run, my friend and I decided to figure out would would it need to start a new startup. So we decided to pretend we’re about to start a new start up. And after going through the process, It amazed me how quickly one can have a startup up and running online in a matter of few minutes — giving they already have a business idea — That is why i decided to share the experience with you. Hoping someone can find it useful.

Unless your startup provides one of the below businesses, this is a list of services that any startup should start with, in order to have a successful work flow. Needless to say, we didn’t talk about the core idea of your startup or it’s cost, we’re simply showing an easy way to have everything else a startup would need.

The below is a list of paid services along with their FREE alternatives, however; we recommend subscribing to the paid service to ensure professional look and work flow.

Name and Availability

So, after you come up with a name you instantly go and check if it’s domain is available, I usually use name.com — cheap, reliable, very easy user interface and excellent support.

A normal domain name should cost you around USD $12.00 a year, that’s a USD $1.00 a month, however; it’s paid annually.

Once you register the domain, it’s time to pick a hosting, you can go with name.com, however; there are several other options like HostGator. Both offer hosting starting around USD $4.00 a month.

Price Check/Options:

$4.00 monthly fees
$12.00 annually

TOTAL SO FAR:

Monthly: $5.00 USD

Emails and Business tools

Right, so you should now have your website hosted on one of the servers we mentioned (or any server you decide to go with), you should instantly create your email alias. You can use your hosting email or if you decide to go a bit advanced, which I personally recommend, then go with Google Cloud’s G Suit, their starting basic plan is USD $5.00 per user a month and offers 30GB of space. Again, as a reseller, name.com offer cheaper G Suit for $4.17 a month (at the time of writing this article)

With G Suit you get 30 GB of space on Google Drive and Hangouts benefits

Price Check/Options:

Free
$04.17 monthly fees / User

TOTAL SO FAR:

Monthly: $9.17 USD

Registering On Social Networks

Now that you have an email, you can go ahead and start registering your startup on social networks. You can do that FREE but manually and one-by-one, or use a tool like KnowEm?™, KnowEm is The Brand/Username Search Engine for Social Media, Domains & Trademarks.

They can register your startup’s name on several networks with few clicks, they offer several plans, you can check them all on their website. For this article, we will be using the most basic one, which $84.95 Personal Essential plan, it offers complete signup of all profile info: photos, bio, URL and description on the top 25 most essential and popular social media websites for personal branding.

That said, KnowEm can still help you for FREE, by using their website to only check the availability of your username on these networks.

Price Check/Options:

One time fee: $84.95 (Optional)
Free

TOTAL SO FAR:

Monthly: $9.17 USD

Creating logos for Startups

When it comes to creating your logo, you can either pay and wait for a designer to come up with a design that you like, or if you were in a hurry and wanted to save both money and time like us, you can use any of the several tools available online, we used Squarespace Inc. Logo generator, it’s easy, powerful, fast solution and free/cheap.

With few clicks, you can have a decent, cool and minimal logo design ready for your brand. Once you’re happy with the design, you can either save it and come later to edit it, or download it. When downloading your design, you’re offered to either download a low res version for FREE or download the full design for only USD $10.00 as one time fee. I recommend the paid one as it’s essential to have a hi-res version of your startup’s logo.

Price Check/Options:

One time fee: $10.00 (Optional)
Free

TOTAL SO FAR:

Monthly: $9.17 USD

Website Design

Wesites are like your office, but virtually! it has to look good. Luckely, our options here are quite a lot.

By now, you should already have the domain and hosting, you can use a fairly easy and free software like WordPress to get your website up and running in no time, however; you will need to install and setup a theme that matches your brand persona. Now, WordPress does have a lot of eligant free themes, yet, I do recommend subscribing for services like Envato. With Envato Elements you can have unlimited access to Premium CMS themes, Tempaltes, designs, fonts, presentations templates and a lot more for the mere price of $29.00 per month.

Another option is using a service that we mentioned before, Squarespace Inc. They offer 2 pricing plans,

$16.00 with limited 20 pages per website.
$26.00 unlimited.

Price Check/Options:

Free
$29.00 monthly fees

TOTAL SO FAR:

Monthly: $38.17 USD

Sales Materials and Presentations Templates for Startups

Probably one of the most important items of your business, it’s what you and your brand will use to pitch for clients. I will, straight forward, recommend subscribing for Envato Elements they offer +700 amazing Keynote templates! Just brilliant!

Price Check/Options:

$29.00 monthly fees already paid with your Evanto subscription. So we won’t be counting this again.

Collaboration Tools and Productivity

While creating our work flow, we needed a way to follow up on the progress of the project, assign tasks for ourselves as well as tracking these tasks.

Project Management

We instantly started a new Asana project, created couple of tasks and assigned these tasks between the two of us.

Asana is a freemium-based project management tool that is designed to allow teammates to work together and follow up on tasks they’re assigned to.

A replacement of Asana can be Trello which is a great tool as well yet offers less features.

Collaboration & Communications

To reduce emails and for easier and faster conversation between the both of us, we created a new team on Slack. Slack is a cloud-based set of team collaboration tools and services. Slack provides integrations to many services, one of them is Asana, which means we can actually create tasks on the fly from our conversations on Slack to Asana.

Managing Finance for Startups

Once things starts to roll, you will be asked by your clients to provide invoices, this could be a messy task that is full of hassle! I recommend using an online financial helper tool like FreshBooks, It’s a cloud based accounting software that will really make your invoicing process a breath!

With FreshBooks you can bill your clients with a click on a button, keep track of your finances, full reports of your sales and much more, I urge you have a look on their features and see their friendly pricing plans

With FreshBooks, you can send a link with your invoice for your clients to pay online — and that is magic to me! it saves a lot of hassle in terms of followups, emails and storage! While maintaining a professional, smart and trackable business!

You can start with the Lite package, it offers invoicing of 5 active clients at the cost of $15.00/month

Price Check/Options:

$15.00 monthly fees

TOTAL SO FAR:

Monthly: $53.17 USD

A professional design software for startups

I will always, ALWAYS pick Adobe’s products over anything else, for $50.00 a month (Paid Annually) you can get access to almost everything you need to design stuff for your startup. Head out to Adobe Creative Cloud and pick a plan that suites your needs, I’m subscribed to the ALL APPS plan, which is the highest plan for only $49.00 for individuals. I have access to all adobe creative cloud apps and to be installed on 2 devices! And that is all what I need.

Now of course there are free applications that does what Adobe’s do, like GIMP, however; IMO, Adobe is the easiest and most powerful.

TOTAL SO FAR:

Monthly: USD $103.17

Conclusion

So, for a mere $100 bucks a month, and about another $100.00 one time fees, you can have a fully functional, professional setup for your startup. It really is that easy! Keeping in mind that we’re subscribed to the most premium services on every aspect we went through. Of course, this price can reduce massively if you decided to exclude any of the services we mentioned and went with the free replacement.

Lecture 2 : What is the Design Process? / June 14, 2017 by Gavin Lau

We want to see your design process.
— Said every interviewer, their voices echoing into the abyss.

A design process defines every designer’s journey to solve wicked problems. It’s a phrase that appears at talks, in job descriptions, and during job interviews.

Figure 1: (cue: something about understanding and iteration in linear or circular format)

But, what exactly is a design process? Each company interprets it differently. And, each designer interprets that interpretation differently too. And, when asked to clarify, they fear that we are being too prescriptive and the process should be unique to an individual.

We agree that no one can actually nor should formally define a design process. There are way too many contexts that get in the way of structure. However, within our class, we discovered that new designers struggle with higher-level conceptual models and jargon, all while trying to actually do product design.

As a result, this guide seeks to put faces to names of the several facets of the design process. Unlike having you uncover each step on your own, this guide is intended to be a benchmark that you can later morph into the process that ultimately works for you.

Drawbacks to a Simplified Design Process

The ‘simplified’ design process with which students are familiar is modeled after a typical/academic case study.

Interview a bunch of people
Brainstorm (only using Post-Its)
Do a lot of low fidelity sketches
Make some wireframes
Do some user testing
Create high fidelity mockups (.~*pixel perfect.~*)
Iterate, iterate, iterate (if you screw things up)

Well, what is wrong with that? That sounds like the process to me.

You’re right. There is nothing wrong about this process.

However, jargon like ‘low fidelity’ and ‘medium-fidelity’ do not mean the same thing for more and less experienced designers. For less experienced designers, it is interpreted to be the deliverables whether it be sketches, post-its, or beautiful mockups. For more experienced designers, it abbreviates an entire phase of work that consists of the goals, expected outcomes, and methods of doing what they do best.

Demystifying the Design Process for Digital Products

When we think of the design process, we should think about three components that are characterized by three different guiding questions.

Figure 1: Diagram of the three components of the design process within Intro to Digital Product Design

1. Elements · What is our expected outcome?
The Elements of User Experience defines checkpoints like the feature itself, the interaction, the content, and the visual styling that helps translate a users’ intentions towards their expected outcomes.

2. Stages · What is our approach?
The Double Diamond mixes divergent and convergent thinking, human-centered design, and iterative design to ensure quality.

3. Tools · What do we use?
These define the set of tools we use at one or more of the stages of the design process. They are optimized for specific goals of the process whether it is understanding the user or creating the right affordances for an interface.

These are the components of designing the experiences that solved problems in our lives, and they serve as a framework that uncovers solutions to complex problems. For each, we’ll take you through each part of the process.

Defining the Elements of Great Products

Elements of User Experience Framework by Jesse James Garrett

Figure 2: Adaptation of the Elements of User Experience Diagram

A products’ user experience isn’t about long drop shadows or fancy gradients. At its core, good user experience defines a problem for its users and a delightful solution. The elements:

Set checkpoints that builds one after the element prior.
Consider both task-oriented (reserving an Airbnb) and information-oriented components (organizing content in an Airbnb listing).
Migrate from the abstract (ideas) to the concrete (visual styling).

Strategy — People Problem and Business Goal

The strategy is the intersection between solving their people problem and achieving their business goals. Solutions that accomodate both make up the solution space.

Figure 3: Diagram of the intersection between user needs and business goals. — Figure 3: Diagram of the intersection between user needs and business goals.

People Problem
Before Venmo, a people problem is that “Millennials wanted to lend and borrow money from their friends, but they cannot because as cash becomes more obsolete, wire transfers and debit cards make peer-to-peer transactions tedious.”

Business Goal
However, as Venmo, a business, addresses a people problem, they needed to sustain themselves. Their business model resulted in charging businesses 2.9% for every transaction. Therefore, a business goal was to make Venmo a desirable and accessible payment medium, and to do that, they had to secure a strong and consistent user base [1].

Scope — Feature Requirements and Content Requirements

The scope determines the set of features that are necessary for a feasible and impactful subset of the solution space.

Figure 4: This diagram shows an example of a single feature within Venmo peer-to-peer transactions. Connected to it are some examples of content types that we need to include and consider. — Figure 4: This diagram shows an example of a single feature within Venmo peer-to-peer transactions. Connected to it are some examples of content types that we need to include and consider.

Feature Requirements
Some (not all) features that both improve peer-to-peer transaction and improve user growth are:

Make Transaction (Send or Request): How might we move money from one person’s account to another’s?
Searching for Friends: How might we find people in the digital space?
Connecting with Bank Account: How might we have all our money at the click of a button?

Content Requirements
Now, let’s dig deeper into Make Transaction and how that aligns with the strategy. As for content, we need to fit the mental model of how it’s done traditionally. We would need another person, money, and a reason. However, there are limitation in the digital realm. In real life you can tell if a person is actually your friend, but that is difficult on your phone. Therefore, content objects may need more content that are attributes to the parent: what they ook like (profile picture), what their name is (full name), and a unique identifier (username).

Structure — Interaction Design and Information Architecture

The interaction design defines steps needed to achieve a goal using the features, and the information architecture further defines more complex context groups and hierarchies using the content.

Interaction Design

Figure 5: The empty diamonds shows how we make p2p transactions in person. The blue diamonds show how they are done in Venmo. The sparsely and longer dotted lines respectively demonstrate a significant and less-frequent drop-off rate.

Venmo mapped their user flow to how we exchange money already. For example, we rarely migrate $9.50 to a different pocket before meeting the person we owe. Nonetheless, the traditional flow has limitations on your behavior (referred to as channel factors [2] in social psychology). Examples of channel factors could be physically finding your friend, having enough money, or having the courage to tell your friend what they owe you.

Luckily, Venmo abstracted all those barriers into the screen of a smartphone which results in a much stronger, seamless interaction.

Information Architecture

Information architecture, at its core, is a set of relationships between all types of data that better demonstrate what is being represented on an interface.

Some relationships build up more complex objects like how names, profile pictures, and usernames make up a ‘user’.
Some relationships show ownership like a transaction requiring an amount, description and timestamp.
Some show importance like how Make Transaction takes less clicks to access than Search.

Skeleton — User Interface (UI) Design and Navigation Design

From the set interaction, the User Interface translates the types of elements (buttons, labels, inputs) that drives the user from one step to the next step. And, Navigation Design uses the information architecture to visually organize these elements not only from screen to screen, but from element to element.

User Interface Design

When making a transaction, at Find Friend, a User Interface audit would contain elements to accomodate certain use cases:

Finding a person you frequently exchange money with (Suggested Table View)
Find a person you don’t really know (Search Bar)
Seeing if the person is the right person (Profile Button, username)

Navigation Design

If you found your friend, you will navigate to a new space to determine the amount. Navigation Design is not only picking a tab bar vs. hamburger menu or pushing new screens upon click. Navigation Design is customarily how you move through content. In the Fig. 7, it could be organizing your suggested friends by alphabetical order or by location.

In Fig. 8, navigation design can organize elements to insert amount, add a description, and requesting transaction to be arranged from top down. Moreover, it can also decide that they live on the same screen so that users can securely double-check all the details of their transaction before confirming.

Surface — Visual Design and Motion Design:

Visual Design helps the interface afford certain actions. Light text in an input can afford that it is empty, and a colored rectangle can afford a click or a tap. Motion Design indicates temporal states of objects (loading, ephemerality, etc.) or shows spatially where we are within the product.

Aesthetics that are less utilitarian or have little to no utility, though, convey tone and brand personality, or they make visuals digestible by keeping them simple and consistent.

Visual Design

Figure 9: Above shows different design decisions that could have intentionally morphed into the Venmo application you see today.

At the feed (the end of a transaction), Venmo uses circle profile pictures that are, by convention, used to indicate people, green to indicate gains, and red to indicate losses. It draws divider lines to group transaction information, positions actors of a transaction above to show ownership — and, most interestingly, emphasizes the description to possibly create a more social tone to talk about money.

Linguistically, it probably thought “requested money from” was consistent yet wordier than “charged”, and felt that the heart and comment icons were ubiquitous enough to justify removing the label.

However, what keeps it all together is the unsaturated blue, that is both neutral and utilitarian that we all (all, as in, technology-fluent-Millennials) come to recognize as Venmo’s.

Figure 10: Example of motion design within Venmo that demonstrates progress as well as dismisses the transaction instance (this is a prototype, so it isn’t 1:1).

On a side note, motion design can provide feedback over time. In the figure above, the blue bar slides across the screen to show that the transaction is completing. Then, the screen pulls down which first signifies that you are exiting the transaction instance and returning to the core application. Had the transitions been more stark you would find yourself subtly lost and confused.

Why Do We Need the Elements of Good UX?

Many new designers dive directly into visual details: how a drop-down animates, the color of the navigation bar, etc. However, they usually miss the components that lie below the cosmetic.

Strategically, we use these components as checkpoints that start from divergent features to differences in typesetting. That way, we reduce the overhead of over-exploring interactions of infeasible features, UI’s for dead-end interactions, or visual treatment of UI elements that cannot exist. Therefore, we substantiate our progress — our euphoria — at 5 different points in the design process: strategy, scope, structure, skeleton, and surface. As a result, we build the foundation step by step so that “going back to the drawing board” is never as hard as it sounds.

More importantly, we do this to frame our work when presented to a wider team. We see this becoming more and more necessary when students are learning product design through Dribbble [5], through mentorship, and even through academia. That’s when visual design ends up meaning both “long drop shadows” and “affordances”.

If we standardize the language, it will be easier for new designers to identify expectations. We can use these elements to better set timelines and to focus conversations to specific components. Moreover, it can help diagnose weaknesses of any existing product in a way that the feedback can be constructive and clear.

There is a theory that the language you speak determines how you think, how you see everything. — Arrival (2016)

The movie Arrival, speaks a lot to this concept of having language affecting how you see the world. The same exists for the small lexicon for designers and how it can help us evaluate and communicate designs. At it’s core, the Elements of User Experience allow us to see any and all work, as layers of intentionality instead of just pixels on a screen.

Defining the Stages of the Design Process

Figure 11: Double Diamond Diagram adapted from British Design Council and Dan Nessler

So, how do we build up the elements of a great user experience? It’s not as easy as mowing through product’s Strategy, Scope, Structure, Skeleton and Surface. because there is no guarantee that each element works.

What if we are actually solving a problem that rarely exists?
What if we are picking features that don’t properly address the problem?
What if the interaction makes a feature inaccessible?
What if the UI makes an interaction frustrating to use?
What if the visual design makes the UI invisible?

The Double Diamond Framework[6] by the British Design Council allows us to make intentional design decisions by exploring various options (divergent thinking), while validating stronger ones and weeding out the weaker ones (convergent thinking).

We use this same approach to address two things:

Is this the right problem to solve?
Is this the right solution to execute?

The process is designed to leave no stone unturned to ensure that the intended direction is more likely to create the desired impact.

Designing the Right Thing

First, we’ll look at designing the right thing. As we said in the first lecture, we use the Clay Christensen Jobs Framework to better communicate what a people problem actually is using an end-user, the context, the need, and the expected outcome.

For example, before Uber, a people problem was:

When pressed for time, I want to go to my next destination reliably, so that I can focus on what I have to do. But I can’t do that well because: public transport is less flexible and taxis are expensive.

Uber didn’t fix the SF transportation infrastructure nor did they provide tools for users to better plan in advance. They removed the overhead of establishing trust between a person who can provide transportation and a person who needed it.

Existing people problems surface frustration, workarounds, or an inabilities to accomplish a certain goal. However, we can’t solve every single problem — because not all problems are created equal. In reality, some affect more people, some are more profitable, and some can’t be solved at all.

To better understand what problems need solving, we take an investigative approach using our users and our business goals.

Step 1: Discover
Our goal is to discover as much data as possible based off of an initial insight. We do this by conducting user research and looking at competitor products. With user and market research, we understand — on a human level — the unfulfilled needs from our users and a competitive analysis of our market space. We audit the constraints of our business and our developers and our timeline. We look at this information as our raw data, our resources, to further decide what problem to tackle.

Step 2: Define
From the raw data, we find trends and insights that span across different users and scenarios. We shelf problems that are expensive or too ambitious, and select problems that can create a large impact. From there, we select the best problem to solve and move to developing solutions to solve it.

Designing the Thing Right

With the problem from the first diamond, now you can focus on how to solve it. And similar to how we treat problems, there are also many solutions that can solve a single problem.

Step 3: Develop
We begin to ideate any solution that can solve our determined People Problem. We reserve any judgement and think big, wild, and crazy. We surface our information from our research, and create ‘How Might We’s’ or tactical solutions that could work. Overall, this stage is characteristic of ideation, brainstorming, sketches, collaboration, etc. Near the end, you will find trends in these explorations that you will treat as candidates for implementation as long as they fit your constraints like feasibility and impact.

Step 4: Deliver

Figure 13: Closer look at the Deliver Stage. Demonstrates small divergent and convergent loops which we refer to as iterations.

With a set of promising features or feature, you will explore how they actually interface with people. You will start developing the Structure, Skeleton, and Surface through smaller iterative loops. At each loop you will execute, test, and understand what works. Evaluation could look like presenting your work at critique, running an AB Test, or showing users a prototype. From here, you learn what implementations work and which one’s don’t, all leading to one solution.

How to apply a design thinking, HCD, UX or any creative process from scratch
This how-to article aims at providing designers, creative thinkers or even project managers with a tool to set up…medium.com

Most of this section was expanded on Dan Nessler and his thoughts on applying creative processes. This is a very in depth and more expansive view on the double diamond, and we highly suggest you read it.

Why Do We Need the Double Diamond?

It is one thing to know what can go into a product, but its another thing to know what ought to go into a product. New designers have a tendency of picking solutions that void business goals (‘Let’s have Venmo disable itself if you spend too much money’), that are too complex to build (‘Let’s have Venmo auto-invest your money into stocks that will be successful’), or don’t solve relevant problems (‘Let’s have direct messaging in Venmo!’).

The Double Diamond keeps us grounded. It allows us to put our ideas in front of samples of the target audience before it is built, get feedback from stakeholders, and uncover other solutions that are better than the one you just thought of. It allows us to context switch from exploring possibilities to pitting them all against each other. That way, the best idea will always be in the mix, and, they will always rise above the rest.

“I’ve found that I need to develop these two personas separately. . . . be a much more ruthless editor and be a much more careless artist.”

— Christopher Niemann (Abstract)

Defining the Tools that Optimize Our Workflow

These tools are emergent in the history of design. They outline best practices, protocols, and rules that improve how we approach specific stages. For example, when discovering (in Stages), to achieve the people problem (in Elements), we may need to conduct user research and market research. These tools in itself have baked in philosophies and protocols that guarantee an expectation.

Tools

Research (User/Market): The overall goal is to understand the context of a given People Problem. This may include exercises like guerrilla testing, focus groups, interviews, surveys, competitive analysis, or traditional googling.

Low Fidelity: Characterized as low effort and detail. This constraint allows us to be generative. Messy Sketches or list of steps that a user takes helps us put our ideas onto paper without any restraint.

Medium Fidelity: Characterized as medium effort and detail. This constraint allows us to make higher-level decisions. We can focus on the interaction and UI without talking about visual treatment.

High Fidelity: Characterized as high effort and detail. This constraint allows us to focus on color, clarity, and content. This type of work is more time-consuming, but the end-goal is to really evaluate how a product will most accurately perform in a real-life setting.

User Testing: This allows us to preemptively test whether or not a product will fulfill their People Problem. This can involve prototypes, research protocols, and users.

Critique: While many decisions can be constantly tested, testing is time consuming. Designers are hired with some level of intuition, and getting feedback from other designers pulls in perspectives from other similar problems.

Why Do We Need the Tools?

Humans are easily distracted. We, designers at all levels, sometimes stress about the border radius of a button, when we know we need to focus on the user flow. We fall in love with our work, when we know we should be open-minded and willing to take feedback. Therefore, practices like ‘fidelities’ and ‘critique’ emerged in these creative roles. It defined rules: “Don’t focus on color in medium fidelity work.” “ Don’t bias the interview by asking a leading question.” “Take feedback like champ.” As a result, they help subdue our flaws of human nature (because you can never get rid of them) and generate better work.

“Can we define the process as low, medium, high fidelity?”

It’s less explicit. When checkpoints are sketches, grayscale wireframes, and polished work, beginners are more willing to show the artifacts instead of actually doing the mental work to actually identify the right content, flows, etc.
Tools aren’t constrained to any stage. High fidelity work can drive the vision early on in the design process as a north star [7], and low fidelity work can be used to quickly ideate visual detailing of a component.
Different interpretations. Depending on the team, sketch work and wireframes may not exist. Some teams can be just as generative while maintaining a pixel-perfection with their work.

Putting it Together — The Design Process is Like Baking a Cake

Figure 13: Combined Diagram that shows temporally how the Double Diamond and Elements of UX relate. Not shown: how the tools incorporate (mostly because I haven’t thought of a good visualization)

To bake a cake — a fairly complex one — you have instructions, ingredients, and a set of tools. The Elements represent different components of the cake: fruit and cake layers, frosting, details (I clearly don’t bake). However, there is a natural order: first make the base, then you add the frosting, etc. The instructions are the Stages that teaches you how to properly make each part. Lastly, we use a set of Tools, measuring cup, whisk, and oven, to make components at any step of the way.

Process is King, but Context is God

Understand, identify, execute. Define, explore, refine, build, learn [BuzzFeed, 8]. Discover, Define, Develop, Deliver.

New designers (especially in a school setting), when taught the design process, treat it like law. They force the process, slow down development, and have little empathy for the people they work with.

However, the design process is somewhat unrealistic. Any ‘step-by-step’ process, even this one, fits perfectly when the variables are ideal. And, in many cases, things aren’t: tight deadlines, no resources for research, stubborn managers, etc. And, in some cases, the process may not be the best fit for the task (designing a login screen).

At the end of the day, a true design process is not a set of Silicon Valley buzz words (extra points for alliteration). It is the ability to know when to apply parts of it and when not to. It is the ability to know how a process fits with scenarios like adjusting to a developer’s skillset, compromising a shorter timeline, or accommodating the goals of another team.

A designer exists to solve problems, but problems never come in a nice packaging.

The Psychology Principles Every UI/UX Designer Needs to Know / June 13, 2017 by Gavin Lau

Psychology plays a big part in a user’s experience with an application. By understanding how our designs are perceived, we can make adjustments so that the apps we create are more effective in achieving the goals of the user.

To help you understand the perception of the user, I will introduce some design principles which I think are the most important, and also provide common examples of these principles in practice. Let’s start with the Von Restorff effect:

Von Restorff effect

The Von Restorff effect (also known as the isolation effect) predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered!

Does this ring any bells?

This is the main reason why all call-to-actions (CTAs) look different from the rest of the action buttons on a site or application!

We want users to be able to differentiate between a simple action button and a CTA, in order for them to have a clear understanding what the CTA does, whilst also remembering it throughout their use of the application or site.

“When multiple similar objects are present, the one that differs from the rest is most likely to be remembered!”

Serial position effect

The Serial Position Effect is the propensity of a user to best remember the first and last items in a series.

From left to right, Twitter, Medium, ProductHunt

This is why most applications nowadays ditch the hamburger menu and go for a bottom or top bar navigation, placing the most important user actions to the right or left. In the image above, you can see some examples from popular iOS applications. Each put the “Home” and “Profile” items all the way to the left and right, with serial position effect in mind.

Cognitive load

Cognitive load refers to the total amount of mental effort being used in a person’s working memory. To put it simply, it is the amount of thought you need to exercise in order to complete a specific task.

“Cognitive load is the amount of thought you need to exercise in order to complete a specific task.”

Cognitive load theory can be differentiated into three types:

Intrinsic cognitive load
Extraneous cognitive load
Germane cognitive load

I will touch upon the Intrinsic and Germane types as I think that these are the most applicable to UX design.

Intrinsic Cognitive Load

Intrinsic cognitive load is the difficulty associated with a specific instructional topic. It’s the main reason micro-copy and copy play a huge role in a good user experience.

For example most of the time on applications’ empty states, we prompt users to complete a task. Here, the copy needs to be short, simple and with the appropriate words in order for the user to be able to easily follow the instructions.

From left to right, Stayful, Serist, Lucidchart

Germane Cognitive Load

Germane cognitive load is the cognitive load devoted to processing information and construction of schemas. The schemas describe a pattern of thought that organises categories of information and any relationships among them.

One of the reasons we use design patterns is because they’re something we’re programmed to do by default – so it’s easier for the users to recognise and learn something new if they can discern it into a pattern from something they already understand.

“It’s easier for users to learn something new if they can discern it to a pattern from something they understand”

Hick’s Law

Hick’s Law is the most popular principle, along with the Gestalt Laws.

It’s also very simple to understand and practice. Hick’s Law describes that the time it takes for a person to make a decision depends on the choices available to him or her. So if the number of choices increases, the time to make a decision increases logarithmically.

A very nice example of Hick’s Law that applies to user experience design are lists:

Law of Proximity

Law of proximity is part of the Gestalt Laws of Perceptual Organization, and it states that objects that are near, or proximate to each other, tend to be grouped together. To put it in simpler terms, our brain can easily associate objects close to each other, better than it does objects that are spaced far apart. This clustering occurs because humans have a natural tendency to organise and group things together.

“The Law of Proximity states that objects that are near, or proximate to each other, tend to be grouped together”

In the example above, there are 72 circles. We recognise the circles in groups, based on the distance between them. Categorically, we also perceive that there’s a group of 36 circles on the left side of the image, and 3 groups of 12 circles on the right side of the image.

I believe this example makes it clear that there is a need to group things together when designing a UI, as well as the importance of being careful when putting things together since users may naturally think they are associated with each other.

Designing a Visual System at Scale / June 12, 2017 by Gavin Lau

About a year ago, I took on the challenge of leading the effort to design a cohesive visual system for all of Facebook’s business products — the tools businesses use to connect to billions of people around the world.

While each of the tools performed their intended functions well, they weren’t delivering a satisfying overall experience or inspiring the confidence of the businesses who were entrusting their growth to us. Our UI patterns, use of color, and iconography all varied from product to product. The overall experience looked not only out of date but also out of touch with the Facebook that these professionals were using in their personal lives.

We wanted to craft a consistent, satisfying, human experience worthy of the value our business products can unlock for both companies and people. We also wanted to demonstrate our commitment to those businesses by improving the tools they count on.

One system, many experiences

I knew the project would be a team effort, but I was intimidated. Up to that point, I’d designed UI for The Sims and created an extensive style guide for SFMOMA, but those projects only had one audience and one product. Creating a coherent visual system that spanned multiple ad tools for different customer segments, including millions of small businesses, big brands, and agencies, as well as our marketing website, was an entirely different scale of challenge, and much more complicated than anything I’d ever done. Not only did every product have a different look and feel, but there were 150 designers across those products; the system would have to work for all of them.

I didn’t know what the system would look like, but I knew it couldn’t be too prescriptive. It had to be extensible and flexible, with the ability to evolve as we grew. Before diving into visuals, I needed to understand how we wanted people to experience our products. I started working with our design leadership team to define our attributes. How did we want the experience to feel? We came up with a range of descriptions for different contexts, like human, professional, trustworthy, and friendly.

Aligning stakeholders

Next, I did an audit across all of Facebook’s business products, as well as our consumer illustrations and colors. I showed our different teams how disjointed the overall experience was. Then I facilitated workshops with the different teams, using dot voting and sticky-note writing to quickly identify designs we thought were successful.

Once we came to an agreement on a basic direction — one we called “abstract geometric style” — we went through many, many rounds of refinement. We had a clear direction now, but we still needed a shared way to understand how it could be applied to all the different products the system would reshape.

Tying it all together

I stepped way back to look at the system as a whole. When I revisited the exercise we’d done to define our brand attributes, I saw that they could apply across every one of the different experiences we were aiming to bring together. It was just a matter of adjusting the intensity of each attribute along a spectrum depending on the audience and the product.

For example, we wanted Power Editor, an advertising interface used primarily by professionals at ad agencies, to feel more sophisticated and advanced. On the other hand, people who use Pages are mostly small and medium-sized businesses, so the product should feel simpler and more approachable.

The same went for color. One audience might need it to be trustworthy and calm, while another needs it to feel friendly. I studied the color system and tried to map it to the dimensions that we developed for Facebook business. By applying dimensions like these across all the experiences the project would affect, I started to see how we could address all of our audiences in a coherent, systematic way.

That doesn’t mean it was easy. Developing a color palette that would work across all consumer and business products — holding them together without erasing meaningful differences — was one of our biggest challenges. Meeting it required a lot of collaboration between multiple teams.

We used tone-on-tone to reinforce the Facebook brand and creates more consistency across consumer and business illustrations. Within the overall scheme, we used different color schemes for different business products to create clear distinctions between the surfaces, helping people stay oriented.

Keeping it human

Color was just part of our effort to craft business tools that brought different experiences together while preserving appropriate distinctions. Facebook is all about connecting people, and if our business tools — even the most advanced ones — feel dehumanizing or detached, they won’t feel like part of Facebook.

We needed our new visual system to be simple and universal enough to connect emotionally with the breadth of people who use our tools around the world. I wrote guidelines for representing people within our visual system, including a lot of different skin tones and hairstyles to represent diversity.

The human figures also had to reflect a variety of workplaces (agency vs. restaurant, for example). Consumer figures should look like everyday people, never stiff or robotic. Across all products, people should be used to tell a story or convey a message — never randomly placed in a composition. Every illustration needed to clearly communicate how they related to our products.

Five things I learned

The farther away I get from the project’s beginning, the clearer its biggest lessons become. Some of them are specific to Facebook’s unique scale, but I hope others are useful to anyone building a visual system for a diverse range of experiences — or leading complex design projects in general. Here are the five biggest takeaways:

Work with teams to define clear goals early on. This project had a lot of ambiguity and dependencies. During the research phase, we conducted intensive working sessions with all of our business design teams. The insights we gained helped us establish clear guiding principles.
Take charge. Once those principles have been set, don’t overdo democracy. Prolonged, emotionally charged debates can lead to a design that mashes everyone’s ideas together and lacks a strong personality. When in doubt, refer back to the guiding principles.
Stay in touch with moving targets. Many of our business products were being rebranded at the same time this work was in development. Communicating with the right stakeholders from these teams at the right times helped us influence their work. It also helped us better understand their design needs.
Educate, educate, educate. A lot of my most important work focused on building a broader understanding of what the system was and why it mattered. We evangelized the system early and often, through a wide range of events and Q&As with different design teams.
Stay involved. No matter how coherent and flexible your system is, trust that it will need ongoing active maintenance. To help keep all our moving parts on track, I’ve stayed involved, not just as a source of answers but also as a listener. Asking design teams about their challenges has enabled us to implement several improvements that have made it easier for designers to fit their work into the system.

Toward stronger connections

Not every experience across every Facebook business and consumer product strikes a perfect balance between distinctiveness and unity with the overall Facebook experience. But the visual system has helped us make a big leap toward that goal. Increasingly, our business tools don’t just work; they also feel good to use. They feel more like a part of Facebook, and more in tune with why people are using them in the first place — to make meaningful connections with other people and businesses.

UX Design for E-Commerce: Principles and Strategies. / June 12, 2017 by Gavin Lau

Quite long time ago known British author and scholar Thomas Gray stated: «Commerce changes the fate and genius of nations.» For the last decade, commerce has got hundreds of new ways to reach the customer, especially with the leap of innovation in technology and its growing role in everyday life. More and more buyers are turning to the experience of shopping online, more and more sellers start new channels and methods responding this trend. And this is the sphere in which design of positive user experience directly moves the stakeholders to profits. Today we are talking about UX design for e-commerce.

What is E-Commerce?

As we mentioned in our free ebook «Design for Business», in general terms, e-commerce (Electronic Commerce) is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services and moreover — enabling full cycle of commerce operations, including payments, delivery and refunds.

The last decade witnessed booming e-commerce development. Today it provides the opportunities for not only e-trade both from businesses to buyers but also online auctions and user-to-user sales platforms. E-commerce systems and activities today include presenting and booking wide range of services, e-banking, commercial operations with e-money and e-wallets, diverse forms of e-marketing and many other things which customers are using more and more often on everyday basis.

The role of design for e-commerce

«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful» says CEO of Amazon Jeff Bezos, and it’s hard to argue. Obviously, the success of e-commerce activity depends on several factors among which:

the quality of the product or service offered
the quality of the content presenting the offer to customers
the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

So, it’s easy to see that UI/UX design part plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target user.

Designing e-commerce website or mobile app, designers should definitely consider the following aspects:

operational simplicity
strong branding
security of users’ data
effective use of visual elements
clear data presentation via menus, catalogs etc.
user’s ability to leave feedback about goods and services
easily available general and contact information about the business providing goods or services
design that supports the offer not overshadowing it.

On that ground, let’s check the details in three key perspectives whose combination in design makes success for e-commerce platforms: business aspect, UX aspect and UI aspect.

Business Perspective: Branding and Promotion

Websites and mobile applications for e-commerce are (well, should be) always the products created within a particular business scheme. It means they are the part of a certain business plan with the specific goals in mind and the planned ways to achieve them. Therefore, design for this sort of products definitely starts much before the first real line appears on the paper or screen. There are several important issues which should be considered and agreed upon before actual design starts. Among them we would mention the following:

— USP of the product. It’s essential to set which benefit (or set of benefits) will differ this website or application from the others and make it the core value presented via design.

— defined target audience. In e-commerce, it’s important to set who your buyers are from the initial stage of the project. Knowing their age and culture, potential problems and wishes, level of tech literacy and trust to the idea of online shopping, the social circles influencing them and aspects forming their habits, designers can be more precise searching for the shortest way to successful purchase.

— positioning, tone and voice of the brand. How would you describe your brand? Is it friendly? Fun or serious? Mass or luxury? Easily available or exclusive? Does it communicate to potential buyers in formal, informal or semi-formal style? Does it open much or mostly keeps reserved silence creating the mystery around the offered goods? These questions may seem far from business which has to be all about finance, profits, points of sales and other stuff of that kind. Still, these issues present the number of features which will set the future brand image. And design is somehow going to be its face, outfit and make-up.

— marketing and sales channels. No doubt, it’s hard to immediately set all the channels for selling and promoting the future product; however, effective business planning means thinking over the core of them from the start. It will enable design team track and support the consistent experience of both getting to product and actually interacting with it. Even more, designers take active part in setting and strengthening marketing and sales via variety of means from branded items, landing pages and product videos to exclusive photos, posters and banners attracting customers to the platform where they actually can buy.

— type of business relations. Type of business relations based on target customers deeply influences the core aspects of UX design. Set from the start whether it’s B2C, B2B or B2C to create proper layout and predict possible user behavior.

— typical environment of use. Designers need to know when, where and in which conditions users will typically use the website or app: these factors have a considerable impact on the decisions about layout, color scheme, typography, transitions and interactions, which all need to have the global objective to make the process of shopping easy, quick and enjoyable.

It’s easy to see that all the mentioned points directly influence design solutions as well as techniques and approaches for their realization. It means that the best way to go is to involve designers into the discussion together with stakeholders and marketing specialists at early ideation stage if it’s possible; if not, then specification and tasks provided to designer afterward have to include maximum information about those aspects. In case you work in outsource design team, make sure you get this information to be more concentrated on the key aspects of the task, and if not, communicate with the clients as long as it’s needed to get all those points clear. This communication will save many hours of iterations, which happens in cases when design is started out of the thin air without the basis of information and goals.

UX perspective

Talking about e-commerce, it’s vital to understand that selling the goods once via the website or mobile application is the minimal program of actions. What stakeholders of the business really aim at is having this user buying via their website or app again and again. User retention is the direct condition of growing profits. And we have to admit that this aspect makes e-commerce sphere highly attractive for designers. The objective which should be achieved is clear and simple: people have to reach the e-commerce platform and buy items offered on it.

Make no mistake, positive user experience is the key thing for user retention. In case of e-commerce, the four key aspects of UX are quite clear:

utility lies in the nature of the product: it helps users to choose and buy things and services they need.
usability has to make the customer journey clear and easy, without unnecessary clicks, time lost on loading overloaded pages or inconvenient menu, frustration of not getting feedback from the system etc.
accessibility has to bring up design which can be used by different categories of users, for example people with disabilities (dyslexic, color-blind etc.) or low level of tech literacy.
desirability means that the app will get the look and feel which will make the experience enjoyable and users will wish to get back again.

Among the core aspects dealing with the mentioned issues and considered from the early stages of design like UX-wireframing and user research, we would mention the following.

Intuitive navigation

You can have an amazing website with stylish and trendy design and breathtaking images, but the success of it will be measured not by the number of «wows» it will bring out. The efficiency is measured simply: by the number of complete purchases. If users don’t buy, design means nothing while stakeholders lose their money. Clear intuitive navigation plays the premier violin here. At every step of interaction, users need to understand clearly plenty of simple things, like:

— what company or brand they are dealing with

— what page they are at

— where the menu is

— how they can get back to home page or catalog

— where is the search and filters

— how long the page-loading process is going to take

— how they can see the detailed information about the item

— how they can choose between the option for the same item (color, size etc.)

— how they can pay for the item

— how they can save the items they would like to get back to later

— how they can contact the seller

— how they can see the rating and reviews of previous buyers etc.

Every button, link and card can play the crucial role and change the conversion significantly. What’s vital to bear in mind: in terms of intense competition we have in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations. What they demand from e-commerce is the experience which is faster, easier and more convenient comparing to going to the actual store. If you don’t give it to them, they will look for it somewhere else.

Sales funnel

Sales funnel (in other words — purchase funnel) is a technique that moves the customer through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase. As we described before in the book, basic sales funnel includes the following stages:

Introduction (Awareness). User gets the initial information about the product, its brand name and nature. In other words, user learns that the product or service exists on the market.
Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.
Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.
Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to actions and explanation of purchase process.
Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.
Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribes to updates, gets the chance to repeat the purchase easily if desired.

In terms of e-commerce, sales funnel is supported with diversity of functions digital products can offer. Awareness of the principles of sales funnel leads to customer-centric, informative and engaging design solutions. Sales funnel can be either fully represented on the website or landing page as well as in mobile application or from outer source, for example, social media taking over the mission of awareness and interest and directing engaged traffic to the platform enabling users to buy.

Effective presentation of the items

The layout of the product pages or screens is another core aspect to think over. On the one hand, it’s advisable not to overload the page with too much information which will overwhelm users and can distract their attention from the major goal — to make the purchase. On the other hand, users aren’t ready to go from one page to the other to get different information about the item. Therefore, the designer has to take the time for thorough research of the issue and find the right balance of data given on one screen. The analysis of target audience and user testing can give the clues what information is required by the target audience for the specific categories of items or services.

UI perspective

Being concentrated on not only logic and transitions but also looks and style, UI design stage also contributes much to the success of the e-commerce project. It is the aspect which creates visual performance and sets the solid ground for the desirability of the interface and positive emotional feedback from the buyer. At UI design stage for e-commerce, designers have to find the general stylistic concept which will support UX aspects mentioned before and will give the online point-of-sale the attractive looks. Some aspects, which designers have to take into account in this perspective, are:

choice of colors that correspond to the brand image and strengthen emotional feedback
setting the style corresponding to the nature of the commercial offer: reaching the website, people should instantly understand if it sells household goods, fresh vegetables, trendy clothes, exclusive devices or anything else
visual hierarchy which makes the core zones of interaction instantly noticeable
general harmony of perception which sets the feeling of aesthetic satisfaction supporting positive user experience.

Points to consider

For the bottom line, here’s a simple check-list for some essential aspects designers would rather consider working on e-commerce projects:

Know the buyers: user research will help to get the needs and wishes of target audience.

Have users informed: make the screens or pages filled with information and functionality users really need for making purchase.

Keep design consistent: not only does the website or app itself need consistency of design for all the screens in terms of general branding, but also social networks, print materials and actual point-of-sales appearance if they exist.

Refresh the experience: minor changes or attractive details added to the interface from time to time without breaking general visual consistency can give the feeling of refreshment, like new looks of mannequins do in the window displays of the shop.

Check your solutions: user testing can have a great impact on understanding the factors that boost conversions. Ideally, it should be applied not only in the process of design but also after the launch of e-commerce platform on the basis of real user interactions and troubles which can arise.

Be careful about revolutions and wow-effect: the power of habit plays the big role in the products of this kind. Choosing layout, menus or icons, which stand too far from the ones users are generally accustomed to, can bring confusion and frustration. For example, usage of any other image instead of the magnifying glass to mark the search field can result in bad user experience as buyers know that visual symbol and will look for it. So, making this sort of experiments, take time to test them well.

Respect the buyers: remember, that they are not abstract metrics — every figure in conversion report is about real people. Look for the interface that will respect their time, effort and needs and it will bring positive experience of shopping for both sides.

How Pokemon Go And A Backlinking Strategy Helped Our Company Strike Gold / June 12, 2017 by Gavin Lau

This is what happened in the summer of 2016 for Nintendo and Niantic, the companies behind Pokemon Go. The augmented reality mobile game became a global phenomenon, almost overnight.

Other times in business, gold may just strike a company.

At least that’s what it felt like at AppInstitute in the summer of 2016, when we published a piece of Pokemon-related content on our website that garnered so much response it crashed our servers. OK, when I put it that way it doesn’t sound quite like gold — especially when compared to the billions of dollars Niantic made with their app. But, still. This Pokemon thing was a big deal for us. Maybe a little background would help.

Baby Got Back(links)

In the last couple of years, we’ve been building out the company blog with a focus on the intersection of mobile apps and marketing.

As it turns out, that’s a really busy intersection.

We were investing in the creation of quality, shareable content — and so was everybody else. That’s because we’re all content marketers now: this is what Google demands of us.

I mean, they didn’t literally demand it, but the way their algorithms are set up to assess a site’s relevance to any search makes a content-oriented strategy necessary. SEO and maintaining page ranks isn’t just a matter of having the right keywords on your site. Google also takes into account the number (and kind) of other websites linking back to you to determine your ranking on search results. The more “important” or popular the site is that’s linking back, the greater the weight Google places on that. Think of backlinks as your friends vouching for you: the more esteemed your friends, the more valuable their support.

Also, Google says these links need to be natural. That’s kind of a vague descriptor, but the intent is clear. In the simplest of terms: An unnatural link would be me leaving my URL in the comments section of a Mashable article. A natural link would be a Mashable article that uses my content as a source and links back to it (ahem).

In any case, this was where we found ourselves early in the summer of 2016. Our blog had been attracting visitors, with regular posting and social mentions spreading the word. Our ranking was high, but tenuous. It was a constant battle to stay relevant, so we really focused on building up our backlinks. The more we could get other sites pointing to us as an authority, the deeper our grasp on the coveted Page 1 listing.

To do this, we brainstormed ideas to direct the internet’s attention over in our direction. We wanted something light and shareable, with enough empirical heft to make it attractive to tech writers and bloggers looking for stories.

Ultimately, we decided to go with a web page that featured a real-time stat counter. In this case, we wanted to focus on mobile app growth. We’d show App Store downloads and revenues creeping ever higher for top mobile apps.

We fashioned the counter so that it started at zero whenever a user landed on the page.

What made the counter more sharable was the aspect of being able to view downloads and revenue climb in real time. It gave users context. We all agreed this was a solid plan, and moved ahead with the page design and marketing research end of it.

And then Pokemon Go happened.

I Like Big Bucks And I Cannot Lie

On July 6, 2016, we were putting the finishing touches on our app counter and already had a full promotion strategy in place.

That same day, Pokemon Go debuted on the Apple and Android App Stores and generated around $4 million in revenue. Within 13 hours, it occupied the top spot on Apple’s HIghest Grossing App chart. Our team immediately agreed on two observations about these numbers:

Holy moly, that’s a lot of money! (Full disclosure: we did not say “moly.”)
We needed to refocus our downloads and revenue counter around this incredible story.

With respect to observation number two, it was a no-brainer, even if we were only a few days away from our own launch. There’s just no better way to create shareable content than to have it be something that is of the moment. Content should always be fresh and current, but this was different. Pokemon Go was huge, and the world was having a shared moment. It would have been foolish not to capitalize on the opportunity we were handed. We also recognized that moments have ends, and we needed to get this done quickly, before the craze mellowed itself out and people got tired of hearing about it.

This is what I meant when I say “gold struck us.” Because it was at the top of the charts, Pokemon Go would have been part of our post regardless — but it would have been nothing more than an item on the “Highest Grossing Games” list. But at that moment there was so much hype around the game’s success, and it felt like we’d been handed a marketing gift.

And it turned out we were right.

Though we left most of the page intact, we gave Pokemon Go counter a spot above the fold and the legend read, “While you’ve been on this page Pokemon Go has taken over the world.” That made all the difference. The campaign was a huge success: in seven days, we attracted 92,000 visitors to our site — and I wasn’t joking earlier when I said the spike in traffic crashed our servers. We also amassed nearly 450 new backlinks (279 from “high authority” domains), and we started ranking for 294 new keywords.

All we had to do was change the focus of our content to piggyback on the Pokemon Go craze. That, and a whole lot of promotion. You didn’t think it was going to be that easy, did you?

Take the Average App Man and Tell Him That: It’s Gotta Pack Much Stats

While our coders were busy revamping the page to is new Pokemon-centric theme, we went back to the beginning to identify who we were going to target in promoting our page. We narrowed the audience down to two (pretty large) categories:

– Pokemon fans, who we found by searching for, and then joining, user communities and forums on the topic. We also searched users and groups on social media channels.
– Journalists and bloggers, who were not quite as easy to locate as the fans. Our research led us to some great Twitter lists and we were able to identify the names and Twitter accounts of many tech writers and bloggers. From there, we used software — Kimono and Email Hunter — to automate the retrieving of all their email addresses.

We compiled our master list of forums and users that we thought would be most interested in the Pokemon counter. When the site went live, that’s when the real work began. Among the many efforts we made to make sure the right people were aware of this content:

– For everyone we had an email address for, we sent an email. We used Replyapp to manage this email as a campaign, though, so we could monitor its progress and results. Each email was personalized (addressing the person by name), and the body of its text was short and to the point. Basically: We’ve got stats about the Pokemon Go craze, and you might be interested in them. Here’s the URL. It was a little more elegant than that, but you get the idea.
– For Twitter users, we didn’t just send a cold DM hoping they’d read it. Instead, we had team members going through everyone on our list one by one. They’d follow the person, like one of their tweets, retweet it, and then sent a DM with the same message as the email, more or less.
– Still on Twitter, we pinned a post with the link to the counter to the top of our main outreach account’s feed. Then we used software to automate the liking of any posts using keywords related to Pokemon.
– We reached out to people from our list on Facebook, using Facebook Messenger, and also posted the link on several community forums we’d previously identified.
– On Pokemon fan forums, we created accounts and posted the link to our counter.
– We also got active on Quora, asking and answering questions about the stat site and gaining exposure as the questions showed up in others’ feeds.
– Since we were all-in at this point, we figured we’d throw some money at the promotion too. We ran a campaign on Google Adwords targeted at searches related to Pokemon. Using Facebook Ads, our campaign was targeted at journalists and writers with interest in Pokemon Go. That’s a weird and tiny niche, now that I think about it. But if they existed, we were going to reach them.

They’re Hooked and They Can’t Stop Staring

Now would be the time when I go over the results and how well all this worked out, but I’ve already done that. And besides, the point of this piece is not to revel in my team’s success. The point is that we all learnt something from that success. I know our tech team did when our servers crashed.

Getting caught by surprise by the huge reaction caused me to step back and look at what was behind it. Although we knew it could be big, I never expected the kind of response that our content got. We’re all aware that creating engaging and fun content is the starting point. The content should always be topical — the bigger the topic, the better the response.

We got a little lucky in that we were already working on something that was a perfect fit for the tech story of the summer. You can bet that I’ll be keeping my eye out for the next big phenomenon that would make for a good topic.

And while the nature of the internet makes it easy for content to go viral, you still have to get that content in front of the right people at first. All viral content starts with the first share: find a whole group of people who are likely to share it, and you’re ahead of the game. But you’ve got to find those people. Nobody said digital marketing success would be easy. Your content strategy needs to be planned meticulously — plan every detail and target your promotions heavily.

You need to be completely organized about it if you want to achieve results that surprise you.

The design community we believe in / June 12, 2017 by Gavin Lau

Learn from the community, give back to the community.

A big part of what we learned in UX comes from online reading: articles, tutorials, resources, blogs. It’s all available out there, for free — and all you have to do is invest some time to dig it up. But there’s a lot. UX is becoming increasingly popular, and with that comes a lot of clutter, noise and disorientation. uxdesign.cc is focused on organizing and sharing UX content with our community.

How?

As designers, there are a few north stars that we try to keep in mind in everything we do. In a fast-paced industry like Design and Tech, it’s easy to fall into the trap of getting blinded by novelty, and simply following what other people are saying or doing.

Everything we do has to have a purpose.

That applies to our design decisions, but also to our careers, our field, our communities and our lives.

Here are a few things we believe every designer should be mindful of, and that drives all of our decisions on what is published on uxdesign.cc:

Impartiality. As designers, we have the power to impact what people see, think and feel, and the responsibility of not using that power to mislead them or create false beliefs. The same applies to our content: we never publish articles that are trying to sell something or that blur the line between content and marketing. Impartiality is important because it ensures a fair game for everyone — and our authors know the importance of that.
Accessibility. The experiences we design have to be accessible to all types of users, regardless of their context or condition. Similarly, the stories we publish should be accessible for all audiences — from design veterans to people who are just curious about our field. No jargons. No tech talk. Accessibility in writing means making it easy for people to understand new concepts, technologies or ideas. Great writers (as well as great designers) know how to make things simple and consider an audience larger than themselves.
Diversity. Our design teams have to be diverse to ensure we are considering all types of perspectives — which will eventually lead to stronger and better design solutions. The articles we publish also have to encourage multiple and diverse perspectives, that will lead us to a stronger collective thinking. We welcome authors and readers from all countries, backgrounds, and levels of experience.
Change. As designers, it is part of our jobs to constantly challenge the status quo, pushing for innovation and seeing things differently. With writing it is just the same. At uxdesign.cc, we are particularly excited about pieces that challenge universal truths and established paradigms. After all, our job as designers is to question the world we live in.
Community. Collaboration is key to any design team out there. At uxdesign.cc, we also encourage discussion, participation and collaboration on every story we publish. The best stories are the ones that make people urge to respond — either in agreement or disagreement.

If you are here, there’s a big chance you think alike.

Let’s make our community stronger.

And let’s be thoughtful about how we do it.