You had an excellent experience. This is now your favorite coffee shop.

When we consider the digital side of things, there’s a process that starts with someone first learning of your company to actually becoming a loyal customer.

The customer’s first point of contact with your brand, all the way to their final purchase, subscription, or outreach on your website, is known as the digital customer journey.

What is the digital customer journey?

The digital customer journey is the path an online user takes to find your business. It’s a journey that’s made up of every single interaction a customer has with your company, from social media to your actual website.

There are five parts to the digital customer journey experience:

1. Awareness
2. Consideration
3. Fulfillment – commitment (email signup, form fill, something where they interact)
4. Experience
5. Loyalty

1. Awareness 

This is the point in the customer journey where you’re on the radar and your next customer first notices your brand. This can be through many different doors, from word of mouth to social media or ads. This is when first impressions are made and where you can reach your customers. One of the most significant differences to the digital customer journey as opposed to the physical-digital customer journey is that you have stronger control over your message with the digital journey. You control where your digital ads are displayed through social media, your website, and ad placement.

2. Consideration

Your customer has heard of you and is now thinking about how you might be able to help them. This is the step in the customer journey mapping where they visit your website and actually start to engage with your company and brand either directly on the site, through reviews on the internet, or social media. Once again, you have complete control here. Do you want the customer to truly consider your offer? Having a great website will help with that. Having excellent copy and a clear call to action also doesn’t hurt. 

3. Fulfillment 

In our coffee shop example, the fulfillment stage means an actual purchase. In the digital world, this could be a purchase, but it could also be a newsletter signup, a follow, or even a page view. Because fulfillment can mean many different things, it’s essential to define exactly what fulfillment looks like for you and your company. As part of your digital strategy, make sure you define your goals. This helps to ensure that the fulfillment you’re getting is what you want. Page views are great, but if you really want newsletter signups, make sure that’s what you’re tracking for so you don’t get lost in a sea of data.

No matter what action takes place, fulfillment is the place in your customer journey map where your customer commits. They’ve done their research and have decided that your product or service can solve their problem.

4. Experience

Does your product or service live up to your promises? This is where the customer will determine if what was expected is what they received and determine if they are satisfied. It is also where the first impression of your customer service takes place and can play a huge part in overall customer satisfaction. This is also why it’s essential to know the principles of customer experience for your business. 

So, if you promised a newsletter but didn’t deliver, that’s a bad experience. Or, if they fill out the “Contact Us” form and someone is in touch with them the same day? That’s a fantastic experience. 

Experience is arguably the most important step because this is where retaining a customer and creating loyalty takes place. Without great experience, the first three steps don’t mean much because a bad experience will deter a customer from making it to the next and final step: loyalty.

5. Loyalty

If your product or service delivers exactly what your customer expects, congratulations, you just gained a new loyal customer. Customer loyalty is all about whether or not your customer actually continues to use your service or product.

Although the physical customer experience journey is linear, the digital customer experience takes place as a big ole circle where all the touch points are connected. For example, the loyalty step feeds directly back to the awareness step because if you gain a loyal customer, they are more likely to pass on the good word about your product or service to their friends and family and even share on social media.

The circular digital customer journey tends to get just a bit complex, where certain steps are either skipped altogether or combined with another step. For example, let’s say your favorite YouTuber highly recommends a mobile app that up until now you had never heard of but now, after their raving review, you suddenly feel compelled to download. 

In one fell swoop, you were made aware of this product, considered it, and have followed through with fulfillment.

How The Digital Customer Experience Relates to CX.

The digital customer journey is also directly related to Customer Experience because a great Customer Experience also starts with awareness and ends with loyalty. Customer Experience is all about listening to your customers’ wants and needs. If customers feel heard, they are more likely to not only continue purchasing your product but are also likely to share with others how great your product or service is.

Great Customer Experience can also help to figure out why customers are getting stuck at certain stages in the digital customer journey. Maybe customers are making it to the Consideration stage and visiting your website but not actually making a purchase. By conducting exercises such as surveys, you will be able to figure out exactly why customers are not acting in the way that you expect them to—and how make the right changes.

Understanding the digital customer journey and how it works for a business is essential to reaching a potential customer and keeping a loyal one. Customer behavior, interaction, and experience, whether digital or physical, make all the difference for a business. Gaining customer loyalty and engagement can build your business community.

It’s Time to Turn Visitors into Loyal Customers

Here at the Ranch, we take the Digital Customer Journey seriously. We know that a great Customer Experience and amazing digital product can turn customers into super fans and help you hit your goals. Since a customer can often make multiple touch points with your brand, we use an iterative approach of proven CX strategies to help you validate your assumptions or offer a new path to success. 

Ready to get started? Get in touch (and we promise an actual human will call you).  

The post The 5 Steps of the Digital Customer Journey appeared first on Big Nerd Ranch.

Take Agile and Design Thinking. While these terms might be thrown around fairly casually, there is still real value to what they represent—and how they can be used together. And maybe that comes as a surprise, but thinking about Agile versus Design Thinking is the wrong way to approach things since they aren’t at odds at all. In fact, they work amazingly well. 

Before we get into that dynamic duo, let’s break down what the terms mean and how they are different. 

The Difference Between Design Thinking and Agile

Agile is the How

Agile development is, by its nature, a product development process that is focused on getting a product out the door as quickly as possible, with the idea of improving through incremental improvements after launch. The advantage of the agile method is that the users get a well-built product that they can begin using almost immediately—with the assumption being that there will be iterations down the road. 

Problems occur when the focus is more on those iterations and not on the impact the updates have on the overall customer experience. 

Design Thinking is the Why 

Design Thinking, on the other hand, typically begins before any code is written and the Agile process even enters the picture. It begins by having a diverse team of designers, developers, strategists—really anyone related to the project—sit down and think about the needs of the user first and foremost. 

That’s where the “why” comes into play. The main goal of Design Thinking is to generate as many and varied solutions to the problem at hand and then refine them until the users’ needs are addressed. And, as we mentioned, Design Thinking is for the whole team, not just designers. The whole beauty of the process is that it brings in a wide range of opinions and ideas. 

Think of Agile as the way you fix something and Design Thinking as the tools you use to get the final product. 

Understand not Just the Idea, but Where it Comes From as Well

To get the best from both, it’s probably best to not think of Agile and Design Thinking as sitting on either side of a divide. In fact, they can not just work simultaneously, but they can actually work together. Often to fantastic results. 

Start the Process with Design Thinking

The best digital products are those that find a healthy overlap of meeting business goals and providing the users with the best experience possible. This is where Design Thinking comes into play. 

Design Thinking starts by better understanding users’ challenges and then coming up with the best solutions for those issues. By bringing Design Thinking into the process early on, you’re setting your digital product up for success. And, perhaps more importantly, you’re ensuring that your design and development team is running smoothly—according to IBM, a “design thinking approach can reduce the time for development and testing by as much as 33 percent.” 

That reduction in time is largely due to the fact that Design Thinking brings up and, hopefully, answers the vast majority of questions a project might encounter before any work is actually done. That means a well-built and user-focused product that is delivered quickly. Happy users. Happy client. 

Remain Agile with, well, Agile

When done well, the Agile development process is an innovative solution that allows for teams to move quickly, adjust on the fly, and produce a quality product that can meet customer needs in a timely matter. When considered in the realm of Design Thinking, Agile allows for teams to take all of the information gathered through the Design Thinking process and created a scaled Agile framework that can be applied to the actual development and design of the product. 

The upshot is that while Design Thinking is providing the answers to all the questions, Agile is there to keep the guardrails on the project, ensuring that deadlines are met and clients are happy. 

As Always, Collaboration is Key

The absolute best-case scenario is that both Design Thinking and Agile work beautifully together as a cross-functional team and everyone is happy. And that’s achievable! But, it does require work. 

Throughout the entire development process of a digital product, all parties involved have to have clear communication and the willingness to listen. From the Design Thinking side of things that means clearly stating the user’s problems and possible solutions while being open to any changes that naturally occur during the process. From the Agile perspective, the teams working on the actual product need to meet the expected requirements while also keeping in mind the end user’s experience. It’s not easy, but great things never are. 

That’s where we come in. At the Ranch, we are lucky to have experts in both Design Thinking and Agile Development. Our teams have been working within both processes from the start and relish any and all new opportunities to continue to evolve how we go about things. So, if you’re in need of an amazingly well-built digital product that will surprise and delight your users, get in touch! 

Source:

IBM’s Agile, meet design thinking

The post Design Thinking vs Agile appeared first on Big Nerd Ranch.

A great Customer Experience agency can help to improve your company’s relationship with your customers for the better. Picking the right CX agency can seem daunting at first but it doesn’t have to be. Don’t worry, we’re here to help. 

Here are 4 things to look for in a CX agency:

1. Uncover challenges you didn’t even know existed
2. Remain solutions-oriented throughout the entire process
3. Turn your customers into superfans 
4. Help you hit business goals

1. A great Customer Experience agency helps you find challenges you didn’t even know existed.

Finding the right solution is important but to find the right solution, you have to first find the right challenge. And by that we mean the issue that is most impacting your user and most likely to be the reason why your digital product isn’t working as well as it should.  

The big obstacle is that the user-specific issues might not be obvious. A good CX agency conducts user and stakeholder interviews, deep dives into the tech, and, above all, observes actual users using the digital product. In doing so they reveal not just the clear challenges, but those that are underneath the surface as well. In essence, it’s about data, all of which directly influences the next point. 

2. A great Customer Experience agency is solutions-oriented.

The extensive research of the first point is all collecting information and better understanding the problems. The good news is that there are probably tons of solutions out there. The hard part is finding the right solution for you and your company. 

That’s where context comes into the picture. A solutions-oriented Customer Experience agency takes the problems at hand and overlays them with the company goals. The solutions that best match up to both the problem and the goal are the ones that rise to the top. See, a great Customer Experience agency doesn’t just find a solution, they find the best solution possible. And they do that by utilizing the best of the best from various fields – design, project strategy, engineering, and more. We connect with the right people to find the right solution.

3. A great Customer Experience agency helps to make your users happy.

The ultimate goal of any digital product should be to provide the best experience possible for your users. That’s done by listening to your customers and finding the solutions that best answer the needs they expressed. 

The result is that you aren’t just adding new features and functionality to your app just to add them but instead are focusing on the features and functionality that actually improves their experience. So, your users are heard, they’re happy, and pretty soon, they are super fans. 

4. A great CX agency helps you hit your business goals.

Bottom line? Well, it’s your company’s bottom line. And providing great Customer Experience is great business. It’s vital that your users have the best experience possible, but it’s also important that your company’s goals are kept in mind throughout the process. 

A CX agency will ensure both. And they’ll do that by moving through the entire process with purpose and an eye on both the user’s and the company’s needs. It can be a tricky line to walk, but an agency will have the experience and skills to walk it with confidence.  

At the Ranch, you’ll find all that and more. 

We’re here to help. We’ve got a team of Customer Experience experts ready to take a deep dive into your digital product and help you walk that line between being user-focused and keeping a laser focus on your company’s goals. Ready to get started? Get in touch and let’s chat! 

The post 4 Things to Look for in a Customer Experience (CX) Agency appeared first on Big Nerd Ranch.

You’ve done it. After months (or years) of dedicated hard work, you’ve launched your amazing new digital product out into the world. Or maybe you’ve added some amazing new features to your existing app and they are finally ready to see the light of day. Now, it’s time to sit back and let the good times roll, right? 

Since you’re here, we’re guessing you know the answer to that. We’re now to the point that just having a great digital product isn’t enough. To make things even more complicated, your company has to be in tune with your users, ensuring that you’re providing not just the experience that they want, but the one that they need. 

That’s where Customer Experience comes into the mix. But how can Customer Experience help your digital product, and by extension, your brand, stand out from the competition? 

Continuous Improvement of the Things That Matter

At its heart, Customer Experience is about listening to your users. It’s about looking at the breadth of their interactions with your product and brand and learning what is important to them, what’s working with your app, and what needs to change. This could be anything from “the colors make it hard to read the text” to “I really wish you’d add the ability to share a form with my teammates.” 

In essence, you’re getting the upper hand on your competitors from literally the most important source in the world—the actual users of your digital product. As you incorporate that feedback, you can do so knowing that you’re not just adding features or functionality for the sake of adding them but focusing on the things that will make a better experience for your users. 

So, listen, build, repeat. This is called a critical feedback loop, though we like to refer to it as the Awesome Feedback Loop because the result is a digital product that is user-focused and, most importantly, one that stands out from the crowd. 

Happier Users + More Users

Once you’re well into the Awesome Feedback Loop, you’ll ideally see a couple of things begin to happen. The first is that your current users will go from being customers to being fans. And why not? Everyone loves being heard, but seeing that feedback put into action takes that relationship to the next level. 

The second great thing is that you’ll find that your app is attracting a whole new customer base. In part because the changes, updates, and other bells & whistles you’ve put into place for your current customers are probably the same ones that new users have been craving. Also, your customers turned fans are going to talk and share their great experience with others. 

Bottom Line? A Better Bottom Line.

Following through on a successful Customer Experience project can, in the best case, create super fans of your current users and bring in new customers at a brisk pace. But even if the best case is still a ways off, you’ll have a digital product that keeps getting better as you continue to listen and respond. It’s a win for your company, and, most importantly, it’s a win for your users. 

And that highlights the real benefit of bringing Customer Experience to your company—you’ll find that the decisions you make for your business are inherently those that are best for your users. It’s a mindset as much as a process. As a digital product development agency, we can help bring your ideas to life.

It’s Time to Tap Into the Awesome Feedback Loop

All of this might seem daunting, but don’t worry, we’re here to help. We’ve got a crack team of Customer Experience experts ready to help you help your users. So, if you’re ready to get started on your next project or would like to just chat about how you might begin, be sure to give us a shout. 

The post A Great Digital Product Isn’t Enough Anymore appeared first on Big Nerd Ranch.

• How and where will someone use this tool?
• What problem are they trying to solve with it?
• How do they currently solve this problem?
• Will the tool reduce the number of steps involved?

From there, you begin to ideate on the best way to structure a helpful experience for them through technology. (For a more detailed exploration of the phases of Design Thinking, click here.)

Of course, when laid out in this order, Design Thinking seems like the obvious choice. Certainly, it’s the one we recommend – and always use to develop digital products. But when faced with intense time-to-market constraints, the technology-focused approach often wins out. After all, an unfinished product with a thoughtful development process does nothing to advance your company’s bottom line. 

Yes, your app needs to function before anything else can happen. But what if you don’t have to choose between a carefully designed user experience and hitting aggressive business targets? 

Upon further examination, Design Thinking offers you the fastest route to a successful digital product – one that can help you meet your business goals through, rather than at the expense of, superior useability and creativity. We would even go so far as to argue that you simply can’t build a successful digital product without Design Thinking. 

Let’s examine why:

In today’s competitive environment, user experience IS the product.

The fact of the matter is, the market for digital products is a crowded one. Gone are the days that users will settle for an okay experience when they could be having a great one. And the constant introduction of new technologies compounds the pressure: 73% of customers reported that one extraordinary experience with a company raises their expectations for others, according to Salesforce.

Beyond individual budgets, a bad experience with a digital product can do even greater intangible damage to your brand. Sixty-seven percent of customers believe that the way a company uses technology is a reflection of how it operates in general. Even seemingly small features updates can undo the hard-won confidence users have in your company’s ability to deliver value.

 In this competitive atmosphere, the user experience is the product. 

The best way to create a good one? Empathize – which just happens to be the first stage of Design Thinking. Often, teams actually interview users to gain these insights. By understanding the user’s specific situation and challenges, you can engineer an experience that’s truly beneficial and easy for them – so they don’t immediately abandon your tool and create an alternative solution.

You can keep technical and design debt to a minimum.

Typically, two types of pressures force development teams away from a user-first mindset and into two versions of debt, both of which deprive an organization of its return. First, the race to release an application often drives technical debt. Technical debt accrues when a programmer opts for a faster solution over building out a more involved one that is less likely to incur bugs down the line. 

Technical debt describes the weight of all these shortcuts as they transform into complicated, expensive messes that take extended time (and budget) to fix. A 2018 report from the Consortium for IT Software Quality indicates that software developers spend 42% of their time fixing bugs, with the task constituting 80% of IT budgets. If you’re in a regulated industry, a web of buggy code can have even larger consequences in the form of HIPAA and PCI violations – which can cost up to $1.5 million apiece. 

Once an app has been released, there’s also the pressure to introduce new features. But when programmers don’t take the time to consider how a new feature might function in relationship to existing ones, they take on design debt. As a result, the feature comes out on schedule (and it looks fantastic) but people can’t easily take advantage of it – or worse, it interrupts the user flow entirely. The time saved on the front end ultimately creates added effort, expense, and brand damage later. 

Design thinking helps development teams avoid both of these pressures from the start. First, by putting the user’s needs into context, development teams can balance the must-haves from an experience perspective with the business goals of a particular project. Most importantly, as solutions pass through the prototype and development stages, teams have a low-stakes way to quickly determine whether the product or new feature will thrive out in the world (and where bugs threaten success). From there, they can put their focus on exactly what needs adjustment and what’s not serving the user before creating a full-scale version of the product or update. 

You have a set process with flexibility – that yields the strongest solution.

Leaving room to imagine multiple solutions to a problem doesn’t mean you have to abandon all sense of efficiency. Design Thinking, like any other structured approach, introduces a set process with clearly defined phases. Yes, there’s ample room for ideation, but a faithful approach progresses steadily to prototyping, development, and testing – saving you ample time in the long run with a product that performs well at the start.

And thanks to the inherent flexibility of ideation and prototyping, your team still considers multiple solutions and configurations, ensuring your final product has maximum creativity and functionality from day one. 

In conclusion, technical functionality without useability is ultimately a wasted expense. 

Or, to put it more plainly: just because it turns on, doesn’t mean it’s working. Design Thinking is the ideal method for staying on schedule with a digital product that can meet real-world needs under real-time pressures and constraints.

At the Ranch, we’re always looking for new ways to make Design Thinking enhance digital product development. If you’re ready to give Design Thinking a test drive, or apply it to a great new idea, we’re here for support, guidance – or just a friendly chat. Want more information? Check out what our digital product agency can do for you. 

The post Why Design Thinking Is a Must-Have for Digital Product Development appeared first on Big Nerd Ranch.

We’ve previously looked at the Design Thinking process and discussed how understanding user needs is key to giving them the experience they’re looking for—which can be key to helping businesses meet their goals. In this post, we’ll take a look at exactly why the Design Thinking framework is so important and shed light on how the process can help you build brilliant digital products that will make a difference for your users and your company. 

At a high level, why is Design Thinking important? 

Design Thinking lets you deliver well-thought-out applications that delight your customers from Day One. By thinking through the process from every angle up front, you keep your reputation intact—and avoid the time and expense of rolling out new features or functionality post-launch.

Design Thinking is flexible and fixed—at the same time

Design Thinking is, first and foremost, a process. It features steps to follow and a checklist of items to reference. It also allows for enough wiggle room so necessary changes or pivots won’t completely disrupt the project. 

What that means for your team is that they have a set path to work along, clear goals to achieve, and which complex problems need solving, providing much-needed structure to your project.

But, things change, experiments don’t work as planned, or new ideas are introduced. The ability to incorporate all the unexpected bits of life is where the Design Thinking process really shines. It’s flexible enough to inspire creative thinking, yet fixed enough to keep the problem-solving on track.

Design Thinking is truly democratic

One of the best elements of Design Thinking is that creativity and curiosity can come from anyone. Design Thinking allows for creative thinking from everyone, not just designers and developers. For this process to work, anyone and everyone should be a design thinker. Users and customers are also invited to the Design Thinking table because they are the folks that the process impacts most. The end result is an app that works for everyone involved because everyone has had their say. 

Design Thinking offers value now—and value over time

Design Thinking keeps you focused on value. By putting the users’ experience first, you’re able to identify any complex problems and can address them with the best possible solutions. And since it offers built-in flexibility, you can afford to make needed adjustments from the start all the way to your app launch date.

The Design Thinking process also helps to keep tech and design debt at bay. By taking a purposeful approach to your app’s design, you’ll find that the design and build can be more sturdy and provide deeper solutions than one built without that vital context. 

 So now you know all about the benefits of the Design Thinking framework. You might be thinking, how can I make the best use of this approach to innovation? Here are three key takeaways:

1. Get buy-in from your teams.
   The process needs to be understood to be appreciated. Make sure those involved understand the Design Thinking approach upfront. Once briefed and onboard, they’ll be able to make valuable contributions from the start.
2. Constantly refine the process.
   What’s working, and what’s not? Are ideas flowing? Are answers presenting themselves? Adjust the core process to make it work for you to address the problem at hand. And don’t shy away from having those difficult conversations around possible improvements to the process. No one likes to be the naysayer of the group, but pointing out potential obstacles early helps your team resolve these issues before it becomes an even bigger problem. 
3. Don’t be afraid to modify the process to better fit your team’s needs.
   One of the things we love most about Design Thinking is that it offers room for flexibility to make sure the process addresses the issue at play. Basically, your team is unique and you need to approach your processes with that in mind. Using Design Thinking as a template is a great place to start. Then, adjusting for your team as needed is where the magic will really happen.

Design Thinking here at the Ranch

We’re a curious bunch at Big Nerd Ranch, full of design thinkers, developers, designers—the list can and does go on. We like nothing more than to get inside the heads of the people who stand to benefit from the digital applications we build. Design Thinking is a powerful tool used by BNR senior-level designers and engineers. Join us at the table. Reach out and let’s get started.

The post Why Design Thinking Is So Important appeared first on Big Nerd Ranch.

The unveiling of Apple’s flagship phone, the iPhone X, has confirmed the existence of the largely speculated top “notch” or sensor housing. It has also confirmed how Apple intends for the UI to work with it.

Instead of trying to hide the sensor housing using a black UI, similar to how they hide the screen edges on the Apple Watch, Apple has chosen to show its horns (literally) by pronouncing the UI in full color past the sensor housing into each of the corners of the screen.

Portrait Orientation

While this seems purely aesthetic, there are a few considerations to make when designing around this sensor housing in both portrait and left/right landscape orientations. In portrait orientation, you’ll need to define how to adapt the status bar background, and if that should change for this device. Many apps choose to extend their navigation bar color into the background of the status bar, and on this new phone, this continues to be the recommended approach.

It is also recommended that you do not make the status bar black in an attempt to mask the sensor housing. As it currently stands, there is no way to reliably resize the status bar, so you may encounter some weirdness in attempting to manually blend it in with the sensor housing. Regardless, your app should try to conform to the norm since it will have to coexist with many other applications in the user’s daily workflow.

Landscape Orientation

The sensor housing does also have some ramifications when displaying UI in a landscape orientation. Your UI will have to adapt to this in ways that respect the sensor housing without causing the user anguish. iOS 11 already employs safe areas and margins to help ensure your layout does not fight with system UI like the new Home indicator and the status bar. This also applies to table view cells in landscape orientation. These safe areas and margins guide the UI to be centered nicely, regardless of whether or not the screen is landscape right or left.

If your app uses platform-standard components and Auto Layout, your UI should scale gracefully to accommodate the iPhone X screen. For custom UI, you will need to be aware of any UI elements that would be cropped by the screen’s corners or sensor housing. It is still recommended that you conform to layout margins and the safe area when designing custom UI.

More Information

Discover how to get your apps ready for iPhone X and check out Apple’s newly updated design resources. I highly recommend this video, which provides an overview of designing for iPhone X. We also recommend reviewing the updated Human Interface Guidelines, as well as the updated Sketch, Photoshop and Adobe XD resources.

The post iPhone X: Designing for the Notch appeared first on Big Nerd Ranch.

Year after year, Apple rolls out platform features that greatly improve usability when they’re used correctly. Unfortunately, many apps don’t take advantage of these features, even if they’ve been around for a while.

With the release of iOS 11 on the horizon, now is the perfect time to start incorporating them. To help you along, I’ve listed out some under-used features and reasons why your users will thank you for adding them to your app.

Quick-Launch Options on the Home Screen

3D Touch allows users to see additional options or content previews when they perform a deep press on an item like an app icon on the Home screen. By pressing on an app icon, the user can see additional quick-launch options.

Why support this feature?

Think of this as short-cutting the steps a user must take to get to certain features. Quick-launch options give users the ability to get right to the features in your app that they want to. This is especially useful for features that a user would use quickly and frequently, like starting a new message, sending money to a friend, or jumping into their favorite playlist.

3D Touch in Your App

Users can also use 3D touch to see additional interactions or even preview content without having to navigate to another view.

Why support this feature?

Pressing on an interactive object is how users now “test the waters” before jumping in. Preview, as an example of this, offers users the ability to see a piece of content, like an article or photo, without committing to tapping on it and navigating back to the preview screen. Users familiar with iOS have come to instinctively rely on this, and not supporting it will break their mental model, essentially pulling them out of the experience you’ve created.

Widgets

Widgets are found on the Today view and give users simple, quick access to one primary feature they’re always using or checking in on. In addition, these widgets offer the ability to see constantly updated information without the need to launch the app. Weather apps are a perfect fit for this feature.

Why support this feature?

If your app allows users to check on bids, see transactions come through, complete to-do’s or anything else they’ll be doing repeatedly through the day, you shouldn’t force them to launch the app every time they need to do it. A widget offers a quick way to both see and interact with items that they frequently need without forcing them to find your app each time.

Interactive Notifications

Interactive notifications allow users to react to notifications through the notification itself without the need to launch the app. Notifications can have simple buttons that the user can tap to complete actions or even allow users to input text.

Why support this feature?

If your users need to respond to a notification in some fashion, you should consider allowing them to do it without launching the app. Replying to messages, liking a post and viewing tracking information on a shipment notification are all examples of useful actions that your users will likely take after seeing your notification, so you should let them do so instantly. The most useful notifications give the user adequate content to preview and actions that are most relevant to them in that situation.

Split View and Slide Over

With Split View, iPad users can have two apps (four, if you count Picture-in-Picture and overlaid apps) on screen at the same time and can even adjust the screen distribution to fit their viewing needs.

Why support this feature?

Despite being best practice, many iPad apps aren’t supporting Split View or Slide Over. This is most likely due to apps not supporting the new Storyboard-based launch screen which, along with supporting all screen rotations, is necessary for supporting Split View and Slide Over. If your iPad app ever has to work side-by-side with another, say, Notes or Calendar, you should absolutely support Split View. Being able to see and interact with both apps at once can save a user from having to quickly switch between both, leaving them with more time and less frustration.

Extensions

Extensions allow apps to essentially outsource tasks that other apps do better. Apps can support extensions that allow users to complete tasks in their own app from another and can also support access to other app’s extensions from their own app.

Why support this feature?

Extensions allow your users to develop a workflow that uses your app in conjunction with others, making for happier users and less features you have to maintain. For example, a user can use your app to create something and save it to Dropbox or Google Drive. This allows them to use their favorite service for storage and allows you to focus on sharpening the features that they like most about your app. Everyone wins!

TouchID Authentication

TouchID allows users to quickly authenticate using their fingerprint, as opposed to typing a username/password or using a password manager. Using TouchID is secure, widely adopted by users and saves them a lot of time.

Why support this feature?

Just like password manager integration, users have come to expect TouchID authentication. Requiring a password often becomes a barrier that deters anyone who isn’t a die-hard user of your app. If your app demands authentication often, you should absolutely support TouchID authentication to allow users quick access.

SiriKit

Sure, Siri can set a timer and remind you to do things, but Siri offers much more. With SiriKit, third-party apps can leverage the smart assistant to allow users to complete tasks with just their voice.

Why support this feature?

In many circumstances, your users may be unable to interact with your app through touch and will lean on Siri to help them out. By supporting SiriKit, you can empower them to complete simple tasks even when they’re unable to interact through touch. Your users will feel smart for being productive when they otherwise wouldn’t be, and they’ll remember this interaction next time they’re in a similar situation.

Drag and Drop on iPad

With iOS 11, Apple will introduce drag and drop functionality for iPad. With one gesture, a user can drag a piece of content within the app and from one app to another.

Why support this feature?

By supporting drag and drop, your app will shortcut a lot of work usually reserved for copy-paste or saving to iCloud. This exchange of data between apps breaks free of the silos that apps have become, allowing users to create content much more easily without your app having to support every feature to do so. Drag and drop is also the perfect productivity companion to Split View.

These features all represent huge improvements to usability when they’re used in the right way. If you’re interested in incorporating them into your iOS app, reach out to us for design and iOS development assistance.

The post Improve Usability in Your iOS App with These Features appeared first on Big Nerd Ranch.

Recent versions of iOS have reimagined the design for several of Apple’s platform apps, as Apple Music and News were among the first to adopt big titles, rounded card-like UI and filled buttons. Apple pushes these changes even further in iOS 11 by making them the norm for the platform. With these changes, Apple is further aligning the latest version of iOS with the core themes established in iOS 7: clarity, deference to content and a sense of depth.

The changes introduced in iOS 11 are a natural evolution of the platform to better serve users. As designers and developers, we need to reevaluate our own apps to make sure that they conform with the new design language of iOS in order to meet user expectations.

Improving Clarity

iOS 7 delivered aesthetic improvements, but also introduced a lack of clarity, particularly when it came to visual hierarchy and interactive elements. The dramatic shift in this design language required users learn the UI without the crutch of skeumorphism. Users now had to discern borderless buttons from text views and establish what each flat piece of UI did without any hints.

Since then, the iOS design language has evolved to improve on these issues. Apple has expanded its design lexicon by improving the experience of Apple Music and News. iOS 11 pushes this language to be used globally on the platform: the App Store redesign is a model for the community to do the same.

More than ever, iOS advocates for visual hierarchy and accessibility through use of typography. The large option for screen titles now allows designers to better communicate the difference between a top-level screen and its children to a user who otherwise may not know where they are in the navigation hierarchy.

In addition, the three Title type styles in iOS now use the Regular weight of San Fransisco Display instead of the Light weight meaning that, even by default, titles are more readable and noticeable. Furthermore, Dynamic Type APIs now allow apps to leverage crucial Dynamic Type accessibility features even while using a custom font. All of these changes help better enable designers to lean on the platform’s offerings in order to create clear, accessible designs.

iOS also now advocates for a new, more unified rounded aesthetic. Cards, buttons and iconography all prescribe to rounded corners allowing for a softer, friendlier visual design. Buttons and content items, like cards, use rounded corners, which give users a sense of these being selectable. Generally, filled buttons are now used throughout the UI instead of outlined or borderless buttons, which create a more clear call to action. In addition, iconography is now filled instead of outlined, and icons that still use outlines now have an increased weight to allow for better readability. While some of these are subtle, these changes help users understand how to better interact with iOS.

These changes represent improvements in accessibility, wayfinding and general tone for the OS. In iOS 11, a user can see where they are with a large title, identify content in visually organized cards and find a clear call to action through big, filled buttons. This deeply expressed clarity furthers Apple’s vision in iOS 7 by instilling trust in users that they can successfully understand and navigate iOS with little doubt.

Reorganizing and Streamlining

One less obvious point that Apple made in their recent keynote is that it’s okay to reevaluate how you organize and show content. In the newly redesigned App Store, the primary navigation now divides content by what most users are looking for when they visit the App Store. Games and apps are now separted in the tab bar instead of both being found throughout multiple tabs. Daily content and discovery is streamlined in the Today tab.

All of these changes signify that content should be structured based on user needs instead of what we as developers want users to do. Most importantly, Apple, through example, is stating that it’s perfectly acceptable to change, especially if you’re changing to meet user expectations.

What Now?

Adopt the design language early. It’s important to be consistent with the design language of a platform because users already have a relationship with it. By adhering to the new iOS design language, you’re allowing your users the advantage of already understanding how your app works, because they know how to use the platform. With the improvements in accessibility and aesthetics in iOS 11, there are plenty of reasons to get on board.

Clear a path to your user’s goal. The Music app now defaults to the user’s library. The App Store now lets users quickly find apps, games and what’s new today. These changes came out of usage activity, which makes for a good lesson. You should make it a priority to shorten the user’s journey from entry to goal. Take stock of your content, identify what your users actually want when they use your app and reorganize your architecture to make that journey simple and coherent. Make it easy for the user to do what you want them to do.

At Big Nerd Ranch, we’ve already begun working these design changes into our client projects as we prepare for the public launch of iOS 11 in September. If your company needs to get your apps ready for the launch, get in touch. We’d be happy to work with you to take advantage of these improvements and ensure that your users receive the experience they expect.

Learn more about why you should update your apps for iOS 11 before launch day, or download our ebook for a deeper look into how the changes affect your business.

The post Think Bigger: Design Changes in iOS 11 appeared first on Big Nerd Ranch.

With the introduction of the Android O preview, we’ve now got a good look at some of the changes Google is planning to bring to the soon-to-be-named OS update. From a visual design standpoint, one thing that stands out in particular is the introduction of adaptive launcher icons that allow for a more unified look on the homescreen. What does this mean for you? Well, OEMs (or original equipment manufacturers like Samsung and LG) can now control the mask shape of the launcher icon on each device resulting in a uniform shape for all app icons on the home screen. For instance, your icon might be a rounded rectangle on an LG device and may be circular on a Pixel. Of course, with this change comes a change in getting launcher icons ready for production. To help with this, I’ll be going through the process of creating an adaptive icon and highlighting considerations to make while creating your own.

Before we dig in, make sure that you’re designing your launcher icon at 108 dp by 108 dp for MDPI resolution. In order for Android to use both layers separately, you’ll need to export both the foreground and the background as two, separate 108 dp layers with transparency. Just like with all Android assets, both of these layers still need to be provided at all density buckets, so plan for this also.

Start by figuring out how you’re going to lay out your icon. The foreground layer should be reserved for a branded icon and will move on top of the background layer. Keep in mind that even though there’s 108 dp of glorious space to sprawl, your foreground layer art should only really be taking up 48 dp to 60 dp since everything outside of the middle 72×72 dp has the opportunity to be masked in a variety of different shapes. Android will now reserve 36 dp from all sides for animations, so expect that some of the masked background will become briefly visible during animations.

Use your brand colors or a simple pattern in the background layer, so that your foreground layer is pronounced. Even with edge masking, you should ensure that your background art extends the entire width and height of the 108 dp icon as it can become briefly visible during certain animations. Be sure that your background art extends throughout the entire 108 dp area so that it will mask and animate properly without any weird visual hiccups.

Once you’ve created a foreground and background layer, try testing out a few different masks to make sure that your design is flexible. In the animation below, Google has hinted at a few different masks that OEMs will have the ability to select from including circles, squircles, and rounded rectangles.

Finally, make sure that you’re exporting both of these layers (foreground and background) separately. Like I mentioned, you’ll need to export these at all density buckets so that the icon will appear at the correct resolution on any screen. Even though your foreground layer art isn’t using the full 108 dp space, it needs to be saved out at the same size as the background layer in order to layer properly. Currently, O Developer Preview 1 image is only available for Nexus 5S, Nexus 6P, Nexus Player, Pixel C, Pixel, and Pixel XL, but if you have these devices for testing, consider creating a build with your new launcher icon to see how it behaves on Android O on various devices.

To help in your adaptive icon endeavors, I’ve created a template in which both foreground and background layers are saved as symbols with some example masks to try out on your designs.

For more information on Adaptive Icons, check out Google’s Android O preview documentation. With more changes on the horizon, we’ll be watching Android O and Google I/O closely, so make sure to stay tuned to this blog. In the meantime, check out our post on refining custom typography in your Android app or our recent work on securing your Android apps.

The post Android O: Get Ready for Adaptive Icons appeared first on Big Nerd Ranch.