Running a Google Design Sprint for startups from start to end

“This was A productive and fun day. Everyone that attended, said they really enjoyed the process, the option of being a part of the thinking process and the general atmosphere. There is a consensus we need more sessions like these and with additional team members.”

This is the feedback I was given from the 90Min. team, a football platform product with over 30 million users per month and $40M in funding after the Google Design Sprint workshop I ran for them a couple of weeks ago.

I think this feedback symbolises the real essence of this methodology developed at Google Ventures and in the next lines i’ll explain why.

As a member of Google Developers Expert program, I’ve been invited last May to take part in the first “Google Academy for Design Sprint Masters”, a full day workshop that took place at the company’s HQ in Mountain View, California with 30 more UX and UI experts. This was the first time that the company ran this workshop for professionals that aren’t part of the company.

We were all really excited to get to know the agile oriented methodology and understand its interesting techniques.

So, what’s a Design Sprint?

The Design Sprint is a methodology of agile user experience and product design process that puts the business, technology and especially the user in the center. Basically it’s a process of structured brainstorming for answering critical business questions through design, prototyping, and testing new ideas with users throughout one to five days workshop.

The process combines 6 stages:

• Understand
• Define
• Diverge
• Decide
• Prototype
• Validate

This mini toolkit for creating a user experience is very practical when you’ve already done your research and reached the point where your team needs to be focused on a specific mission, or to be more precise — a specific challenge that needs a solution.

Each stage of the method includes practices of a large UX process such as user interviews, user testing and user research. These stages help us to sum up the educated studies so we can get the participants on the same stage and create a healthy process.

Prior the Sprint

The workshop preparation is very crucial for the Sprint’s success.

Recruiting a group of 8 participants from different aspects of the company: business, marketing, technology, product and design is important in order to get the best perspective of the challenge. I requested the team leader to provide the email of each participant and sent to all of them an introduction email. The email was a great built up for the workshop and it got really excited about the workshop.

Preparing a brief document prior the workshop helped us to create a great introduction of the challenge. The brief should include a short paragraph that specifies the current challenge, which deliverables we would like to get by the end of the process, vision of how a success outcome will look like and the initial milestones of the production process.

And lastly, the logistics preparation including finding the right place, collect the equipment and create the actual schedule so the sprint will work smoothly.

Here’s what you will need to run a design sprint:

• Sharpies
• Sticky notes
• Voting dots stickers
• A4 paper
• Erasable marker
• Pencils
• Notebooks
• Whiteboard
• Colored papers

 

The Stages

1. Understand

Right at the beginning of the day, we made sure to clarify the challenge statement, which was “Re-design the product’s navigation”, we understood the business and marketing opportunities of the challenge during a 5 minutes pitch from the company’s VP product, another 5 minutes pitch from the development team leader to understand the technological capabilities, and finally a 5 minutes review of the users feedback and competitors from the product manager.

During this quick 5 minutes talk of each aspect, the team wrote down their notes using the “How Might We” technique. This approach ensures that the team asks the right questions and helps us find innovative answers. For example, “How might we help our users to find content they’re interested in?” and “How might we make the navigation fun and intuitive for our users?” — This kind of questions motivate us to push the boundaries forward in terms of the user experience we want to achieve and finding new ways of technological solutions.

The ‘How Might We’ stickies

2. Define

After we understood the challenge and its components, we proceeded on defining the initial strategy of the solution we’re looking for.

We started by creating various personas that describe the product’s users, created the first journey map from when they first discovered the product until they became “power users”. Then we created a user statement which is a simple sentence that describes the user’s characteristics, his needs, motivations and what he values the most. Next, we created the design principles list: adjectives that we want our users to describe our product with. And lastly, we executed the “First Tweet” — a very inspiring exercise of creating the company’s first tweet after the publicity of the solution within the Twitter limitation of 140 characters. The best guidance is to tell the group to imagine that it’s time to launch the feature and ask them “What is the first announcing tweet you will send out?”

I also gave the team a reference of a real tweet Google published when they launched “OnHub” router — giving a real example as an inspiration helped the group open their minds.

3. Diverge

Many times, we’re picking the first solution that comes to mind, this might be the best solution, but not always. The Diverge stage is where the fun begins!

Now that we understand the challenge and defined the strategy, we can start throwing ideas. To do so, there’s a great technique called “Crazy 8 in 5”: each individual sketches quick 8 potential UI solutions in 5 minutes. The purpose of this activity is to generate many ways of solving the challenge no matter if they’re realistic or not.

Deciding on which option to prototype (90Min team)

4. Decide

After the sketching, each team member shared the ideas on the whiteboard, the group discussed about them and afterwards we started voting using dot stickers, on our favourite solutions. After the voting we started to get a clear picture of the most popular solutions.

But how can we choose one idea to prototype? Using the “Risk vs. Reward” scale, we took each popular solution and positioned it in scale of the various risks vs. the value — It revealed what’s easy to do and important for users so we could decide which one to prototype.

5. Prototype

The prototype allows us to test our ideas, save valuable time, money and other resources. Using the prototype, we can try to predict the success and failure potential of the solution we came up with in a short time. The prototype should be as much as accurate and polished so it can be clear and easy to test with actual users and receive their ultimate feedback. The team separated into small groups and started prototyping on paper and used Popmobile app to generate transitions and links between the screens. The prototype started to get a look of a real interactive product. Afterwards the company’s designer finalized the sketches into a clean wireframes using Photoshop and created the final version of the prototype using InVision.

6. Validate

The most important question is “How can we know if we did a good job?”

In order to answer this question, we used the InVision prototype the team created and introduced the context to different users in order to test it with them, and asked them some guiding questions. But that is not all.

The validation stages requires the technology team to review the solution and figure out its complexity, how much time it takes to develop it and if we’re able to support this kind of solution in our framework. In our case it was approved and pretty much possible in the timeframe we wanted.

Last but not least — the stakeholders validation. Their review is essential for the sprint to succeed. Usually, they’re the ones that are funding and managing the company, therefore they can point out other crucial perspectives and make the final validation.

Finished the design sprint — now what?

At that stage, after a full day of work, we finished the sprint and parted ways. It’s up to us — the design sprint leaders — to monitor the progress of the development. Like an aid to the product managers, and be there if the team has doubts or questions about the solution.

 

Conclusion

From my experience while working with various startups and product companies in the past few years, I can say that, as a designer, you’re often required to provide quick solutions for challenges that aren’t always clear enough and when finding a solution. Mostly you don’t have the privilege of validating it, usually due to a lack of budget and time.

The Design Sprint method allows us to solve these challenges using quick validations without wasting too many resources on other solutions that the company didn’t even learn. By creating quick prototypes, we can get actual feedback and see if there’s a real potential for the solution we’ve created.

Some companies and corporates may consider the democracy approach of the Design Sprint as a threat, but they shouldn’t. The joint effort cuts out the organisation bureaucracy for a change, and gives each participant the feeling that his opinion counts and contributes to a better chemistry and greater synergy in the company.

Mostly, this process gives us useful techniques to increase creativity and generate new ideas while putting the users needs upfront, and contributes to position the user experience as a problem solver.

Want to learn more about the Google Design Sprint?

Understanding the value of UX

If you are at all involved with any type of online business, you have most likely seen the term UX Design used and abused. You’ve probably heard people try to explain what it is with colorful metaphors, that may be entertaining, but fail to really explain how UX Design serves the user.

The last thing any designer wants is to have a service they offer undervalued simply because the client doesn’t understand it clearly. I believe it’s important to note that the business owner’s goal is to sell their product, and to find a way to be clear about how UX design will benefit them and their customer.

I took this as a personal challenge — to help define the term UX Design in a clear and concise way that everyone was able to understand. I found this to be more difficult than I expected as people naturally focus more on the “design” in User Experience Design than the “user”. Personally, I believe the user should be the first consideration in designing anything.

Understanding value

All relationships have their foundation in values. It’s about what you bring and what you expect in return. Though each relationship is different, they depend on these values to be truly healthy. For instance:

My dog brings me happiness, daily exercise, and a feeling of responsibility and caring. In return, she gets exercise, food, shelter, and — most importantly — love in return.

My clients get an agency-like quality delivered without the bureaucracy. They’ll get it on-time and mostly without revisions. In return, I get long-term engagements and clients that adapt to my way of working. Also, I don’t have to chase new clients!

Facebook brings me updates from close and not-so-close friends. It really is a great experience and although there are things that could improve, the positives outweigh the negatives. The value it brings me in my daily life verify its worth. In return, I bring Facebook content and engagement. It might seem trivial, but it’s not trivial for Facebook.

What does this have to do with UX Design?

When people ask what a UX Designer does, one thing I tell them is that I help companies align their product’s value with the expectations of their users. They certainly don’t want their users to expect too much and end up disappointed. Honestly, even giving the user more than they expect can leave them feeling overwhelmed. This is why aligning values and expectations is so important. It’s the first step to building long term relationships with your customers.

Stable relationships thrive on balanced values. Each one of the examples above may be different in the values given/received, but without a balance, one side or the other will suffer.

Time vs. attention: everyday experiences have a cost

Like many of you, I attend my fair share of conferences over the year. In fact, The Conference in Malmö is one that I’ve loved attending yearly. However, this past year, I decided not to go. No, it has nothing to do with the speakers, the topics, or because my calendar is full of client work. It’s because I’ve come to a revelation: I simply can’t concentrate for an entire day — and I bet you can’t either.

If I’m too busy to take something on, I shouldn’t say “I don’t have the time”. In fact, I often do have the time. It’s not that hard to squeeze in some extra time for someone. What I don’t have — and what I can’t squeeze in — is more attention. Attention is a far more limited resource than time. — Jason Fried

While I may have the time for more projects, conferences, and other random stuff, I don’t have the attention for it. Other projects or my personal life would suffer from borrowing attention from them. I’m less and less willing to make that sacrifice. A conference, meeting, or app require effort. Sure, I could squeeze in 7 meetings a day, but my attention only will allow 3 or 4 of those to be productive.

What does this have to do with UX Design?

You need to look at the experience you’re crafting — a conference, app, or a store — and be able to understand the attention span it requires. I can keep my attention focused at a conference for around 4 hours, but I don’t even last an hour browsing Facebook.

Just as it’s important to align your values for your user, it is equally important to understand their attention span. Many product owners can only measure their success as “time spent on site”, but I’m not sure if that is really a good metric. Is longer better? Does that really mean they love browsing your site? Or are having a hard time finding what they’re looking for?

Learn to create valuable UX

Designing for user experience is a lot more layered than we give it credit for. It’s far more than just understanding how button placement can affect a user’s decision making process. It’s understanding how your user values the experience you are presenting to them.

It’s as if that experience respects how the user is going to use it and not be demanding, or neglectful, of their attention. It’s about finding the user’s measure of “just right”.

Win More A/B Tests by Answering These 3 Questions

When it comes to gauging the effectiveness of your A/B testing efforts, there’s one KPI that beats them all: win rate. 

Sadly, 85-90% of all A/B tests are doomed to fail. It’s not only disappointing to lose an A/B test; it’s also costly. Your team has to go back to the drawing board each time, hoping the newest B version will be the one that works.

We’ve mentioned before that some of your most successful A/B test ideas are going to come straight from your users. By observing users’ behavior and seeing where they get confused, you’ll identify the optimization opportunities that actually move the needle, rather than trusting your gut. That’s why it’s always a good idea to run a few quick user tests before you embark on a new A/B test.

Here are three key optimization questions to ask yourself as you plan and analyze your user tests.

1. Where are users getting stuck?

As you review your user test videos, keep an eye out for any significant usability problems your users encounter as they go through the flow of your site. We’re talking about things that prevent your users from doing what they need to do, such as confusing navigation menus, buggy forms, and popups that cover up important information.

Fixing these problems can be your key to a successful B version. Your job is to find the low-hanging fruit: the usability issues that are easy to fix and make a big impact on your conversions. 

Make note of any usability problems that occur, and then organize them by the frequency and severity of the problem. Next, estimate how easy it will be to implement a fix for each one. This will help you plan out your optimization roadmap.

2. What are people missing?

The things people don’t do on your site can be as interesting as the things they do. As you observe users interacting with your site, pay attention to what they’re not doing or noticing. 

People notoriously skim online rather than thoroughly inspecting every element of your site. That means they’re likely to miss a lot of information on their first visit. You need to identify whether your users are skipping over any crucial info that would lead them to convert—if only they had seen it.

For example, maybe there’s a call-to-action that seems really obvious to you and your team, but when you watch your test videos, you find that users are missing it completely because they get distracted by something else further down the page.

This will give you the opportunity to make those elements more prominent in your next B version.

3. Does your target market understand your value proposition?

The headline on your homepage or landing page is usually the first thing visitors read, but it doesn’t always hit home. If users spend a few minutes on your site but don’t really understand what you’re offering (or why they should care), then it’s time to try out some new copy.

But before writing a clever new line of copy for your next A/B test, run a few user tests to find out whether people understand the value of your product from your existing headline. One way to do this is to have users spend a few moments looking around the site, and then ask them to explain what the company or product does, using their own words.

This will help you figure out whether your copy adequately conveys your value proposition. Plus, you’ll get some interesting new ideas from hearing the words people in your target market use to describe what you do.

HOW TO QUICKLY CREATE A POWERFUL SURVEY

Surveys are great for quickly collecting large amounts of data about your users. At Envato, our design team creates surveys so we can gain valuable insight about the way people use our product. 

But preparing a great survey is challenging—writing good questions takes time, and the results can often be disappointing.

Here’s how we used to create surveys: we’d jump straight into writing questions. Our colleagues and stakeholders would give us feedback on the questions without a true understanding of who the survey was for or what we wanted to learn. 

Before long we’d have a 20-question, difficult-to-complete monster of a survey. The results would be just as bad: difficult to understand, with no clear insight.

“Surveys are useless until you know who it’s for and what you want to learn from it.”

So we created The Lean Survey Canvas to help us prepare better surveys faster (in just a few hours). It allows everyone to collaborate around a single source of truth with all of the information at hand. We now focus on the insight we need for validating our hypotheses rather than writing questions. The result is a more concise survey (under 8 questions) that’s much easier for the participant to complete with clear, actionable insight from the results. 

Download The Lean Survey Canvas template (opens PDF). 

How to use the canvas

The canvas is a non-digital process designed to evolve a great survey in a fast, lean, and iterative way. It’s best completed as a group (make sure you include all the important stakeholders), but you can also work on it by yourself. 

Print out the canvas as large as you can and stick it on a wall. You’ll need Post-it notes and spare sheets of paper to allow you to move things around and adapt as you explore the survey.

Follow the order indicated in the diagram above. You’ll find yourself jumping back and forth as you discover new ideas and discard previous ones. Avoid writing any questions until you’re happy with the flow of the whole survey—you’ll find that most of the questions you come up with aren’t needed.

“You’ll find most survey questions you come up with aren’t needed.”

Pro tip: Start by writing notes for each section on separate sheets of paper (allowing you to create as many ideas as possible) before mapping it out onto the canvas itself.

Strategic versus tactical

Before you start, decide if your survey will be strategic or tactical—otherwise you won’t get the results you need. 

A strategic-focused survey helps you build a better picture of your user and enables you to make better decisions about the future of your product or service. 

“You won’t get the results you need unless you decide if your survey is strategic or tactical.”

A tactical survey answers the question “What should we build next?” 

It’s worth asking all the stakeholders involved about what output they need from the survey results.

 

1. What do we need to learn?

This is the most important part of the survey, and the answers to all the other sections on the canvas should relate back to this. You can use questions or assumptions here or a mix of both. To help you decide, consider the output you need from the survey and how it’ll be used. 

To complete this section, we use the 4 “what do we know?” questions:

1. What do we know we know? Do we need to confirm any of our existing knowledge?
2. What do we know we don’t know? What questions do we need to ask to find out the unknowns?
3. What don’t we know that we know? What assumptions do we have that we could validate?
4. What don’t we know that we don’t know? Who should we speak to to find out more?

An example: the design team at Envato uses a couple of survey formats more than others. We use a Jobs-To-Be-Done survey to find the right kind of people we need to interview and an Outcome-Driven Innovation survey to tactically discover the right features to build next. In our Jobs-To-Be-Done survey we seek to validate our assumptions about the jobs our users hire our product for and discover who the interesting users are that we want to interview (those with the best stories).

 

2. What information do we know already?

These could be answers to the questions from step 1 that you already know, information about the recipients that we don’t have to ask, or data that helps give more context and value to the results. This information typically comes from:

• Previous survey results
• Previous qualitative studies
• Analytics data
• Existing user database

Ask what you need to do to get this information and create actions to get it.

Pro tip: Use a different color Post-it note for recording these actions on the canvas.

Another example: by adding data such as lifetime value or revenue per customer to the results of the survey, we can see which people to invite for interviews based on their value as customers.

 

3. Who do we need to learn from?

Next we need to define the people who will complete our survey. List out the characteristics of the ideal participant, plus a list of the types of people you don’t want. For instance, you may need a regular or a new buyer, but you may want to avoid people you’ve already surveyed or those who haven’t opted in to emails.

 

4. How do we reach these people?

Now we have an idea who we want to send the survey to, we need to figure out how we’ll get it to them. There are lots of ways this can be done, including:

• An email list to your users
• Featured survey promotion in your product
• Following certain actions within a process
• Google Adwords
• Using a paid-for survey tool

Make a note of the channel you think will reach the people you need. Also consider things like incentives or any split tests you want to do and details like timing and reminders.

Pro tip: We use Post-it notes in different colors to show any actions like getting a list of users with the right attributes created.

 

5. The questions

Now for the hard part. But thanks to all the sections you’ve already completed, it should be much easier. If you didn’t generate lots of ideas while going through the previous steps, take some time now to brainstorm as many questions as you can.

• Create as many different questions as you can—time-box this so you don’t take too long
• Group the questions based on how they relate to the main learnings (the ones you created in step 1)
• Go through each group, and ask “Does it answer one of the questions set out in step 1?” Get rid of those that don’t. If it answers more than one, see if it’s possible to split the question. It’ll be easier to understand the results if each survey question relates to a single learning.
• Any learnings missing from step 1? Try to get some ideas for every answer.
• Write a single question for each group. You’ll need to combine and rewrite questions again and again to make sure you get the most out of each question.
• Do you need a screener question? To help clarify that you have the right people answering the questions. (You created this in step 3.)
• Do you need to capture important information (e.g. their contact details if you need to get in touch with them)?
• Order survey questions so they tell a story. This will help the recipients complete the survey easily as it builds on the detail as they go through it. Aim for about 6 or 7 questions in total. Any more and you’ll see a much lower completion rate.

“Order survey questions so they tell a story.”

Now you’re ready to start writing the final version of the questions, and add any answer options:

• Start adding all the answers for single or multiple choice questions
• Try not to write the obvious—think of the answer from the participant’s point of view
• Check “Does this answer the real question from step 1?” If it doesn’t, get rid of it or rewrite it

An example: we wanted to know if our buyers bought from us as freelancers or as part of their job, and if there was a client involved. Once we’d written the obvious question and answers, we challenged whether it made sense, if it was easy to answer, and if it really answered the question we had. We rewrote the whole question to focus on whether people bought for themselves or their employer and if someone else paid for what they bought.

 

6. Thank you

Next you need to write the ending to your survey. This is the message the participant sees after completing all the questions and giving you the insight you really value. So don’t forget to thank them and let them know what you’ll do with their information. You’ll also need to include any details of the incentive, if you offered one.

 

7. Invite/intro

Write your survey intro last so you can prepare the participant for the tasks ahead. You need to include information such as:

• How long the survey will take to complete
• Why you’re asking for the information
• What you’ll use the information for
• If you’ll be asking any sensitive questions or for personal details
• Any details about an incentive

Review and iterate

As a group, you’ve created your canvas. So now go back through and make sure it makes sense. Ask someone who isn’t part of the group to take a look through the canvas and check with them that the survey answers the questions set out. Iterate a few times to get it just right—that’s why we used Post-it notes!

Getting the survey out

Now you’re ready to send your survey out to your participants. However, first you’ll probably want to get it written by a copywriter in the correct tone of voice. You may also want to test the survey internally. Tools like Google Forms are perfect for these quick tests. If you make any changes, update the canvas.

Next, it’s time to set the survey up and send it out. Survey tools like Typeform, Formstack, or Survey Monkey make creating surveys quick to set up and easy to send. When choosing a tool, consider how the data comes back from the survey—not just how good the survey looks.

Conclusion 

With The Lean Survey Canvas, you now have a great tool for creating surveys collaboratively and quickly. It’ll help you get a survey ready in just a few hours, with the whole team sharing the same context. The canvas becomes an information radiator to use before, during, and after the survey, giving it a clear purpose which can be measured by the output it collects.

Ready to give it a try? Download The Lean Survey Canvas template (downloads PDF).

The product designer’s toolkit Envato design team: Part one

This is the first part of a series of articles about how the design team operates at Envato. In this part I’ll discuss the tools we use, while in future parts I’ll explore some of the techniques, frameworks and methodologies that we rely on.

The designer’s toolset has changed radically over the last two years. No longer are we reliant on the expensive subscription based tools from Adobe, our tools are shifting to more cloud based services, where collaboration and sharing is key. Since starting at Envato I’ve put considerable time into making sure we are using the best tools available.

So, here’s the list, with details about how and why we chose the tools we use. Just a note though, things are changing all the time, as we discover new tools, so the list below is likely to change.

Pen and paper:

The design team at Envato always reach for pen and paper when exploring new problems and ideas, we have a range of preferences from Moleskin sketch books right through to dotted paper and marker pads. We often go from sketch straight to code, working collaboratively alongside front-end developers with the aim of getting new features into the hands of our users as quickly as possible.

However, our role is changing, we’re doing a lot more design facilitation recently with more of our time in-front of a white board. We also do more group brainstorming activities such as crazy eightsand affinity mapping. We’re also putting a lot more work up on the walls from post it notes with ideas on, to quick sketches of possible solutions.

We go from sketch straight to code, to get new features into the hands of our users as quickly as possible. 

 

Sketch:

When I started at Envato, half the design team had tried Sketch and were taking advantage of it’s many benefits. Transitioning the whole team over to Sketch proved to be very valuable. As a team we now share a core tool, meaning handovers and sharing between designers is much easier.

We have also invested in a master Sketch template, which mirrors our online style guide (including references to class names to make it much easier to handover to a developer), this allows our designers to very rapidly make high fidelity mockups of our products using these core assets. When we have new components and styles, these are marked in the template to give the designers more freedom to play around before locking them down as they are built into the style guide.

Sketch is our tool of choice because it’s been built from the ground up as a tool for designing user interfaces. It mirrors CSS in it’s styling very closely which means we’re speaking the same language as our front-end developers. It’s use of styles and symbols also make it very quick to update and make changes to as the design evolves. These shared styles and the master template also force the team to think about the style guide and designing components and patterns rather than individual solutions.

 

DropBox:

Having access to everything, all the time, anywhere is vital to our team (we have people working all over the world, in different timezones). DropBox provides this level of access, plus the added benefit of backups and basic version control. We sync to DropBox directly from our computers, working directly on the files in DropBox to ensure that we don’t have multiple versions of files.

The most powerful tool we have is combining both Sketch and DropBox with Invision, our central design hub…

 

Invision:

The biggest change we made to our tool set was the introduction on Invision. At first we used Invision purely as a prototyping tool, however since we upgraded to Invision Enterprise it’s become our central design hub.

Invision gives us:

• Interactive prototypes that are really quick and easy to set up and manage
• Precise version control and shared access to project assets
• Boards, for creating and sharing inspiration and competitor analysis
• An activity feed of all the design work going on within the team
• A collaboration portal for storing and actioning all the feedback we collect on our designs

What’s more, we sync Invision with our Sketch files through DropBox. This means all of our work is constantly up-to-date in Invision everytime Sketch auto-saves. Invision understands the raw Sketch source files, so no more exporting flats, the Sketch files becomes the only source of truth in the design.

One of the best things we did when we setup Invision Enterprise was to give full access for our team to all projects. That way ALL our design team has access and visibility of ALL design work going on within the team. When new members join our team, they can go through the archives of work, and as a manager I have up-to-date information on what is going on in ALL projects ALL of the time.

 

Slack:

With a distributed team, often in different locations, communication is essential. Luckily the whole team at Envato use Slack. This gives us instant access to everyone in the design team. We have our own channel in Slack which is synced with Invision for quickly sharing prototypes and ideas for very quick (almost instant) feedback from the other designers. We can also share our work with the wider company for gathering even more feedback before testing on our users. For instance the first prototype of our new sign up flow was tested internally (using Slack) by over 30 different nationalities within a single working day.

Slack is synced with Invision for sharing prototypes and ideas for very quick feedback from the other designers. 

 

Trello:

Organising and visualising our workflow is a really important aspect when working is a cross-functional agile environment. All our development streams use both wall space and Trello to chart their progress through their backlog (we don’t use any specific styles like Scrum or Kanban, the teams choose how they run themselves). The Trello boards keep everything together, from design decisions (with a link to the design in Invision) to estimates and workshop notes. Our designers who do not work in a single stream (such as our visual designers) also have their own Trello boards so work-in-progress and backlogs are visible to the whole team.

 

User testing:

When we conduct user testing, we combine most of our tools together. Most of our user testing in done remotely via screen share, but even when we have users come in to our office we use Google Hangouts to record the session directly to YouTube (which allows for quick and easier sharing, and live viewing). We then organise the results using Trello, although we are experimenting with using Evernote for storing and retrieving the insight gained.

We use Calendly for organising our user testing (we usually recruit from within our existing user base) and we use Typeform or SurveyMonkey for surveys. We’re also experimenting with Intercomfor realtime feedback on live features.

We iterate new features quickly using Invision comments for feedback from our users. 

When we test prototypes, we mostly use Invision. Luckily our users are really engaged with our product, so this gives us the benefit of gathering plenty of asynchronous feedback. We often iterate new features quickly using the Invision comments as an on-going feedback conversation with our users.

 

Where is Adobe and Axure?

The design tools mentioned above are all fairly new, but what about the traditional tools of UX and design?

Well, we still use Adobe but not as much as we used to. We use Photoshop mainly for doing any photo editing and image manipulation, Illustrator for illustration work and icons (the recent Envato community badges where all designed in Illustrator) and After Effects for exploring animation (we also use it for our animated explainer videos).

We also sometimes go back to using Axure. We’ve had problems in the past with overly complex Axure prototypes which become hard to maintain and change, so Axure is mainly used for simple wireframes, especially where we need to test input, such as forms. However we’re finding that Sketch paired with Invision is much faster and easier to use than Axure for wire framing quick ideas, it also has the advantage of being the same tool we use for more high fidelity work, meaning we can progress through a whole project within a single tool.

 

Keeping it lean:

We try to use the simplest and cheapest tool for the job when experiment with new ideas, always asking ‘what is the quickest way of getting our ideas in-front of our users’. For instance we used Google Forms to test our ideas and gather data on the first iteration of our new sign up process. This enabled us to rapidly test different field types, label and form structure before moving to more expensive prototypes.

Experimenting:

We are constantly on the look out for new tools to make us even better and more efficient, we’re currently exploring Zeplin for design handovers (although nothing beats sitting alongside your developers), Framer.js for prototyping animations and Optimal Workshop for card sorting etc.

We’re also really looking forward to getting our hands on the new version of Silverback for user testing, and the new features in the pipeline for Invision, such as their animation prototyping and developer handover tools.

 

Closing thoughts:

There are a few things in common with all our main tool choices, they all place a huge emphasis on sharing and collaboration. This mirrors the shift in the design industry from experts that create magic with complex and hard to learn tools to design facilitators that are great at bringing people together around an idea to shape, explore and test it, then iterating it to a much better result.

User Research Basics: Creating a Test and Script

http://getrefe.com/

While most people agree that usability testing can be incredibly helpful for a product, it can often feel out-of-reach if you’re unfamiliar with the process.

User Research Basics meant for those in product development (from developers to executives) who are new to testing and want to conduct basic user testing in a short time frame.

Articles in this series will discuss the following:
1. Creating a Plan & Scoping and Planning Sessions
2. Creating a Test and Script
3. Recruiting Users
4. Moderating Sessions and Recording Results
5. Analyzing Results

 

Creating a Test and Script

Once you have a created the scope and plan for your test, you need to start understanding any wanted outcomes and articulate them in ways others can easily understand.

I start by creating high-level user goals and mapping specific user tasks. User goals are intended to represent user wants and needs. From the user goals, I then create the tasks that will form the basis of the script.

If we properly scoped and planned our test, we would have the following information:

1. Area of focus
2. Problem statement(s)
3. Hypothesis
4. Metrics; and
5. Target users

User Goals:

These goals are big, overarching goals that a user has when using a product. Goals are often broad and don’t include specific, step-by-step tasks. From a user point of view, it doesn’t necessarily matter how I accomplish the goal, as long as the goal gets completed.

For example, a user goal for Facebook might be to share photos from their birthday with friends.

Tasks:

Now that we have our goals, I would consult my prototype and figure out the ideal path and detail the steps needed to complete the user goal. Essentially, the tasks are the step-by-step directions of accomplishing the goal. For the above Facebook example, some tasks might be:

1. Login
2. Navigate to my page
3. Click on photos
4. Click the “add photos” button

It’s important to note every possible way to accomplish the goal. Facebook offers multiple ways to upload photos. So the list of tasks might include an alternate set of possibilities that a user could take, such as

1. Login
2. Click the “add photos/video” button at the top of the news feed.

Script:

Once you have your tasks and task order, it’s time to create the script. Every test you conduct will need an introduction and some ground rules. Here’s an example script introduction:

Hi _____, thank you again for taking the time to participate in this study. Before we begin, I’m going to give you a brief overview of the test and how it will work.
This session is pretty straightforward — I’ll be giving you a broad task to complete and then asking questions as we go along. Before I tell you the task, I’ll be giving you a little bit of context behind it, such as why you might be doing it and what you hope to achieve.
It’s really important to know that we are only testing the site, not you. You can’t do or say anything wrong here. Please feel free to let me know at any time if there’s something you like, dislike, if you’re confused, etc. I promise you won’t hurt my feelings.
Also, I’d like you to “think aloud” as much as possible. By that, I mean that I’d like you to speak your thoughts as often as you can. For example, you may be looking at a page, suddenly see something you didn’t see before and want to click on it. In that case, saying something like “this caught my eye so I’m going to see what it is” would be very useful.
If at any point you have questions, please don’t hesitate to ask. Do you have any questions so far?
Ok, Let’s get started.

Now, you’ll want to add any story or background information for the user to set the scene for the goal, then add each task. You may also want to add questions or prompts in between each task as reminders of things that may happen.

When you’ve added all your prompts and additional information, add a “debrief” section that provides the moderator questions intended to gauge initial feedback.

And that’s the basic structure! This example template pulls together the elements discussed above and also provides additional framing for the moderator.

A behavioral approach to product design

Illustration by Justin Secor

Four steps to designing products with impact

Changing behavior is hard. We see it everyday — New Year’s resolutions fall through, gym memberships remain unused, and well-intentioned plans to eat less, or save more, never come to fruition.

There are many products and services to help nudge us towards our goals—whether that’s making healthier eating choices, developing better financial habits, or maintaining a more active lifestyle. Yet creating products that successfully accomplish these objectives can be immensely difficult. Designers are realizing that traditional design methods are not always enough to effectively tackle these complex behavioral challenges.

At Opower, our team takes a uniquely behavioral approach to product design, leveraging the latest behavioral science research to create useful, delightful user experiences that motivate everyone on earth to save energy. Understanding the psychology and science behind how people interpret information, make decisions, and take action enables us to deliver more effective designs — in doing so, we’ve successfully changed people’s habits and helped customers save over $1 billion on their energy bills.

The four stages of behavior design

Recently, our team developed a simple four-stage framework that we use to guide our design process and evaluate the behavioral effectiveness of our products. In this article, we’ll introduce the framework and describe techniques that all designers can use to ensure their products are as engaging, persuasive, and actionable as possible.

Stage 1: Grab attention

The first thing people want to know is — why should I care? As designers, we may have a fantastic product, but nobody will ever know if we can’t get people to pay attention to our message and consider using our product.

Techniques

• Make it inviting. Draw people in with eye-catching aesthetics, engaging storytelling, or compelling motion design.
• Elicit an emotional reaction. Create designs that stand out and remain memorable by appealing to our emotions — whether that’s surprise, curiosity, or urgency (e.g. using techniques like scarcity or loss aversion).
• Show personalized content. People respond strongly to messaging that is customized and relevant based on their behaviors, interests, and values.

Examples

• Airbnb creates a strong first impression on their front page with compelling imagery and videos. The language is warm and inviting, drawing users in and encouraging them to explore the site.

• Mint sends emails notifying customers of unusual spending patterns. These emails effectively grab our attention because they are both personalized and emotional — the message is surprising (and possibly alarming), which compels us to investigate further.

Stage 2: Influence decisions

Once people are interested and engaged, we need to present a clear, convincing argument that nudges them to take action.

Techniques

• Provide clear, straightforward content. Eliminate jargon and make your message specific and simple to understand. Offer content that answers a person’s questions and helps them make an informed choice.
• Offer recommendations. People will be more compelled to do something when provided clear next steps or options. Users value suggestions and personalized advice from experts or trusted sources (including social networks).
• Describe the benefits. People want to know what’s in it for them. This might include extrinsic rewards (money, rebates), lifestyle benefits (comfort), or appeal to a person’s intrinsic motivations and values.
• Reframe the message. Alter perceptions and encourage action using behavioral science messaging. Anchor people toward a specific choice, persuade them through scarcity, or use social motivators such as social comparison or social proof.

Examples

• Opower has encouraged millions of homes to reduce their energy use by using social comparison — showing them how much they use compared to similar homes in the area. Although people don’t typically think much about their energy use, this information is powerfully influential, getting people to reconsider their energy habits and find ways to use less.

Kickstarter and other crowdfunding sites use several methods to influence our decision to make pledges. Projects frequently offer both extrinsic benefits (e.g. early access to a product) and intrinsic benefits (e.g. pride in supporting a cause you care about). Pledge recommendations are reinforced with behavioral science techniques like social proof (how many people have pledged) and scarcity (limited time and limited spots for each pledge tier).

 

Stage 3: Facilitate action

After a person has made the decision to act, the next step is to help them follow through, making the action as easy and barrier-free as possible.

Techniques

• Simplify the action. Break down target actions into small, achievable steps. Reduce cognitive load on a user by simplifying an interface, chunking information, or introducing progressive disclosure. Identify and address common barriers that prevent people from taking action.
• Guide the experience. Shape the experience in a way that facilitates action. Common techniques include walkthroughs, callouts, or pre-determined defaults.
• Help users create a plan. Encourage people to set goals and commit to actions. Send reminders and follow up on their progress over time.
• Trigger at the right moment. Timing is critical — make sure you trigger a person to take action during the times they are most motivated and able to take action.

Examples

• Brigade, a startup that encourages people to discuss their opinions on news and political issues, recently created several tools to facilitate the voting process. Right before election day, the app helped people find their local polling place and provided voting recommendations based on a user’s responses to several issue-based questions.

• ZenPayroll Giving makes charitable donations easy by removing friction and allowing employees to make contributions directly from their paychecks through regular, automatic withdrawals. Donations are then automatically documented on an employee’s W-2 at the end of the year.

 

Stage 4. Sustain behavior

Taking action once is not enough. For products to truly have a long-lasting impact, our designs need to motivate people to continue their behavior and feel a sense of progress over time.

Techniques

• Celebrate progress. Reward people with positive feedback and show progress over time. Consider a variable rewards schedule to increase engagement and reinforce behavior change.
• Build a long term relationship. Rather than one-time communications, design for experiences that extend over time and improve as we learn more about the people using our products.
• Emphasize intrinsic motivation. Intrinsic motivation is the strongest driver of long term behavior change. Research shows that people are drawn to experiences that give them a sense of purpose, social connection, status, self expression, mastery, and autonomy.

Examples

• Nest sends monthly reports that display a customer’s energy use patterns over time. For people who don’t manage their thermostat settings day-to-day, these engaging infographics provide an opportunity to show how Nest helps saves energy and money. Also, badges like “leafs” and “kudos” appeal to our internal sense of status and competition.

• Runkeeper and other fitness apps use various techniques to help us sustain behavior long term. Users can set activity goals and keep track of their progress, both individually and as part of a social group. Personal bests, leaderboards, and ongoing positive feedback help trigger our intrinsic motivations for self-mastery, social connection, and status.

Final thoughts

As designers, we need to consider the range of experiences people go through when using our products — understanding what nudges them to begin caring, take action, and stay motivated and engaged over time. Applying a behavioral lens to our work helps identify what stages in the journey are working and which could be better, ultimately strengthening our designs and mitigating the risk that our products will be quickly ignored or forgotten.

We hope this framework is useful to other designers looking for ways to incorporate behavioral thinking into their design process. If you’ve found this helpful or have additional ideas on ways to improve it, we’d love to hear!

Finding the Right Color Palettes for Data Visualizations

While good color palettes are easy to come by these days, finding the right color palette for data visualizations is still quite challenging.

At Graphiq, things are arguably made even more difficult, as we need to convey information across thousands of unique data sets in many different types of visualization layouts.

 

Current Problems

Rather than diving in head first and creating our own color palette, we started by conducting some research on existing color palettes around the web. Surprisingly, we found that few are actually designed for complex charts and data visualizations. We identified several reasons as to why we couldn’t use existing color palettes:

Problem 1: Low Accessibility

Many of the color palettes we looked at were not designed for visualizations. Not only do they not vary enough in brightness, but they were often not created with accessibility in mind. Flat UI Colors is one of the most widely used color palettes out there, and it’s easy to see why: it looks great. But, as its name indicates, it’s designed for user interfaces. Those who are color blind may find it difficult to interpret a data visualization that uses the Flat UI palette:

Flat UI Colors in full colors, protanopia mode, and grayscale.

Problem 2: Not Enough Colors

Another problem is that many existing color palates did not have enough colors. When building Graphiq visualizations, we need a palette that offers at least six colors, if not eight to twelve colors, to cover all of our use cases. Most color palettes we looked at did not provide enough options.

Here are a few examples from Color Hunt:

While they are good color palettes, they are not flexible enough to present complex data series.

Problem 3: Hard to Distinguish

But wait a second, there are color palettes that are like gradients — theoretically one can create any number of colors from that, right?

Unfortunately, there’s often not enough variation in brightness, and many of them would become indistinguishable very quickly, like these ones, also from Color Hunt:

Let’s just try taking the first one and extending it to a ten data series:

I’d be surprised if the average user could correctly distinguish the colors in the visualization and match up to the label in the legend, especially among the four greens on the left hand side.

 

Our Approach

At Graphiq, we think, eat and breathe data, and we invested a lot of time in finding not one, but multiple color palettes that worked for our visualizations. We learned a lot during this process, and we wanted to share three rules we’ve discovered for generating flexible color palettes:

Rule 1: Have a wide range in both hue and brightness

To make sure color palettes are extremely accessible and easy to distinguish, they must vary enough in brightness. Differences in brightness are universal. Take any monochromatic color palette and test how it looks in Protanopia, Deuteranopia, and grayscale mode. You’ll quickly be able to tell how accessible this palette is.

Light Blue from Google Material colors in full colors, protanopia mode, and grayscale.

However, having a palette that varies only in brightness may not be enough. The more variance you can have in the color palette, the easier it is for users to map your data series to the visualization. If we can utilize the change in hue for people who are not color blind, it will delight them even more.

And for both the brightness and the hue, the wider range you can find, the more data series you can support.

Rule 2: Follow natural patterns of color

There’s a secret that designers know which is not always immediately intuitive to left-brained folks: Not all colors are created equal.

From a purely mathematical standpoint, a color progression that transitions from light purple to dark yellow should feel roughly similar to a transition from light yellow to dark purple. But as we can see below–the former feels natural, and the latter not so much.

This is because we’ve been conditioned by gradients that consistently appear in nature. We see bright yellow transition into dark purple in gorgeous sunsets, but there’s really no place on earth where you can see a light purple transition into a dark brownish yellow.

Photos from Kyle Pearce, Wesley Fryer, and Jon Sullivan.

Similarly, a light green to a purplish blue, a light dry yellow to dark green, an orangey brown to cold gray, and more.

Photos from Kbh3rd, Ian Britton, and Jon Sullivan.

Because we see these natural gradients all the time, they feel familiar and pleasant when we see a corresponding palette used in a visualization.

Rule 3: Use a gradient instead of choosing a static set of colors

Gradient palettes that incorporate different hues offer the best of both worlds. Whether you need 2 colors or 10 colors, colors can be strategically extracted from these gradients to produce a visualization that feels natural, but also has enough variation in hue and brightness.

It’s not easy to switch to a gradient mindset, but a good way to start is by setting up grid lines at the breakpoints for each number of data series in Photoshop and constantly testing the gradient and making tweaks. Here’s a snapshot of the process we used to perfect our gradients:

As you can see, we place our color palettes at the top against grayscale, tweak the gradient overlays (so we can get the exact transition code later), and select colors from those breakpoints to test how the palette would work in real life.

Our Palettes

We’re excited about what we ended up with. Here are some of our color palettes in use, they all begin with pure white and end with pure black to achieve the maximum variation in brightness.

Cool, warm and neon colos

Our Palettes in Use

TL;DR

While there are an increasing number of good color palettes out there, not all of them are applicable to charts and data visualizations. Our approach to visualization color palettes is to make natural gradients that vary in both hue and brightness. By doing this, our palettes are accessible by people who are color blind, obvious for others, and works with anywhere from one to twelve data series.

Readings, Tools, and Resources [Updated]

Along the way, we identified a few great resources and articles that reached similar conclusions as we did, but take a more mathematical approach and even dive into the color theories. We thought we’d share for further reading:

Readings

1. How to avoid equidistant HSV colors by Gregor Aisch
2. Mastering multi-hued color scales with chroma.js by Gregor Aisch
3. Subtleties of color by Robert Simmon
4. The viridis color palettes by Bob Rudis, Noam Ross and Simon Garnier
5. A new colormap for MATLAB by Steve Eddins

Tools

1. Color Picker for Data — a handy color tool where you can hold chromaconstant and pick your palette with ease
2. Chroma.js — a JavaScript library for dealing with colors
3. Colorbrewer2 — a great tool for finding heat map and data visualization colors, with multi-hue and single-hue palettes built in.

Other Resources

And here are some other good color palette resources we found and loved. While they are not necessarily designed for data visualization, we think you would find them useful.

1. ColorHunt — high quality color palettes with quick preview feature, great resource if you only need four colors
2. COLOURlovers — great color community with various tools to create color palettes as well as pattern designs
3. ColorSchemer Studio — powerful desktop color pick app
4. Coolors — light weight random color palette generator where you can lock the colors you want and swap out the others
5. Flat UI Colors — great UI color set, one of the most popular ones
6. Material Design Colors — another great UI palette. Not only does it provide a wide range of colors, it also provides different “weights” or brightness of each color
7. Palettab — a Chrome extension that shows you a new color palette and font inspiration with every tab
8. Swiss Style Color Picker — another collection of good color palettes

Hopefully this post was useful to you! What’s your process of creating color palettes? What other tools have you used? We’d love to hear any lessons you’ve learned related to color palettes and visualizations.

The secrets to effective card-based design

So you want to get on-trend with a card-style interface? That’s probably a great idea; cards are a popular and user-friendly option for all types of digital design on varying device sizes.

The key to a card design is creating something that users want to click. (That is the key to a great card.) A card should serve as a container for a specific bit of content — content link, signup, video player, and so on — that users want to interact with.

Here’s how you design it…

Start with a black and white outline

It sounds pretty simple: start with a black and white wireframe for the design. Think about the intent of the card and what parts of it will be click, or tappable. (The entire card can serve as a link.)

Plan for elements like spacing, images, and typography so that you can see the card without color or embellishment. Think of it as the “playing card” phase of the design. All the elements of the card are there. Does it seem like a framework that’s easy to understand?

Think about how you would use it from this stage. Where would you click for an action? Is the pattern and result clear? How do you go back or advance? The answers to these questions should be relevant without cues such as a red “click here” button blinking on the screen.

As with any other project, if the outline does not work in black and white, the final design probably won’t either.

Use exaggerated spacing

The biggest challenge when it comes to cards is creating a compact design that does not feel cluttered. That’s where whitespace comes in. And you’ll want to use more of it than feels comfortable at first.

The addition of whitespace will give elements more room to breathe, making the overall card seem more spacious and increasing readability.

Generally, you might want to start with twice the spacing you might normally consider between elements. Gutters should be extra wide and line spacing could use the extra room as well. The extra space will help you create an open design and organize the content more clearly. The card has a pretty limited canvas and should fit on a single screen on a phone, and a similar-sized portion of the screen on larger devices such as tablets or desktops. Cards may also compete against other cards for attention on larger screens. Added whitespace will help the entire design feel more open and easy to dive into.

Add natural color and shading

Now you are ready to think about color and shading for the design. Keep it natural looking and mimic reality in the shadows and styles of the design.

No, we are not talking skeuomorphism here, we’re talking about creating color with natural outlines and shadows. Think about how a card will be viewed. The user should get the same feeling as if he or she were actually holding it.

Use some of the basic rules of physics to imagine (and design) each card as it would be held:

• Lighting should cast some shadows to the back and bottom.
• The darkest part of the design is likely at the bottom thanks to lighting conditions, which normally come from above.
• Avoid content in areas that are required for holding the card.
• Touchpoints (and the associated calls-to-action) should be focal points and easy to interact with. (Just like the face of a playing card is in the center of the design.)
• One card equals one bit of information.

Create simple layers

Now that you are thinking about physics, take it to the next level with simple layering to create a unified card style for the entire interface. Not sure where to start? Google’s Material Design guidelines are a great starting point.

“In material design, the physical properties of paper are translated to the screen. The background of an application resembles the flat, opaque texture of a sheet of paper.

An application’s behavior mimics the paper’s ability to be re-sized, shuffled, and bound together in multiple sheets. Elements that live outside of applications, such as status or system bars, receive a different treatment. They are separate from the app content beneath them, and do not carry the physical properties of paper.

Break this down and it goes back to making a digital object look and feel physical. And if users want to touch it, they’ll want to click it. The concept is just that simple.

Stick to simple typefaces

When it comes to typography, simple sans serifs are often the answer. Avoid super thin or condensed options because they can be somewhat tougher on the eyes.

Most cards work best with two typeface options (even if they are from the same family) — something for the main body and another for the headline or call-to-action. The most important factor when it comes to typography is to remember to include plenty of contrast so that text elements are easy to read. Remember to include contrast between typefaces and contrast between the background and text elements for each card.

Limit UI elements

Repeat after me: one card equals one action.

So that probably means you don’t need to include a bunch of user interface elements such as buttons throughout the design.

You might not even need a button at all in a card-style design.

But if you think users need a visual cue, one button is enough. Keep the shape and design simple — again, the Material Design approach is a good option — and stick to just one button.

A button is probably the only UI element you need. This is your design goal.

Conclusion

There isn’t a magic formula for the perfect card, but there are some design choices you can make that encourage every user to click (or tap). Keep your design centered in reality, follow a minimalist approach with plenty of space and contrast, put an emphasis on simple typography, and create a single action for each card.

Following this outline will help you best imagine and conceptualize card-style projects that users want to interact with. Combine these ideas with design theory and your mad skills for a great project that will be fun for users and aesthetically on-trend.

Usability Test on Product Hunt for iPhone

Couple months ago, Ryan Hoover published (Still) Building in Public. The article showcases active attempts by Product Hunt (“PH”) to bring together a community in its growth process, making users feel more inclusive and a part of the product. I decided I wanted to contribute to PH’s ‘building in public’ efforts as it expands to a wider range of users and products.

PH is a great product that I use every day to discover new, interesting products in the tech space. Its website, with the new update, provides a smooth product discovery experience. However, quick usability tests reveal that its iPhone app has several pain points that hinder users from fully enjoying PH.

Objective

Identify and address pain points to improve the product discovery experience on iPhone app.

 

Design Process

User

Prior to conducting usability tests, I developed a provisional persona based on my assumptions to better understand the target users of PH’s iPhone app. This process helped me get into the mindset of the users, thinking in terms of their context, needs, and goals.

Meet Jack! Based on this provisional persona, I chose a coffee shop popular among tech enthusiasts for usability testing.

Test Parameters

• What: Product Hunt iOS mobile app (specifically, iPhone 6)
• Who: Five iPhone users who are tech-inclined
• Where: The Mill SF (a coffee shop popular among tech enthusiasts)
• When: October 17, 2015 Saturday afternoon
• How: Guerrilla usability testing

Author conducting a guerrilla usability test

Usability Test Scenarios

• Search: Imagine you enjoy using Instagram daily and have tried other photo apps. You now want to find new photo filter apps. Can you show me how you would do that?
• Collection: Imagine you found 5 photo apps you want to try on PH. You want to keep track of them to try later after work. Can you show me how you would do that?
• Follow: Imagine a tech guru you admire is active on PH and posts products or comments 3-4 times a week. You want to keep track of his or her activities. Can you show me how you would do that?
• Share: Imagine you discovered an awesome game app on PH and you want to have your best friend try it. Can you show me how you would do that?

Pain Points

After conducting usability tests, I analyzed and synthesized the test results.

First, I listed all the pain points of each user.

Most users I tested are all working in the tech industry, but not in technical roles like engineers.

Second, I grouped the pain points by their similarity, akin to affinity mapping. Four buckets of pain points emerged. Then, I sorted them in the order of highest frequency. The tasks associated with Collections gave users the most trouble, followed by Follow/Activity, Details, and Search.

Lastly, keeping in mind the needs and goals of the persona, Jack, as well as PH’s company mission for a better product discovery experience, I mapped the four pain point buckets by their importance to users and the company. The mapping revealed that Details plays the most pivotal role in shaping users’ product discovery experience. Thus, I decided to tackle Details for this case study.

This exercise helped me prioritize which pain point to address first based on the degree of importance to both users and the company.

Key Insights on Details

All users had trouble locating enough details about a product of their choice during usability testing.

“Because I understand the upvoting process of PH, I’d go with the most upvoted product. But, once I get into the product, what I’m missing here is the robust description of what it exactly does. I think this (media) is getting close like the screenshots of what you eventually will get, but I just don’t think I’m getting the whole picture yet. I’m not ready to ‘get it’. I’m not ready to make a commitment.” — User 4

Figure 1. Screenshots of current zero data states that leave users clueless about what the product is and how it works.

There are two major problems that prevent users from learning about a product.

First, users are not successfully getting in-depth product information due to incoherent interface flow and unclear wording.

• Users are directed to comments section first when they are trying to learn more about a product.
• Users are confused by and afraid of the green Get It button, unsure of what to expect when they tap the button.

Second, a zero data or empty state leaves users clueless about what a product is about, making them not want to get the product. (Figure 1)

• Unlike the empty state for comments, the empty state for media does not provide appropriate feedback to users.

Redesign Process

The next step in my design process was ideating and visualizing possible solutions for the pain points.

Design Stories

The purpose of design stories is to imagine what users can do with the redesigned app and then break it down into digestible tasks to be done.

Design Stories helped me identify features necessary to alleviate the pain points.

Task Flow

The proposed flow places the media (description) section as the main content on a product description screen while making the comments section a related action.

I put ‘Get It’ as the end point for the task flow because getting the product indicates that users are truly discovering the product by using it, resulting in more informed opinions, comments, upvotes, shares, and so on.

UI Sketches

I started wireframing by rearranging the current screen elements and then attempted to be more creative with how the content would be presented.

Low-fidelity hand-drawn UI sketches for divergent ideation and not getting tied down to a particular idea.

As a next step, high-fidelity screens were produced. Below is a comparison of current app screens against redesigned app screens regarding the product discovery experience.

Initial Redesign Decisions

Figure 2. Product List Screens

1. Prominent photo previews instead of maker profiles on the product list (Figure 2)

• Builds upon most users’ existing mental model of using App Store.
• Helps users pick a product through progressive disclosure. The photos help users get a bit more sense of what each product is about.

Figure 3. Product Description Screens

2. Product description screen bypassing the comments section of the current app flow (Figure 3)

• Quick scroll reveals video, text, and photo information on the product, thus reducing current friction to users’ product discovery experience.
• Users can write comments while viewing the product information. This reduces their current cognitive load of having to retain the new product information while writing comments on a separate screen.

3. Changes in wording and arrangement of actionable elements (Figure 3)

• ‘Get It’ button is clarified into ‘Website’ and ‘App Store’ buttons, which stay visible at all times
• All the icons have been replaced with text buttons so that users have clear expectations on where each button would lead them to.
• The menu button has been created on top right corner to reduce visual clutter of icons and options.

Interactive Prototype

This is the demo of the initial redesign. I used this initial prototype to conduct further user testing and iterate based on the feedback. (Tool: Pixate)

Test & Iterate!

One of the most important aspects of design is getting feedback. Testing the initial prototype with more users helped me refine the design.

Key Learnings

The following feedback guided my iteration process:

1. Users want to see product information right away.
2. Users still find product descriptions and actionable buttons dense and visually overwhelming.
3. Users are not sure which interaction to expect — scroll or swipe or something else?

Thus, the iteration process began. I initially continued iterating at a high-fidelity level on Sketch App.

First iterations started with small changes at a time.

Second Iterations focused on various interaction elements such as scroll and swipe in different sections.

When I iterated at the high-fidelity level, I kept running into designer’s block.

A breakthrough emerged when I decided to zoom out from the current iterations and go back to low-fidelity wireframe sketches.

IDEO’s design thinking course had taught me to be fluid with divergent and convergent ideation and to be divergent longer, considering all the relevant elements, before rushing to converging into a single solution. I realized I was making exactly that mistake.

I returned to sketching low-fidelity wireframes.

I focused on maximizing screen space for product information and rearranging and simplifying actionable elements.

I realized I had neglected to hyper-prioritize the elements that should be shown on the product information screen and that doing so would solve the visual clutter problem and immerse users in the product information contents.

To prioritize the features, I conducted a quick card sorting exercise with 6 people to learn about what features are important to users when they try to learn about a product and potentially get it. I provided 8 post-it notes with a feature written on each and asked each participant to arrange them in the order of importance.

• 4 users were focused on social proof, prioritizing the number of upvotes, comments by others, and maker’s profile.
• 2 users disregarded social proof. They were ready to get the product after browsing the product information and deciding for themselves that they want to try it.

The card sorting results helped me sort features into primary actions to be shown on the main screen and secondary actions to be hidden.

Quick card sorting exercises for feature prioritization

With the card sorting results in mind, I proceeded to high fidelity iterations as shown below.

Final Results

Current and proposed screens — ‘Product List’ and ‘Product Details’

Screen Flow of the Prototype

With the new design, both novice and expert users can immediately learn what a product is about, visually and textually, in an immersive manner. They can also easily access important actionable elements, thus fulfilling the tasks laid out in the aforementioned design stories.

Regarding empty states, one way to improve might be having a specific format for product information. When product hunters or makers submit a product, they must upload at least one photo and few sentences that aid people’s understanding of the product. This is to prevent an empty state and make sure everyone can fully enjoy the product discovery experience on PH. An illustration is shown below. (Figure 4)

Figure 4. Suggestions on preventing empty states

Interactive Prototype

Demo video of the interactive prototype (Tool: Principle)

Next Steps

I’d love to test the redesign with more users and reiterate. There are few things I’d like to explore further.

1. Collapsing the header when users scroll up but expands back when they scroll down. When collapsed, the header will only display the product name. The purpose is to increase screen real estate for the product information contents.
2. Clarifying having both the name and profile pic of the maker or hunter in the header. This confuses many novice users.
3. Exploring users’ mental models and reactions on the ‘Try It’ button as well as the degree of importance they assign on going to a website vs. app store of a product.

Why Product Is Dead

We have arrived at a time when there are no more handoffs between design and development. Where added value trumps effort (hallelujah, man before machine!). Where user stories are no longer about business requirements, but about enabling users. A time where features are replaced by offering an experience and empathy for our customers guide the decisions we make.

Utopia, or daily reality? As my time at a tech startup in a leading UX position is coming to an end, I was recently interviewing with various companies. This experience made me realize we still have some work to do if we (and by “we” I mean the companies we work for) want to make the most out of our UX efforts.

We’ve all heard that customer experience is the new advantage. That’s a great revelation (which is actually not so new, but that’s beside the point), so now what? How do we translate this insight into actionable results? Let’s start at the base.

What is experience?

As B. Joseph Pine II & James H. Gilmore described it back in 1998 in their controversial essay in the Harvard Business Review:

An experience occurs when a company intentionally uses services as the stage, and goods as props, to engage individual customers in a way that creates a memorable event.

Customers have increasingly higher demands. Not just in regard to products and services, but in their experience when interacting with what a company has to offer. Companies have come to realize how important customer- and user experience (CX/UX) is for their site, app, store, service or product.

Empathy plays a central role when designing services and products, because there’s no point in creating something people don’t want or know how to use. Design goes far beyond aesthetics. Good design is just good business.

Let me explain why:

• It reduces the amount of rework and bug fixes post-launch
• It prevents misalignment — building features which your customers don’t need or want
• And therefor aims your focus towards the things that create value for your customers, enabling you to make better choices and maximizing the effectiveness of team efforts.

Other benefits include:

• Reduced support costs

• Reduced requests for clarification by the development team

• More accurate estimates for build time and cost
• And the obvious things such as a strengthened brand and increased loyalty and advocacy among customers.

Lets look at the numbers

• 89% of companies expect to compete mostly on the basis of customer experience by 2016 *
• Customer power has grown, as 73% trust recommendations from friends and family, while only 19% trust direct communication **
• 86% of customers will pay more for a better experience ***

If you want to know more about how customer experience drives digital transformation ambitions, go read this latest study conducted by Forrester Consulting.

The mystery of the UX unicorn

You must be thinking: Let’s hire a UX unicorn to sprinkle his/her magical pixie dust and make everything better!

Ehm, no. Stop right there. Because without proper commitment throughout the organization, you won’t get the results you seek.

One of the biggest problems is that we attempt to make customer experience design fit with legacy philosophies and processes which come from a different time for a different type of customer. Putting our customer at the heart of an organization requires a shift in mindset and asks for significant changes to our business processes. Without it, we are just managing businesses the way we always have. Change will mean we go from merely managing the customer experience, to designing it.

As a wise man once said:

Doing the same thing over and over again and expecting different results, is insanity — Albert Einstein

So now that we’re on the same page, let’s see how we can implement this experience-centered approach and identify what we need to change, in order to catalyze business success.

How to make experience work

Forget McCarthy’s 4 P’s from the 60’s. (OK, don’t completely forget them! Just keep them in the back of your mind, however) Today’s consumer is a visual consumer who expects interactive communication and has about an 8-second attention span. It’s no longer about Product, Price, Promotion and Place.

A five-year study published by the Harvard Business Review, involving over 500 marketers and customers across a variety of businesses, found that the 4P’s approach to marketing leads to a real disconnect between what they believe matters and what their customers really want.

The S.A.V.E. framework**** comes closest to what my experiences as a UX Designer have taught me. Even more so for tech companies since they mostly (but sadly) prioritize technology — and the effort they put into applying technology — over everything else.

So let’s take a look at what S.A.V.E. means:

• S. is for Solution. Think about the solution of your customers’ problems instead of the features and functions of the product.
• A. is for Access. It is not about the place, it is not about whether it will be online or offline, your customers need your business to be accessible and you should provide them with it. You choose how.
• V. is for Value. Customers care about the price, it is natural, but before the price come the concerns about the value. Are the benefits of your product relevant to the price you define?
• E. is for Education. Your audience needs and wants to be informed. The number of businesses with online presence grows daily as well as the importance of attraction-based marketing.

To obtain the transformation you seek, your organization needs to do the following 3 things:

1. Management must encourage a solutions mindset throughout the organization.
2. Management needs to ensure that the design of the marketing organization reflects and reinforces the customer-centric focus.
3. Management must create collaboration between the marketing and sales organizations and with the development and delivery teams.

See, no unicorn, no pixie dust, just management driving this train towards a better future.

Experience = value

When customer experience is properly integrated into corporate processes, the organization as a whole will benefit. Everyone on the team involved in developing the product or service will be better informed and as a result, be able to make better decisions. This will have a remarkable impact on the experience your product or service offers, it will not only maximize your ROI of your CX/UX efforts, but your entire development track will be able to create more value in a shorter amount of time. It’s not about building feature after feature after feature, it’s about creating as much value for your customers as you can and getting it out there ASAP.

I didn’t want to bore you with an article about the basic misconceptions people have about user experience and what it is. There’s more than enough on that out there. Instead, I wanted to shed some light on how to successfully incorporate UX into your organization, so that you and your team can maximize it’s pay offs.

To create an experience, UX Designers:

1. Understand — research and become the user;
2. Create — think of solutions and opportunities;
3. Do — prototype and;
4. Learn — test.

This feeds back into the mindset of empathy: where you as a designer focus on looking outward, instead of inward. Empathy plays a central role when designing services and products, because there’s no point in creating something people don’t want or know how to use.

Assume you’re wrong, know you’ll fail and be determined to learn.

What is Remote Usability Testing?

The main goal of usability testing is to answer the question “Can people use this design?” 

In order to find the answer, a common practice is to:

• Put a product or experience in front of someone
• Ask them to perform a set of tasks
• Observe their behavior
• And listen to them talk through what they do as they do it

This can help you understand how real users respond to your product or experience. You can learn what parts they like or dislike, where they get stuck or confused, and what you can improve. 

Many UX research teams use in-house labs or office space to conduct in-person usability studies. But not all usability research needs to be conducted in person to be useful! It can also be done remotely.

What is remote usability testing?

Remote usability testing is a research methodology that uses an online software program to record the screen (and voice, depending on the tool you choose) of test participants as they use your site or app in their natural environment—at home, in their office, or even a specific location you ask them to go.

The benefit of this type of research is that your pool of potential study participants isn’t limited to a specific location. And you can conduct more research sessions in a shorter amount of time (and with less recruiting hassle). 

In the rest of this article, I’m going to share the benefits of remote usability testing, and I’m also going to break down the two different types of remote testing: moderated and unmoderated. I’ll dig into the pros and cons of both, and give you examples of when you should use them. Let’s dive right in. 

The benefits of remote usability testing

There are a few key benefits of conducting remote usability testing. First, research that happens in the participant’s natural environment can give you more realistic insights than lab research. 

Since participants aren’t in an artificial and unfamiliar setting, they’re more likely to give honest reactions and unbiased opinions. You also gather contextual findings of how your product is used naturally.

Plus, some research just can’t be done in a lab. 

If you’re trying to answer questions about how users interact with a product in a specific context (using a fitness app at the gym, for example), then you’ll need to make sure your research happens in that location. We call that destination-based testing. 

(Note: For research that isn’t dependent on a location, study participants can be in their homes, offices, or anywhere that is convenient.)

Also, there are times when you might need to observe something other than a digital experience on a computer or mobile device. 

For example, maybe you’re researching how customers find their way around a theme park, install a thermostat at home, or choose which brand of laundry detergent to buy at the store. These studies are called beyond-the-device tests, whereas traditional app and website studies are simply device tests.

Finally, it’s faster and easier to recruit test participants with online usability testing platforms that offer access to a panel of test participants. 

Rather than trying to find (and compensate) a group of target users on your own, you just designate your target audience and your testing platform will recruit users in their panel that match your description. This shortens the testing period to a few hours, rather than days or weeks, allowing you to get feedback and iterate right away.

Moderated vs. unmoderated testing

There are two different methods you can use when conducting a remote usability study: moderated or unmoderated testing. 

There are pros and cons to both methods, so how do you know which approach is right for you? Well, it’s going to depend on your specific situation and what your goals are. 

In the following sections, you’ll learn the difference between moderated and unmoderated remote usability testing, the pros and cons of each, and when you should use each of them. That way you can decide which approach makes the most sense for you. 

What is remote moderated usability testing?

In remote moderated testing, researchers (aka moderators) are in a different location than their test participants, but both parties are on a web or conference call and are sharing screens. Moderators can see what participants are doing, and they can both communicate with each other in real time.

The interaction between the moderator and target user is in real time. They are in the same “virtual” space and connect via a remote conferencing tools.

The moderator provides test participants with activities to complete while using a design or interface, and participants typically think out loud as they work on the tasks. The moderator observes the users as they work through the tasks, and the moderator may also ask questions for clarification or to gather more data.

These sessions should be centered around prompting the test participant to provide in-depth responses. Moderators will typically intervene only when necessary to help a test participant move through a difficult task or to probe for greater detail in an answer.

To illustrate what it looks like in action, the video below is an example of a moderated test on a very early-stage wireframe.

Sample moderated session

Pros of moderated usability testing

Moderated usability testing has two main advantages. First, moderators can interact with participants, meaning they can ask users to elaborate on their comments and ask them additional follow-up questions. 

For example, if during a study a user says, “This isn’t what I was expecting,” the moderator could ask the participant, “What were you expecting?” And the participant will likely elaborate based on that follow-up question. This is something that’s nearly impossible to do with unmoderated testing, and it’s especially useful for exploratory tests. 

The second advantage is the control and flexibility that comes with moderation. Moderators have control over the session and can corral the user is she gets off track or if the task isn’t worded clearly enough. 

You can also move tasks around or even eliminate tasks on the fly. Again, this isn’t really possible with unmoderated testing.

Cons of moderated usability testing

But the benefits of moderated testing mentioned above also present two specific disadvantages. Moderated testing requires a researcher to be present for the duration of all the sessions.

Since someone has to be there for every test, it takes more time. This can be a challenge, and it often results in a smaller sample size. Most moderated usability studies have between 5 – 15 test participants.

And the integrity of a moderated study depends on the skill of the moderator. An inexperienced moderator can actually influence the user’s behavior by giving them too much direction or asking leading questions—which can totally skew your data. 

There’s also some major logistical and technical drawbacks when conducting remote moderated testing. The sessions have to be set up with participants ahead of time. This requires a commitment from the participant and there’s a chance they will cancel or be a no-show. 

And because there’s an additional party that needs to connect to the session (the moderator), there’s also a higher chance that you’ll run into technical issues.

When to use moderated usability testing

There are specific situations when moderated testing is the best choice. We recommend using a moderator in these circumstances:

• If the test includes tasks that require hand-holding, probing, or in-depth follow-up questions based on user behavior and comments. A moderator can make sure participants don’t get stuck or off-track.

• If users have to complete a task successfully in order to move on to the next task. So if your tasks are dependent upon one another, then you might want to consider moderated testing. Do your best to avoid dependencies, but this isn’t always possible.

• If you can’t give users direct access to a design because of security or technical concerns around the site or product being tested, using a moderator to share her screen with the participant may be a better alternative.

What is remote unmoderated usability testing?

In a remote unmoderated usability test, researchers use a software program to automate their study. Test participants get a list of pre-determined tasks to perform on their own while their screen and voice are being recorded, and they typically think out loud as they complete the tasks.

The participant decides when and where she would like to complete the study, and uses an online tool to participate, provide feedback, and record the session.

They complete the test in their own environment without a moderator present. And when they’re done, the researcher receives the results in the form of a video recording (which they can review at a later time). 

In an unmoderated test, the researcher doesn’t communicate with the participant in real-time. But the researcher may include follow-up questions as part of the study, or they may follow up with the participant after viewing the session.

Below is an example of what a remote unmoderated test looks like in practice.

Sample unmoderated session

Pros of unmoderated usability testing

There are a lot of advantages to unmoderated usability testing. First of all, a researcher doesn’t need to be present for the duration of all the sessions. And that means multiple sessions can be completed concurrently. This allows you to use larger sample sizes, which reduces the margin of error and often allows for more significant data. 

Also, standard in-person test usually takes about three weeks to plan the study and find the users for the session. And typically another three to five days for travel prep and conducting the actual session. 

With remote unmoderated usability testing, you can usually get results back within a day or two. And sometimes within hours (especially if the tool you choose automates the recruiting process for you).

Finally, participants can complete the study when it’s convenient for them, so there’s no need to schedule or set up appointments. 

Cons of unmoderated usability testing

The qualities that make unmoderated testing useful also bring their own unique challenges. 

Since a moderator isn’t present, you can’t interact with participants while they work on tasks. There’s no way to probe or ask follow-up questions based on their comments or activities in real time, so you have to write a test plan that’s easy for your participants to follow.

And you also have to predict your follow-up questions and hope they’re relevant to users at the end of the session. On top of that, you can’t guide them back to the task if they get sidetracked or if they don’t follow the task directions.

And even though you don’t need a moderator present for all of the sessions, you still need a researcher to watch the video sessions, collect data, and gather insights from the recordings (although some platforms will review the videos for you if you don’t have the time). 

When to use unmoderated usability testing

There are specific situations when unmoderated testing is the ideal testing method. We recommend using an unmoderated usability testing software platform under these circumstances:

• If there are very specific or direct tasks, especially those focused on interaction design (for example, asking a user to find the price of an item, or where a company is located). These typically don’t include a ton of exploring and the chance of the user getting off-track is slim.

• If you need a larger sample size, then unmoderated testing is more appropriate since a moderator doesn’t need to be present during each session.

• If you want to capture natural use, especially over time. When users are asked to record themselves every time they use a site or product, there’s no real need for moderation.

• If you want to gather feedback quickly. Unless you are looking for a very narrow demographic, a study can often be completed in one day! If you don’t have a specific need to do a moderated session, unmoderated is the way to go because it’s faster and easier!

The final word

Traditional usability testing has been conducted in-lab, but remote usability testing allows you to test more participants quicker for a much lower cost. It’s like a secret weapon for teams who iteratively test and implement feedback.

It’s also important to remember that every user research methodology has distinct advantages and disadvantages. And understanding the unique qualities and limitations of each approach can help you choose which one is right for you.

If you want to learn all of the various types of research methodologies, when to use them, and how to organize and share your results, check out The UX Research Methodology Guidebook. It’s for anyone who’s ready to get started testing, but would like a little guidance on how to approach a study, when to run it, and how to interpret the results.

The state of UX in 2015 / 2016

Our team at uxdesign.cc has seen a lot this year: 48 issues published, 384 links curated and sent to 61,295 designers around the world every week via email. Enough content to help our team at uxdesign.cc start identifying patterns and trends across what’s being written and published in the amazing world of User Experience Design.
Here’s our take on looking at the past, understanding the present, and anticipating what the future holds for UX in 2016.

1

Our Fascination with Pixels is Almost Over

It might be that 2015 was the year you finally added the buzzword "UX" to your Linkedin profile – but were still spending most of your time pushing pixels on a screen. If that's the case, your Photoshop days may be over soon. That's not to say interfaces are going to die, but our role as UX Designers will be to less focused on interface design over time. And here are a couple reasons why designers all over the world are saying that.

Everything looks the same

We're designing for a browsers and operating systems that have a well-established visual language and pretty solid interaction design patterns. Also, the increasingly popular Flat Design aesthetic is making everything look the same. Well, maybe that's okay.

Interaction patterns are robust enough

You don't need to reinvent the wheel when designing a door handle; two or three types of handles may be enough to cover all the possible use cases. Innovation just for innovation's sake, like trying to create a completely disruptive navigation system for your website or app, might bring you some usability problems in the long term. The question becomes: what exactly is the user need you're trying to solve by introducing a new interaction pattern? Robust and comprehensive interaction design pattern libraries are gradually letting us focus our time on what really matters for the user: getting things done in an easy and familiar way. 

The end of apps as we know them

Apps are not necessarily your user's final destination anymore; they're just an engine that translates raw data into actionable information. Some users might still occasionally open that beautifully-designed weather app to check the forecast, but the most useful thing the app can do is to send users a notification 15 minutes before it rains – reminding them to bring their umbrella as they leave. Yes, a notification. Mobile OS features such as the ability to take action right from the notification center on iOS or Google Now on Tap on Android are going to make people need to see an app's UI less and less over time.

New interactions don't always require new screens

Artificial intelligence is becoming more and more popular in 2016. Smart algorithms such as  Facebook M are soon going to respond to your texts within the Facebook Messenger app UI, and third-party services and companies will be able to get things done for you without the need of a proprietary user interface. Needless to say, someone still needs to "design" the logic and script of those conversations, and to build the artificial intelligence behind the product.

The interface of the future might not always be made of pixels.

2

The Gold Rush for the Right Prototyping Tool

A couple years ago, designers all over the world started to realize the importance of prototypingwhile creating digital products. The old model of handing off static boards to developers was setting designers up for failure. Prototyping tools have since then become an important piece of what we do – allowing us to document multiple states of a single screen, including animations, transitions and microinteractions that were hard to represent through static documentation.

Naturally, companies that paid attention to that trend have started to build prototyping tools that would solve for that; and today we're seeing a plethora of those tools coming to life, week after week. InVision, Marvel, Principle, Atomic, Sketch, Axure, Adobe Comet, you name it – they are essentially trying to solve the same problem through different perspectives.

Still, there isn't a single prototyping tool to rule them all.

What does the future hold? For how long are we going to see new prototyping tools being launched on a weekly basis, and how much time are we willing to spend learning how to operate these new solutions? Tools are quickly outnumbering designers – which will soon impede the design industry ecosystem from scaling.

We are hopeful that the prototyping tools of 2016 will empower us to do some platform-agnostic thinking, without having to sit in front of a computer screen for hours to get things done. Even better: that we'll soon start seeing new tools come up that are focused on other aspects of the UX work – besides just wireframing and prototyping. 

Food for thought: are we focusing too much of our efforts on our software skills – and forgetting to look at the human ones? 

it's been a good year, hasn't it?

3

Designing Around Time

Not long ago, having an Information Architect in your team was essential to be able to solve for the complexity and volume of information available on websites and apps out there. Digital interfaces (and the designers behind them) were fighting against clutter; all information "needed" to be visible at the same time, and everything was important.

But how do we prioritize what is really important for the user? How do we create navigational systems that will help users find the information they are looking for?

Fast forward a couple years and we're now designing around time: from having all the information available at any time (e.g. Amazon.com homepage) to having just the right amount of information available at the exactly right time users need it:

1. "Set pick up location" button before requesting an Uber

2. "ETA" information while you wait for your driver

3. "Rate your driver" UI once the ride is over

People want to do one thing at a time, and they want to be guided through the flow as opposed to being prompted with multiple decision points at every step. 

With devices and sensors getting smarter and more precise, the user experiences of 2016 are going to be even more linear – and our work even more focused around a specific moment in time and space. People are getting used to the convenience and simplicity of linear experiences. Sitemaps are becoming taller and narrower – and documentation is revolving around a user journey that goes way beyond just pixels and screens.

Exciting times for interaction designers in 2016.

4

UX: the Whole and the Role

What a great time to be a UX designer. We can finally see UX designers being given higher degrees of responsibility within more and more types of organizations. User experience is not a differentiator anymore; it’s a necessity. This means companies of all shapes and sizes will soon have at least one professional in charge of overseeing the user experience of its products and services. 

Yet, there's some debate around the role and job description of UX professionals. Now that we have realized everyone in the team has an impact in the overall user experience of a product, we are starting to add “UX” to everyone's job titles: UX engineer, UI/UX Designer, UX Architect, UX Front-end Engineer. 

The concept of being "a UX Designer" is becoming so pervasive it will soon disappear. 

If everyone shares both the power and the responsibility for great user experiences, what is the role UX designers should play within their teams in 2016?

Our biggest challenge ahead is to make sure that everyone on the team, from product managers to customer support, understands their role in improving the user's experience and how crucial that is for the business. UX professionals need to step in and play a more central role in coordinating all the collective effort, while collaborating with their peers.

On the other side, as we demystify what used to be a hard-to-grasp concept (“UX”), we can narrow our focus and start bringing more specialized roles in the team – such as content strategists, UX researchers, usability specialists and interaction designers.

5

Companies are the New Bloggers

You click on a link to an interesting UX article and soon realize it was written by... a company. Gradually, names as Peter Morville, Jeff Sauro and Don Norman start being replaced by other names that are as familiar: InVision, UXPin, Adobe.

In 2015, the most shared pieces of content about UX have been created by a company and published on a corporate blog.

This is great – don’t get us wrong. The attention and traction that the topic “UX” is getting among businesses and designers is definitely great news for those of us who pay the rent with UX. And there isn't a more effective way to sell UX work than talking about it.

While it can be hard for a UX designer to talk about a case study (because it's rarely a one-man job), these companies are in a great position to do so. They are more directly responsible for successful project outcomes – and they have been involved every step of the way.

The downside? Well, there's a reason companies are writing about such a specific topic. They want clicks, they want to build SEO, they want to be positioned as thought leaders in UX, prototyping and design. The result is an increasing number of articles with a high incidence of buzzwords, links to free e-books and click-bait headlines that will help those companies generate traffic to their sites.

So here’s our advice for 2016: every time you land on one of those articles, keep in mind they might be trying to sell you something. Which may or may not be bad; but just keep that in mind. The question then becomes: are the design associations and authors going to invest the time and effort to publish more content next year and help shape a more impartial knowledge base for the future of UX?

6

Content Strategy as the New Information Architecture

Ten years ago, companies wanted and needed to have their own website. A really robust one, with tons of information; a hub for everything related to their brand. And of course, those websites needed to be organized in a way that would make sense for its users.

Fast forward a couple years and now companies own a number of different websites, microsites, mobile apps, social profiles, blogs, channels, intranets and internal sites, slack groups (and the list continues to grow). Content flows through all these channels every single day, and someone needed to take the role of making sense out of it all. Of why, how and where things are published, and of how that all ladders up to a larger content strategy.

This trend is not new, and did not happen all of a sudden. But as it turns out, 2015 was the year where Content Strategy (and obviously the content strategist) was finally incorporated on a large scale within the design process, in various types of organizations. To our own benefit.

is 2016 the year you'll finally update your portfolio?

7

The Internet of People, Not Things

Smartwatches. Tons of them. Everywhere. If only we had more than two wrists...

2015 was all about smartwatches and we will probably keep hearing about them for a while. But what is the problem they are trying to solve?

We don't need more things and objects to carry around. We need to make what we already use, smarter. Rather than make our lives easier, smartwatches try to combine too many actions into too small a space – sacrificing usability for novelty. How can me make objects more meaningful for people, focused on their real needs? That's what Nest is working on. That's the goal of the new Google OnHub router. They are all solving issues people already have and leveraging objects people have already accepted to own – rather than trying to force new behaviors and hardware down their throat.

The Internet of Things has continued to grow incredibly fast in 2015. But after the first round of hype around connected devices, companies are now realizing there's a certain pace in which people are willing to accept cultural and individual behavior shifts – and that understanding that pace might be crucial for the success of a new product. 

Before we start building a new consumer-facing internet of trinkets and tchotchkes, how about bringing the internet to the things people already care about?

8

Slack is making us talk again

In 2015, we've seen the rise of UX-focused slack teams. Once more, designers from all over the world are gathering around online channels to discuss different topics from #usability to #jobs, or simply to #hangout with think-alike designers.

The truth is that online forums have been around for a while: from email lists, to Facebook posts, to Linkedin groups. However, unlike its predecessors, Slack has new elements that can make it more than just a temporary wave:

• Channels help you filter out the noise by organizing the conversation and allowing to join only the ones you want (user research, books or even jobs). 

• The fact Slack is a live chat encourages community managers to explore new engagement mechanics for how these conversations unfold (e.g. Ask Me Anything/AMA sessions with big names in the field). 

• Since Slack started out as a tool focused on work and productivity, the user's behavior inside its channels tends to be centered around professional discussions. Except for a few GIFs here and there, not a lot of distractions.

We're yet to see how long the hype around Slack will last (and how long it will take them to fix some of the basic usability issues users are seeing). It's up to us to make sure that the discussions we're having are translated into actionable changes in the UX field. Look out for more relevant and frequent conversations in a #channel near you next year.

the answers you’re looking for are far away from your screen

9

From Pixels to People

The biggest challenge of designing successful digital products today relies on having a deep understanding of the user's context, wants and needs. Adding new features to a product is becoming increasingly easier from a technological perspective, but doing so without proper research could mean making false assumptions about what people really care about.

This eventually injures a company’s sales and brand perception... 

Given that we’re spending less time pixel pushing, ("our fascination for pixels is almost over", remember?) let’s use this as an opportunity to to stay ahead of the game and focus on the other side of UX that we often neglect: User Research Methods. After all, it’s useless to try to find the best design pattern for your product, if the feature you’re building does not solve a legitimate, research-proven user need.

The same way we have seen a revolution in prototyping tools over the last years to support our interaction design processes, let's hope that a new generation of user testing tools will make research methods more accessible and further integrated into the design process – no matter what the company's size and budget is. 

We're optimistic 2016 will finally be the year when we shift our attention from pixels to people.

10

Our highlights from this year:

Project of the year
The United States design standards

Product of the year
Uber, for the tailor-made ux for different markets

Portfolio of the year
Samuel Medvedowsky

Tweet of the year
“Two roads diverged in a wood, and I — I did A/B testing to see which one had higher ad clickthroughs. And that has made all the difference.” (Dan Saffer)

Buzzword of the year
Machine Learning, the new Artificial Intelligence

Most clicked link
Why are Apple's products so confusing?, by Don Norman

Image of the year
Organizational Charts for Tech Companies, via @gaitha

Blog of the year
A list apart, for its consistency and high-level quality standards

Tool of the year
Lookback.io

Talk of the year
Leah Buley: The Modern UX Organization

Book of the year
Intertwingled, by Peter Morville

Why WeWork UX won’t have a research team

UX groups traditionally have design and research teams. I am currently building a new UX group at WeWork. Although I am a researcher at heart and have been practicing it in the past 16 years, this group will not have a research team. Here’s why:

1. Research is a design practice. Separating between research and design into different reporting structures creates a wall between two roles that so naturally connect with one another. Research leads to design, design triggers research. Our researchers are embedded in four user journey teams, and help team members and other stakeholders fall in love with problems and evaluate solutions.
2. Everyone does research. Research is never relegated to researchers. It’s not their problem, their task. Everyone owns research, so everyone is deeply involved in it. Design researchers at WeWork UX are facilitators and mentors. They make it happen and help everyone else learn from research.
3. Research is about creating shared understanding. Different people in the team have different assumptions and sometimes data about users, their needs, and behaviors. If researchers are isolated, they are just one more data point. Therefore, our researchers are big thinkers with small egos. They slowly created a shared understanding among team members and make sure every piece of the puzzle adds up to the full picture.

I’m glad we all agree then. Credit: User Story Mapping, by Jeff Patton (O’Reilly, 2014).

That said, we will have various mechanism to make sure our research is consistent, of high quality, and improving. Stay tuned.

2016 Digital Design Predictions

With the end of the year just around the corner, we wanted to look ahead to some upcoming trends in design for next year.

We spoke with our visual designer, Marco Ferraz, to find out what’s on his wishlist for 2016. What do you hope to see in design next year?

Typography

I’d love to see more (and better) typefaces for screen next year. This is one of the most important elements of any website. A good typeface, correct vertical rhythm and hierarchy, and bang! Almost all the work is done!

Flat Design Will Live On

Despite what a lot of people are saying, I don’t think flat design will die anytime soon. It will be firmly back in the spotlight in 2016 with its new younger brother: Material Design.

Icons and Illustrations

This new minimal, slick way of using illustrations on websites is here to stay. The phenomenon that I call the Dropbox effect is regularly seen among Saas companies like Message Bird, Atlassian, Zendesk etc.

In many cases icons are replacing images altogether, due to the control you have building a vector illustration. Its easier to create a custom vector graphic than to build high quality image that represents your product.

In 2016, I wish for more illustrations but more importantly, I would like to see more illustration styles (maybe pure drawing) not only the minimal style that has been so popular this year.

Micro Animations and Interactions

Details matter and make all the difference; micro animations and micro interactions will really take off next year.

The magic is in the details and we all know that magic enhances experiences. I really hope we see more awesome stuff happening in this specific field.

Storytelling, Microsites & One-Pagers

Users love to scroll. Designers will capitalize on this to trigger cool animations while scrolling, and present small chapters of content all in one page. Storytelling is gaining momentum; get ready, we will see much more of it next year. Microsites and one-pagers are perfect to launch campaigns, new products or even just to present data result in a cool way! This is opens up great opportunities for designers to explore small interactions and animation. Parallax scrolling and gamification will make users engage in 2016. Check out these awesome examples of how storytelling and interaction can create a unique and engaging experience:  BBQ Cultures, Silenza and Cinderella Past Midnight

More White Space

Yes, we need more of it! Screens are getting bigger across all industries, which means layouts can finally breath even more! White space will replace lines and dividers creating less visual noise and distractions.

Goodbye GIFs, Hello Cinemagraphs!

Next year, I would love to see designers making more use of HD cinemagraphs. These really will bring another dimension to the web – better motion and better quality. Videos on loop will continue to be used (just because they’re awesome) but these HD cinemagraphs should take center stage, we can’t wait to see how they will be used in 2016.

More Freedom in Layouts

The conventional, organised grid layout is going to be less obvious to users; layouts are going to look bold and more graphic. Different sizes and shapes will invade the internet. I expect to see something really interesting born out of the conventional! Depth added to design and animations/interactions that actually show that new dimension.

Bold Colors

Bold layouts require bold colors, it may even be the return of gradients, maybe with an update. Spotify’s new image is a good example: the colors are bold, vibrant and they even use a image on which they apply an interesting blending mode effect.

3D Touch

Will this be the start of a new interaction pattern? Will we design interaction for the right click on mouse andforce touch on mobile? Maybe is still too soon to rely on this kind of technology…will it pick up? We hope so.

Design Better Concepts With DT’s Whiteboard Concepting Language

Improve team communication and speed up your design process by using these standards the next time you brainstorm on a whiteboard.

Whiteboards are a beautiful thing for designers. A temporary and erasable canvas, they are the perfect medium for the initial concepting of a product or design.

But we have a bone to pick with the typical whiteboarding process. First off, it usually involves just one person standing at the whiteboard while others watch. This is terrible for collaboration, as most of the team is passively involved. Then, of course, it’s usually just scribbles, amorphous shapes that hold no meaning. Ultimately, it leads to a messy end-product, something that is indecipherable when we go to work on it. A great strategy derived on that whiteboard may not be implemented because no one actually remembered what it was.

A Better Way to Whiteboard

We grew tired of unstructured, sloppy whiteboarding sessions. We wanted a more effective method of concepting that we could actually share with others who weren’t at the whiteboard. That’s when our “whiteboard framework” was born.

The framework enables your team to work through a story or specific flow with consistent drawing techniques and colors. This makes it clear what needs to be done to anyone looking at the image (whether at the whiteboard, or three weeks later in a photo). It establishes a set of rules and a language that can be used to communicate concepts with anyone from the team.

Establish a Design Language

The first part of the framework is creating a design language for development. Working with a defined design language (normally in the form of a living style guide) creates a consistency in applied styles so everyone understands what the style is and what it should do.

The idea behind our design language is to use simple words to describe complex components to instantly align designers, strategists and developers. For example, we were once working with a radio button group that filtered content beneath it. This button group had a very specific behavior and look, but the team was confused as to what to call it. Instead of nebulously referring to it as the Button Group Radio Selector Filter Thing, we decided to call it a “Boxcar.” Giving this component a name immediately got everyone aligned on what we were talking about. From then on, once someone said Boxcar, all team members understood the visual design, interactions, and functionality.

When you decide how a component should work and behave, and when that component is used, it’s easier to understand how the pieces should fit together when it comes to designing or building that component. Plus, establishing a design language upfront reduces the back-and-forth between designers and developers during production, since the mutual understanding is already there.

Define a Concepting Language

Once we had alignment on what to call specific features and components, we realized we needed to take it a step further. We needed something to unify the interdepartmental teams in the earliest stages of the design process: A Concepting Language. This became the basis of our whiteboard framework, a basic system to facilitate clear communication, consistency and accuracy in the early stages.

This took form by using basic shapes and only four colors for our whiteboarding concepts, easily found in any pack of dry erase markers:

Black = Layout

We use black for page layouts, any of the UI components on a page and basic copy. We keep this very basic to not overwhelm the drawing. There are four primary layouts we use in our framework: Page, Modal, Takeover and External link. Each has its own treatment so we can easily distinguish between them when looking at the concept.

Red = Content

All on-page content is written in red below the layout. This allows the layout to remain clear and uncluttered. The idea is to provide accurate details for anything that is on the page, including labels, copy, buttons, table columns, etc.

Pro tip: Never use lorem ipsum! Use real copy to help make the transition from whiteboard to development much easier. Thinking about the content in advance saves time later on and makes the intention behind the concept very clear.

Blue = Action

User actions are the thread that connects our layouts to complete experiences. By drawing CTA buttons or text links in blue, we make clear exactly what the user is interacting with and where they go once they click. This is the only thing we draw in blue on the whole page to help identify consistency in button placement later on. After a few rounds of concepting in this language, you’ll be able to follow the blue to quickly scan the flow.

Green = Conditional

This is our utility color for all the wildcards. In our concepts, you may see green in the layout and in the content section. Green can show access-gated content, such as admin-only access, or if permissions are needed to use a particular feature.

We also use green for future-proofing. For example, we can plan Version 2 features while working on Version 1 by sketching them in green. The green indicates that the feature will be there eventually, and its placement is being accounted for in the layout.

Go Forth and Create

Before you get started with your team, there are a few things to keep in mind as you introduce it to your team.

First off, it takes time. We evolved this framework over a period of 6 months at Digital Telepathy and we are always considering new ways to improve it (for example, would more colors allow more information to be communicated?).

Secondly, it also takes some effort to stay consistent at the beginning. Many team members using the framework for the first time will want to mix colors, but stick with it! The framework was crafted and evolved by defining intention and purpose for each element.

Finally, make it a focus to get everyone involved. With everyone at the whiteboard, team collaboration skyrockets, and issues are solved faster. With developers, designers, and strategists all contributing in the concepting phase, awesome ideas are uncovered far more quickly, and experiences can be validated more rapidly.

Who cares about the design language

Credits to Luke Wroblewski.

So here’s the thing. Google updated its Google+ app, and it comes with a huge redesign exercise on it.

In case you don’t know him, Luke Wroblewski is a designer at Google. He’s been around for a while, commenting stuff about user experience and visual design. He wrote a lot about the Polar app — which I love by the way— and wrote the first article I ever read about the hamburger menu not working well for engagement in mobile apps nor webs.

The point is, Luke knows a thing or two about UX and UI design and he’s been involved in the Google+ redesign. That looks like this:

This new app looks absolutely beautiful. I mean, look at all that color and rich imagery. And I believe I’ll never be tired of using specific color palettes for contextual elements that surround an image.

And the new Google+ app uses a bottom navigation bar, and suddenly the internet went like ‘that’s not so Material Design’.

Arturo Toledo is another designer I’ll use here as a reference. He’s been working with Microsoft for a few years, and his response to this was…

Who cares about the design language.

He claimed that our focus as designers should be on the principles. To make something useful and to design a delightful experience regardless of the platform we’re designing to. That there’s nothing wrong with a navbar down there.

I can’t argue with Arturo. I believe he’s right about this. Maybe not in all cases, but I feel he’s mostly right.

But I do have a few concerns about this navigation pattern though. And it’s because this is an official Google application, so designers and developers out there probably are going to reproduce this kind of navigation more than once.

You got me at ‘navbar’

I do love navbars. And tabbars. And everything that’s not a chaotic hamburger throw-it-all-there-in-the-drawer-and-see-how-it-fits main application menu. It makes things more discoverable, and it makes the app easier to understand without having to think and read that much. I mean, options are just there. Just a quick glance and now you know about everything the app has to offer to you. If you have any doubts, you just tap on the first tab and if you don’t find what you’re looking for then tap on the second one. And continue that way until you’re out of tabs. That’s it.

But then you introduce another main navigation pattern, that is the drawer menu itself. And now we have two main navigation paths. Or three, if we count the top tab-bar.

Credits to Luke Wroblewski. Again.

Ok, tabs in the top bar might not be a main navigation path, but they count as chrome. They count as more options, more space used for navigation. Good luck to you, 4-or-less inches screen people.

In theory everything has sense. You have supportive nav for user profile stuff, a global nav between sections and a contextual nav for the filters. But it makes me think. I can’t use this app without reading and taking a second to think where I’m going every time I want to go elsewhere.

I’ll give it a quick try here. How about moving the hambuger menu to the last item in the bottom navbar? — like a ‘more’ tab — and then moving the Notifications icon to the top bar, right next to the search icon. That should simplify the main navigation, just like Facebook does in its app. Then to reduce chrome you could make a dropdown menu out of the section title in that top bar to put the filters on it, just like Google Calendar makes to open the calendar control. If you don’t want to hide these filters you could A/B Test another idea. Maybe using an slider at the top of the page, just before the real content starts, like in the app market.

Where am I?

If I’m a new user of this app and I skip the onboard tutorial — and you can bet I will — I don’t even know what differences are between collections and communities. I mean, I could try to understand what they are, but it makes me think. They look almost the same and there are names of people everywhere and I can’t even see an interesting post until I’ve been playing around with the app for a while. I get lost in the many options you provide.

This might not be a problem of the design team but the product itself. Just think about it this way:

Twitter: There are people to follow to read their tweets.
Facebook: Mostly the same as Twitter but you can write larger posts.
Instagram: I follow people to see their photos. Oh and I can chat with them.
Google+: There’s people to follow and you can read their posts. Oh and you also have communities to follow and collections to follow that you really don’t know where they come from. And you can write posts and create communities and invite people and set up collections that have more visual impact than the posts feed itself.

Google+ looks beautiful, but making every content as visually heavy as the main section makes nothing look really important.

Be careful with bottom bars in Android

As designer Josh Clark pointed out, the options in the navbar are dangerously close the the Quit button — as he calls the Home button in Android. Collections is just a 2mm mistap from the user shutting down the app, or going back to the previous screen when they dind’t want to.

I always have this in mind when I design for Android. The solution might be moving these options to the top bar, but there are some issues about long words in other languages here. UX Launchpad talks about the tradeoffs of this solution on this post.

But getting back to Josh Clark, he pointed this out and Luke answered…

Theory vs. practice.

Here’s the tweet anyway.

If we assume Luke made a few tests — and I do believe he has — and he’s right, then we don’t need to move the bottom navbar anywhere. And that’s good. Yay.

Google+ is a great underrated product

This is all. Despite all these concerns I have about this redesign it’s still a product that I’d love to use more. Unfortunatelly it hasn’t found its place among the mainstream users. And that’s the biggest problem this social network has.

Maybe Google is working on this. Maybe they have big plans for Google+ that we don’t see because we don’t know what’s ahead in the product roadmap. Let’s just hope they keep improving this product and they prove that it’s useful for everyone.

5 Predictions Shaping The Future Of Customer Experience For 2016

2015 was a year of disruption. In 2015 the world’s largest taxi company owns no taxis (Uber), the largest accommodation provider owns no real estate (Airbnb), the most popular media owner creates no content (Facebook), the largest telecom operator owns no telecom infrastructure (Skype and WeChat), the world’s largest software vendors don’t write the apps (Apple and Google) and the world’s largest movie house owns no cinemas (Netflix).*

Just as business models are changing, the way we engage with brands is changing too. Customer service as a category is evolving. Customer experience is no longer something handled purely by the contact center. But the contact center–the place where customers go for help–is becoming an increasingly key piece of a competitive business strategy. The contact center is the place where brands literally make “contact” with their customers. It’s becoming increasingly common for customer experience to be a key imperative for the c-suite. Business leaders understand the importance and power of providing an experience to customers–not purely a clumsy transaction (the current state of many customer service operations). While the Chief Customer Officer is arguably the most senior customer role within the company, the true owner of the customer experience is the CEO, the person responsible for the company’s performance. Today an unmemorable customer experience should be the thing that keeps every CEO up at night. The reason is (nine times out of ten) this customer experience is the only thing differentiating a company from others. In the future it will become even more important.

CEOs today need to understand the power of treating customers like they are guests in their home, rather than unwanted annoyances. It’s easy to spot the companies that use customer experience as a strategic tool, and those that clearly don’t understand the importance of it.  Technology has increased the gap between companies that are easy for customers to work with and those that aren’t. Let’s focus on the modern customer engagement practices that are being leveraged by leading edge companies. Last year I published five predictions about the future customer service in 2015. Today I bring you my predictions for 2016.

1. Video Customer Service Becomes Popular

Many of us like to talk to people we can make eye contact with–while technology has allowed us to be more impersonal with our customers, it has also allowed us to be more personal with our customers too. It’s not a rare day we see people walking around holding their phones a foot from their face (on FaceTime or Skype) so why wouldn’t customers enjoy this ease of communication with actual contact center agents? Customers love video in their personal lives, and use it at work, so why wouldn’t customers use it to get customer service help? Amazon pioneered video with their Kindle Mayday offering, but this is just the beginning. For example American Express Co. brought video help to its iPad app in February, using technology from Cisco Systems Inc. that supports both one-way and two-way video. Like Amazon, American Express trained agents to inject their own personality into calls. Both baby boomers and millennials like video support, and we will see more companies tapping into the power of video in the next year.

2. CRM Technology Gets Even Better, On Mobile

CRM is getting much better. Technology companies are releasing products that provide easy to use cross-channel CRM technology. This means the agent can engage with the customer on a range of channels without the agent having to leave their screen. They can move with the customer in real-time and trace what the customer’s next steps are. In addition to highly improved CRMs we’re seeing better mobile CRM applications. Rather than a purely mobile version of the CRM desktop software, now agents have a mobile friendly version with improved usability. You can imagine how salespeople would also benefit from not only being able to get customer information on their phone, but use their phone to share presentations and other resources with customers on their phones and tablets in real-time. In 2016 not only will mobile CRMs and software be easier to use, but companies will have the benefit of industry-specific CRMs. You can imagine the demands of a healthcare CRM are much different from that of a finance CRM or a non-profit’s CRM. The benefit of a CRM is for an agent to have the ability to look up customer information and provide helpful information to that customer, however so many of our largest enterprises’ CRMs are so big they are no longer useful. As I said, the difference between companies that are one step ahead of their customers, and those that are painfully behind is stark. Many companies barely meet the basic needs of customers, and others are very ahead of their competitors. They already know what customers need before their customers do. The latter are rolling out CRM systems with analytics engines behind them that will enable the ability to provide real-time offers to customers based on predicting what they will want next or what kind of product or service they might buy next.

Guide on Mobile Design Principles for eCommerce

A few years ago most of us used only desktop computers for that, but in the recent years the situation has changed. Now mobile devices are taking the lead as more and more people prefer using their tablets and mobile phones for surfing the internet.

Ecommerce sphere is not an exception; it also experiences an increase in mobile devices usage. Today being mobile-friendly is a must for any eCommerce site. Even Google treats mobile friendliness as a ranking signal. So here is an overview of mobile sites types and a detailed guide on mobile design principles for eCommerce.

Types of Mobile-friendly Sites

There are a few ways of creating mobile-friendly sites, and here are the most common: responsive design, mobile application and a separate mobile version of the site. Each of these types has its pros and cons which should be carefully considered before you choose the one that most suits your business. Here is a more detailed overview of each solution for a mobile-friendly site.

Responsive Design

This is an approach when you have a single site which is rendered equally good on all devices: desktop, tablets, different mobile phones. The elements of the site (images, fonts, blocks, etc.) are resized according to the screen resolution you are using.

A great advantage of responsive design is that a user sees the same site on all his devices. But at the same time there are some drawbacks, the main of them being the necessity to take into account all possible scenarios and widespread screen resolutions. A designer should decide which elements will be displayed on all devices and which elements are less important and can be omitted on small displays. Moreover, adaptive layouts require more coding which can sometimes slaw down a site.

This type of a mobile site will be a good choice for small and medium online shops.

Mobile Application

A mobile application is a good way to give customers all the necessary information in a user-friendly way. But at the same time this solution requires large resources as a mobile application is developed separately from the main site. Moreover, an application should be developed for all platforms: iOS, Android, Windows phone.

A mobile application is a good choice for large online stores with many categories and products. If a customer visits a site quite often to find, buy or ask something, it’s easier to do it via an application rather than via a site.

Mobile Version

A mobile site version combines advantages of responsive design and a mobile application, thus it is an optimal way of becoming mobile-friendly.

On the one hand, a mobile version is developed separately from the desktop site and can include only necessary blocks with less code. On the other hand, there is no need to design and develop a mobile version for each platform separately as a mobile site version will look good on all devices and screens.

Some large stores combine the above mentioned types and offer 2 variants simultaneously: a mobile version and an application. A customer just needs to decide what will work best for him.

No matter which variant a merchant needs, a designer should follow particular principles while designing a mobile site. I will list the most important of them below. I’ll be mostly talking about mobile versions as they combine ideas of responsive design and an application.

Main Principles of eCommerce Mobile Design

If you have experience in designing desktop sites only, you may find it difficult to design for mobile. Your design should not only be appealing but also friendly for mobile users.

When it comes to designing for mobile devices, the main problem is screen size. Tablets and mobile phones have much smaller screens than a desktop computer. But still you should manage to provide mobile visitors with handy navigation and ensure seamless user experience.

Principle 1: Usability

These days a designer should create beautiful interfaces with usability in mind. To achieve maximum effectiveness of the online shop you’re designing for, you should get to know it better. Start from research and answer the following questions:

• What products are sold here?
• Who is an average customer of this shop?
• Which options should be available? Which of these options are more important?

You may think: how is this all connected with mobile design? I’m glad you’ve asked! The reason lies in small screen sizes that should contain only those blocks and options that are really needed.

Usability is not what a customer sees, it’s something he feels when he browses though a mobile store. Let him feel at home.

Principle 2: Prototyping

Once you’ve collected all the necessary information on the company, you can get down to designing its mobile site. It’s better to start with a prototype which greatly simplifies the process. A prototype should contain all structural elements of the page: text blocks, images, links, buttons, headings and titles, inputs, etc.You can create prototypes in different programs like Photoshop or Axure or even on paper.

Firstly, a prototype will help you to understand the project better. While creating it, you will carefully think over all the elements and their positions, so the next stage – drawing your design – will be much easier.

Secondly, by creating a prototype you save lots of time on future corrections: it’s better to make them on this stage than on next ones.

Before creating a prototype you should decide for which device you are going to create it: a mobile phone or a tablet. Moreover, consider that each of these devices has portrait and landscape modes. Note down all the structural elements that should be found on your prototype not to forget anything.

For example, for the main page of an online shop we will need: logo, checkout, search bar, navigation, products blocks with images, titles, short descriptions and price as well as some general text about the store. Once all these elements are enumerated, you can start creating 4 prototypes: for a mobile phone with portrait and landscape modes and for a tablet with portrait and landscape modes.

Once your prototypes are ready and approved, you can start designing the interface.

Principle 3: Interface

An interface is the first thing a visitor sees when he lands in an online store. Interface sets the store tone which is very important, so your mission as a designer is to make this tone positive and build positive attitude.

Help visitors to quickly understand where they are, what they can get, what functions and features they can use.It can be achieved by specific colors usage, indentations, icons, fonts. If you need to show checkout – add a checkout icon; if you need to insert a link – highlight it with color.

Principle 4: Sizes

There are 2 main fundamental peculiarities of mobile devices: their size and the way a user interacts with a site via these devices: he uses his fingers that are much bigger than a cursor on a desktop. You should bare these peculiarities in mind while designing for mobile.

• Clickable Area Size:

  Due to the above mentioned characteristics of mobile devices an optimal clickable area size should be bigger than 44x44px. If you don’t want to frustrate your visitors by mis-clicks, try to make all the clickable elements (links, buttons, search bar, etc.) 44x44px or bigger for mdpi resolution for Android devices and non-retina displays for iOS devices. For other resolutions you should scale it up.

• Fonts Size:

  You should provide your visitors with fast scanning options and don’t forget about their sight at the same time. That’s why your font size should be no less than 11pt. This size ensures good readability provided it’s used with a contrast background. However, 11pt is more suitable for placeholders, hints and less essential information. For product descriptions and important text blocks 13pt is more suitable.

• Product Images Size:

  It won’t be an exaggeration if I say that product images are responsible for selling the products (in most cases). Many people skip reading details, they just need pics that show a product from all possible angles. This means product images should be noticeable and big enough to enable customers to examine a product in details, you can even add a zoom option for that.

  A product image should occupy not less than 45% of a mobile phone screen width in portrait orientation; and more than 30% in landscape orientation. This will help a customer to see the product details in general as well as notice its peculiarities. As far as tablets are concerned, you can figure out the best images size yourself.

  Apart from images size, you should also mind images quality. The thing is that most modern mobile devices use retina display, so images for 360x640px display resolution won’t look good on screens with 720x1280px or 1080x1920px resolutions. You should always remember that quality of images is one of the most important things for an online store.

• Icons Size:

  Icons are perceived much easier than text, that’s why icons are usually used for hints instead of text. On the one hand, icons should be noticeable; but on the other hand, they shouldn’t be too prominent as they play a secondary role. For example, if you add a search bar with 44px height, add a magnifying glass of 24х24px size. This would be enough for user to understand the purpose of this bar, and it will look nice.

• Forms Size:

  Below I’ve talked about sizes of individual elements, now it’s time to talk about size of an important block – form.

  Size of a mobile phone display is limited, and when a customer needs to fill in a form, a keyboard shows up and overlaps about a half of the screen size. This peculiarity requires keeping mobile forms as minimalistic as possible. They should contain only those fields that are really necessary: e.g. name, address, e-mail. By the way, this rule can also be applied to desktop sites if you want to increase leads: the fewer fields a form has, the more people are likely to submit it.

  A long and boring way from one input to another can frustrate a customer and make him leave the store.

Principle 5: Color

Brand style should be observed not only in the logo, business cards and booklets but also in a mobile site. It is mostly color which helps to show the brand style as well as highlight key element of each page.

Before designing an interface, you should think over which colors will be used and create a palette. If you use few colors, the interface will look boring; if you use too many colors, the interface will look too messy and distractive. So it’s better to keep balance and use 6-10 colors. This is an optimal number but of course there may be some exceptions.

Here is a step-by-step guide of choosing colors for an eCommerce site:

The color combinations you’ve created should be harmonious. Remember about contrast as it helps to attract visitors’ attention to the most important elements, for example to “Add to Cart” button.

1. Choose the main color for the site. It will be responsible for communicating the mood.
2. Choose a secondary color. It will help the main color to highlight different elements.
3. Choose the main color for product descriptions.
4. Choose color for titles. The titles should be noticeable.
5. Remember that various hints or tooltips shouldn’t stand out but still should be visible.
6. Product price is an important element, highlight it with color.
7. Links, buttons and navigation elements should be perceived as clickable elements, this can also be achieved with color.
8. You can choose some more shades of the chosen colors if you need.

Principle 6: Fonts

As with colors, you can create a “palette” for fonts you are going to use: make a list of the fonts names, sizes and styles.

Fonts should have high readability and easily convey the information to potential customers. Therefore, avoid too complex fonts that are hard to read: customers won’t lose their time trying to understand what you are trying to offer.

Your font “palette” may look as a simple txt file where you save the following information:

Heading 1 – RobotoLight 36pt

It’s up to you to decide which font to use for this or that element. Each font has its own meaning and character that will be passed to the site, so you should be careful with choosing the right fonts.

Principle 7: Adaptation

Once you have thought over UX solutions for the mobile eCommerce store, created a prototype, made colors and fonts palettes and drawn the final interface, you work is not over: it’s time for adaptation.

You are creating an online store that visitors will see on their mobile devices. These days there is a great variety of mobile devices having different sizes and resolutions.It would be unproductive to create a prototype for each of them. This means that while creating your main prototype you should consider which elements will be changed, stretched or even omitted depending on the device used.

Adaptation is very important for mobile design. Try to test your prototype at least on most popular resolutions.

Final Thoughts

While this article is dedicated to design principles of mobile eCommerce sites, some points can be used for desktop sites too: interface, colors, usability, fonts.

Remember that principles are not strict laws; you may not follow them all the time. The most important things is to design having usability in mind and thinking about the targeted audience.

Service Design: The Future of User Experience?

Think of service design as your experience in preparing for and watching a movie. Everything from the hype around the movie trailer, booking tickets in advance, reading box office reviews, seeing the latest tabloid buzz about the lead actors, arriving at the theatre, and finally, watching the movie has an effect on your overall experience. The moviemakers can control some factors and not others. What’s critical to grasp is that both the controlled and the uncontrolled elements influence not only your movie-watching experience but also what you do with it next. Do you love it or hate it? Do you buy all the fan paraphernalia or do you tell all your friends not to go watch it? Every little touchpoint adds up to the big picture effect.

Businesses and organizations can no longer get by without considering service design. Whether you like it or not, your brand or product experience is influenced by outside factors. Though you can’t control it all, your best foot forward is to have an awareness of all potential touchpoints in the “service experience” feedback loop so that you’re armed with the insights you need to proactively reach success more efficiently.

What is Service Design?

Service Design is an approach that looks holistically at the organization’s total user experience (UX) as a series of experience-based touchpoints. As designers, service design compels us to empathize with customers: to understand people including both the “how” and the “why” of their interactions. From finance to healthcare and retail to not-for-profit, contemporary economies are all service oriented.

“Although services are intangible, they take place in a physical environment, using physical artefacts and do in most instances generate some form of physical outcome. Subconsciously, customers perceive this environment with all their senses. We see, hear, smell, touch and taste the physical manifestation of services…

“What matters is that understanding the value and the nature of relations between people and other people, between people and things, between people and organizations, and between organizations of different kinds, are now understood to be central to designing services.”

(This is Service Design Thinking, Stickdorn & Schneider)

Case & Point

In a recent Pivot project, we charted the experience journey for a client’s product by using a method called “service mapping”. A service map (or service blueprint) allows designers to approach the experience from an outsider’s perspective and map out customer actions compared with the organization’s intentional points of contact. Many layers can be added to this visual map — frontstage actions, backstage actions, support processes, physical evidence, etc. This valuable blueprint allows stakeholders to more clearly see the effects of many touchpoints together within the overarching experience. Stakeholders can then take action based on where:

• More or less support is needed;
• Opportunities are being missed;
• Efficiencies can be integrated;
• Messages to the user can be streamlined.

“Service design as a practice generally results in the design of systems and processes aimed at providing a holistic service to the user.”

(The Copenhagen Institute of Interaction Design, 2008)

Today, technology disruption is enabling a new generation of service business.

Anyone can be a taxi driver, a hotelier, a lender, a multimedia producer, etc. — we’re only just seeing the beginning of this new evolving service economy. What’s critical is not the definition between the product and the service, not the correlation between the technology and the analytics, but rather the relationship between the user and the service provider.

It’s back to being about the human experience.