The BHW Group

The Habit Burger Grill App Surpasses 1 Million Downloads

Mon, 01 Mar 2021 00:00:00 +0000

BHW’s mobile application for The Habit Burger Grill recently surpassed a huge milestone - it now has more than 1 million downloads! Let’s take a look back and unpack what made this app so successful. We’ll look at the business factors that influenced our design and development considerations from the beginning, and how those considerations were carefully materialized in the features we built.

We have worked with Habit for around three years. For those unfamiliar with the restaurant industry, Habit’s CIO Mike Repetti put the app’s performance into context:

As an app tailored for usage by the general public, this project required that BHW incorporate a wide range of considerations into the design and development processes. The app had to be accessible to users of all kinds of demographics, since The Habit Burger is a popular fast-casual chain that serves customers at 275 locations in 13 states and internationally. Additionally, this app had to be comfortable for users with varying familiarity with technology. We put an incredible amount of effort into making sure that the app could easily guide first-time users while also being accommodating to power users.

As mentioned earlier, The Habit Burger Grill mobile app has an extremely high Apple app store rating of 4.9/5 stars from 18,300 user reviews.

We attribute this high rating to a number of key considerations that we built into this app from the beginning. We focused particularly on things like ease of first-time use, rapid re-ordering for return users, and thoughtful permissions requests and privacy considerations. We also prioritized ease of item customization so that every customer could tailor their order exactly how they wanted it.

Overall, we paid an extreme attention to detail and to removing any possible rough edges from the app. We designed cohesive systems to catch and fulfill every type of ordering flow we could think of. For example, we even made it possible to change the store you order from, but keep the items in your order and its customizations. Because of this, the Habit app is not limited from things like switching locations.

Post-launch, we also made sure to maintain and improve the life cycle of this app. After some time on the market, many mobile apps of similar size and function experience feature bloat - an occurrence where new features or fixes actually interfere with the basic core function of the app, rather than meaningfully improving the experience. We made sure to avoid feature bloat by thoughtfully refining and introducing new features that do not detract from usability.

Finally, we built in robust error tracking, reporting, and analytics to continually improve the performance, reliability, and usability of the applications. As the app continues to grow, we are able to distill valuable insights and iterate with each update. We are excited to have hit the milestone of 1 million downloads, and can’t wait to see what the future brings.

Sprinkles Release Announcement

Sun, 28 Feb 2021 00:00:00 +0000

Our latest release is with Sprinkles, one of America’s favorite cupcake shops! Check out our work live right now at the ordering site.

Throughout the whole process from design to development, we worked closely with Sprinkles in order to understand their specific needs, workflows, menu, and customers. During this process, we evaluated the existing in-store and above-store technologies to identify the largest area of need for Sprinkles’ digital properties. We were able to design a solution that significantly improved their web ordering experience without disrupting their existing processes or other existing systems. We also designed our solution in such a way that we can continue to improve their host of digital products in the order of largest benefit.

We designed numerous ordering workflows to optimize ordering for various product types. Two of the most complex product types were for Sprinkles’ Cupcakes by Flavor orders and Sprinkles’ Fill a Box cupcake orders.

Cupcakes by Flavor was designed to make ordering higher quantities just as convenient as lower quantities.

This design facilitates easily ordering any flavor in any amount. The clean layout displays each available flavor accompanied by photography, with descriptions available if a user clicks on them. Users can order using the plus and minus buttons, or manually type in a number. This makes ordering any number of any flavor incredibly smooth. The number of cupcakes are always displayed on screen as well, so that the user always has confirmation that their order is being updated with their selections. After selecting cupcakes, users are guided through box selection to make sure their cupcakes are packaged to order.

Cupcakes by Flavor and Fill A Box orders were a balancing act between offering the user as much customization as possible while still making the ordering process easy and intuitive. Below, we’ll unpack the process that went into making the complicated Fill A Box workflow easy for customers to use.

Research

During the research phase, we explored different User Interfaces and websites where the user had the ability to highly customize the product. We examined products inside and outside of the restaurant industry. From the start, we knew we wanted a visual emphasis on the food and the ability to make it highly personalized.

Information Architecture

We began with a User Flow to identify the various User Experiences, which helped us gain an understanding of current features and functionality vs. what we needed to build.

Wireframing

We prioritized food-forward ordering and rewarding customization options. To do so, we streamlined the entire ordering process to allow the user to design, customize, and review their order in real-time.

We concluded that the most important thing in the ordering process was to give the user control. To bring this to life, we came up with a user friendly and visually appealing solution. We made sure the user could simultaneously browse cupcake options, add them to a box, and view the final product. We also wanted ordering cupcakes to be an exciting process. Each cupcake pops into the box as the user adds it, in any order desired, and each step comes with more options to customize. Users now have a full visual understanding of exactly what they will receive while also introducing a fun element into the ordering process. We hope that this immersive and exciting online ordering experience will keep customers coming back for more.

First, we started with mobile prototypes. With the mobile-first approach, we were able to fit all functionality and features into less screen real-estate to ensure they would translate to desktop seamlessly. From there, we were able to design for desktop while maximizing parts of the User Interface we wanted more visual emphasis on, such as the final cupcake arrangement. This was an iterative process: by continually prototyping out basic ordering flows in mobile and desktop, we could test the design constantly and resolve potential issues early on, before moving to styling.

Styling

For design, we wanted to keep it simple: focus on the product. Large, professionally shot photos on a white background showcase what Sprinkles has to offer. For the user to get a more rich experience with ordering cupcakes, we designed the box preview to be isometrically viewed, as if the user was sitting at a table and looking down at their creation.

With this 3D angle and our dynamic cupcake quantity pickers, our ordering system offers an almost tangible quality that a static photo just can’t compete with. By combining photos with pixel-perfect box renderings in Photoshop, we were able to layer transparent PNGs on top of each other, brought to life by our amazing developers.

Responsive Design

We live in an exciting time for product design where mobile can be just as feature-rich and easy to use as desktop - and that’s what we accomplished with this redesign. We did not compromise any functionality in any breakpoint. As a result, the user can enjoy a fully responsive experience.

Administrative System

On the administrative side, we built an easy to use admin system to continually configure and adjust the platform without developer involvement. Sprinkles can now independently update information like store hours, item availability, menu items, and special promotional periods with flexibility and efficiency. We also built in robust analytics to continually refine and monitor the platform.

One of the highlights of the admin system is the custom order scheduling and throttling. Because Sprinkles bakes many of their goods same-day for freshness, they needed a way to quickly communicate and coordinate available supply with projected demand at each individual store. Our system enables Sprinkles to manage and update available quantities and orders in real-time, and behaviors can be configured to respond to custom thresholds, such as automatically disabling more orders for certain time slots once they are filled.

Conclusion

Sprinkles is now able to fulfill orders in a more efficient manner and update bakeries in real-time. From design to development, we helped transform Sprinkles’ ordering system to give customers the ability to order exactly what they want, how they want, when they want it.

The Value of a Systemic Design Approach

Thu, 08 Aug 2019 00:00:00 +0000

The Parable

There’s a story that my father used to tell me which has shaped how I approach problems.

Once upon a time, a married couple gave birth to a small boy. Over the years they realized that he was quite dumb, and lacked an ability to think critically.

One day, the parents had to leave their home for a few days to go see some sick relatives. Because the journey was rather long and dangerous, they didn’t want to bring their son. They were afraid that he would starve if he was alone, so they asked a baker to make a special loaf of bread shaped like a large ring. The mother then put the ring of bread over the boy’s head, so it was looped around his neck.

“When you get hungry,” she said, “just look down and eat the bread right under your nose. There’s enough bread for you to last an entire week without us.” The boy agreed and the parents left.

After five days, the parents returned back to their village. They were horrified to hear that their son had died of starvation. When they ran back into the house, they saw what had happened - only the front half of the bread ring had been eaten. The boy didn’t think to turn the bread ring, and as a result, he starved when there was food in plain reach.

Although this story is extreme, the underlying message is broadly applicable. This story exemplifies an exaggerated version of linear thinking, a thought process that follows known cycles or steps. A linear thinking process moves forward like a sequential line. Most of us are taught to approach situations linearly - we look for causes and effects, rises and falls, or actions and reactions. However, this style of thinking can limit the capacity to solve problems if the primary procedure breaks down.

In this story, the boy understands a simple procedure: if he is hungry, he can lower his head to eat. That’s simple enough, and it works for a period of time. But once there’s no more bread in front of him, he cannot follow that procedure anymore. This wouldn’t be a problem if he would turn the bread ring, but he cannot realize this solution.

Linear vs. Systemic Thinking in Our World

Even though we can easily recognize the solution in the parable, most of us still default towards linear thinking. We tend to cling to what we are most familiar with. These approaches include reductionist models that disregard context, divided organizations that fragment objectives, and habitual patterns for who we consult and how we make change. Our societies have organized knowledge and action by dividing them into smaller units. For every bureau and department, there are five more sub-units underneath. This can fragment knowledge and create separations between theory and practice.

As a result, many of us find it challenging to think creatively on broader scales without utilizing some kind of tried-and-true framework. Unfortunately, this can make problem solving very difficult, especially when we are dealing with disruptive forces. Linear-thinking approaches are very effective when analyzing well-framed problems that can be easily traced and studied. However, the problems we face in our lives are rarely quite as clear-cut. Instead, they can be extraordinarily broad, messy, and complex. In these cases, linear-thinking can lead to high costs that overturn our original intentions.

Instead, we should strive to adopt a systems thinking mindset. Systemics views the world in terms of connections and interactions. These connections imply that actions have wide-reaching effects, some of which might be unintentional. Additionally, systemics sets out to view systems in a holistic manner by exploring unique perspectives and boundaries. This type of thinking is adaptive and social, and practicing a systemic mindset is invaluable in addressing complex situations.

Systems Thinking in Design

The core idea of design lies in intentionality. Through design, we shape our ideas into meaningful forms. Design permeates every aspect of our lives, from the cut of our clothes to the turns in our streets. In turn, everything can be redesigned. This critical idea challenges us to evaluate our world and ask ourselves: How effective is this current design? Can we redesign it to be better?

At The BHW Group, we understand this challenge very well. Design is a critical component in our work. Our designers and developers work closely together to create seamless user experiences that we continuously update and re-evaluate. Design, particularly, is a field where linear thinking can be a setback. Most designs don’t just exist for one user - a website’s landing page must appeal to a wide audience, a pair of headphones must fit a variety of ear shapes, and so on. Additionally, great designs incorporate many perspectives to ensure that the intended message is effectively conveyed. Many failed designs, such as Pepsi’s infamous Kendall Jenner ad, fail to consider some of their audience’s perspectives.

Systemic design can avoid these pitfalls and generate innovative creations. It combines the design idea of intentionality with the systemic idea of interdependence. Through systemic design, we can collaborate with a wide variety of resources to create long-standing designs and solutions. This process can apply to complex challenges across all disciplines. We can see examples of systemic design all around us, including:

Awesome Without Borders, a program which offers no-strings-attached $1000 grants to support “creative and zany ideas”. Previous grants include a support system for dying languages, free-loan bicycles for refugees, and a hip-hop feminism dance party.
Energy Futures Lab, a social innovation lab in Alberta trying to lead the way in transitioning towards a low carbon economy. Their diverse stakeholders include industry, non-profit, government, and academic partners.
The Color Complex, a collaboration between students at The University of Texas at Austin and The University of Ghana to create specialized social campaigns for both campuses to mitigate negative health effects of colorism.

As you can see, these systemic design projects are highly varied in terms of their composition, process, and objective. However, all systemic design projects share key traits:

Diverse core teams which engage widely with others and their surroundings
An open, collaborative, and integrated mindset
A compelling and multi-faceted vision with interconnected goals and outcomes
Continuous searching for new interests and perspectives
Numerous prototyping rounds that build upon each other
Learn through reflection and re-evaluation

Individually, some of these patterns may be found in linear design. However, the synergy of these practices is what constitutes a systemic design mindset. When we assume that objectives are ambiguous and contested, instead of clearly top-down defined, we can begin to tackle complicated challenges.

Of course, systemic design cannot replace traditional linear thinking. Linear thinking will always be the most efficient way to solve a well-framed logical problem. There is much value in our sequential and repeatable processes that have been refined over time. They are invaluable when the tasks at hand are clearly-defined. However, when the challenges are ambiguous and complicated, a systemic design approach will encourage insight and flexibility. It can harness diversity to generate value and innovation which wouldn’t otherwise be possible. Adopting a systemic design mindset can be challenging at first, but it becomes much easier through practice.

At BHW, many of the projects that we work are complex. They have multiple goals and span long timelines. In addition, unexpected roadblocks can occur along the way as we design and develop our solutions. We recognize the value of a systemic design approach as we think through how we can create the best solutions.

Because global innovation is rapidly increasing, almost all development projects are complex and intricate. This isn’t a daunting fact - it’s an exciting one. Our team loves to work on interesting projects that help drive our world forward. If you’d like to talk about how we can apply a systemic design approach to your idea, please contact us.

Interning at One of Austin’s Best Places to Work

Mon, 22 Jul 2019 00:00:00 +0000

Over the years, The BHW Group has created a close-knit culture that engages our team. We’re delighted that for the fourth year in a row, The BHW Group has been selected as one of Austin Business Journal’s Best Places to Work. This award reflects our company’s steadfast commitment towards shaping the best workplace environment while creating innovative and powerful applications. As a summer intern at BHW, I have loved working here and getting to know the whole team. Through this blog post, I hope to provide my perspective on what it’s like interning at one of Austin’s best places to work.

For most interns, the first week of an internship is usually a frantic catch-up game of putting names to faces and familiarizing oneself with company technology and processes. What are you supposed to wear? How often should you ask your manager a question? Is that 12-pack of Coke Zero in the fridge for general use?

These were the questions running through my mind as I prepared for my first day. BHW has flexible working hours for its employees, so I didn’t have to suffer through the 8 a.m. morning traffic. Instead, I enjoyed some breakfast tacos before I showed up at the office. I was greeted by Paul and BHW’s CEO, Brett Burnett. They gave us a tour around the office before telling us the first priority of the day: ordering lunch.

That’s the first big perk at BHW: free food. The company provides lunch and snacks, and our team jokes that new hires all gain “The BHW 15”. Each day, we choose meals from a variety of restaurants (today I had spicy pork noodles and dumplings, while my coworker had chicken tacos and wings). The kitchen is stocked with Clif Bars, pistachios, and way too many cans of V8. Don’t see something you like? No problem - we restock our snack supply every two weeks. As long as your choice is in stock online, you can order anything you want.

As my fellow interns and I munched on snacks and looked around the office, we noticed a pile of pillows and blankets. People would use these “Cozy Corners” to curl up on the floor and work if they got tired of their desk. I resolved to dig my trampoline chair out of my closet and bring it the next day.

After we filled out the paperwork, the other interns and I spent a while exploring the workspace’s Slack channels (#pet-pictures, #hiphop101, and #lightbulbtalk, to name a few). We talked about our backgrounds (Them: Computer Science, Me: Business and Liberal Arts) and discussed how excited we were to be here and meet everyone.

The past months have truly proven that meeting everyone is the best part of the experience. Beyond the standing desks and whiteboard walls, what makes BHW such an amazing place to work is the people. It’s an old cliche, but I first realized its truth as I anticipated our first intern event: a bowling night. BHW was throwing the event to welcome the new intern class and the start of summer. I was no bowling aficionado, but I was looking forward to have fun with everyone outside of the office.

We had the lanes booked until 10pm. Originally, I wondered if we would use up all that time, but as we began to bowl and talk, the time flew by. Every time I bowled (and there were more gutter balls than not), I came back to high-fives and cheers. Within a few minutes of meeting one of the developers, I was invited to go bouldering with some of the team over the weekend. Another developer talked about how we had to get stand-up comedy nights going again, now that the interns were here. I realized that the people at BHW were a true team - they relied on each other, inspired each other, and were genuinely interested in forming relationships with each other.

Since coming here, I’ve been able to work with freedom on my projects, bond with the team, and enjoy all of BHW’s office perks. Everyone here is willing to lend a hand or an ear, and we are continuously working to improve our talents. The people here are not only passionate about what they do - they’re also passionate about the people around them. BHW has grown rapidly over the past years, and it is continuing to do so, but it has always remained a very special place to work. I feel lucky to be interning at one of Austin’s best places to work, and I’m more than excited for our next game night!

If you’re interested in learning more or joining our team, head over to our careers page for more information.

Cheers!

BHW Selected As The Top App Developer in Austin, Texas for 2018

Mon, 09 Jul 2018 00:00:00 +0000

We are extremely proud to announce that we have been named the top app development agency in Austin for 2018 by Clutch. Clutch is a highly authoritative B2B ratings and review platform that includes over 7,000 firms from around the world. In granting this distinction to BHW, they evaluated and ranked over sixty different development companies in Austin. Their evaluation factors in each company’s reviews, market presence, and project portfolios.

In addition to being selected as the top app development firm in Austin, we were also selected as one of the top Android app developers, iPhone app developers, user experience designers, and digital design agencies in Austin. BHW achieved these awards thanks to our thirteen year track record of delivering highly polished, profitable, and performant solutions. Our numerous multi-year and multi-project client relationships further affirms this great distinction.

Our Clutch profile boasts thirteen five-star reviews. Here are some of the top comments left by our clients:

"Agencies that I've worked with in the past oversold the quality of their services, but BHW consistently follows through on their promises."
-Project Manager, Agrarian Labs, LLC

"The BHW Group's leadership and talented developers separate them from the competition. Our company is challenging and fast-paced, always pushing the limit of what can be achieved. Most vendors cannot maintain that pace."
-Lead Developer, Business Services Company

"They're thought leaders and experts when it comes to the React Native space...BHW's work has dramatically improved the performance of our previous mobile app offering. App loading times [were improved by 75%] and [the new app] has brought engagement up from an average of three minutes to five minutes, while increasing page views from eight to about twelve per session"
-Co-Founder, Visit Widget LLC

"I know it's not true, but BHW gave me the feeling that my project was the only one that they were working on. The team is professional and dedicated, and they were always available to discuss the project."
-Product Owner, QSR

"The BHW Group takes on large projects and runs with them. All requests were completed within the agreed upon timeframes. They are always available if the internal staff has questions about the way something works. The end results are always excellent... I have never worked with a more reliable, trustworthy development partner."
-Application Development Manager, AANP

"I’ve worked with about a dozen outside contractors and BHW has their act together and makes things easy."
-CTO, Docket Navigator

In addition to this award, we were also recently ranked in the top 100 mobile app development companies in the world by The Manifest, a business news website and sister website of Clutch.

We are very proud of these accomplishments, but also know our best work is still yet to be done. We are working hard to consistently grow and improve. If you are interested in learning more about BHW and our recent work, check out our projects page.

If you are searching for a web app or mobile app development company for your next project, there is a pretty good chance BHW is the development agency you've been looking for! Contact us and see how BHW can help create your next big thing!

Mobile App Development Process

Mon, 05 Jun 2017 00:00:00 +0000

Each day, thousands of mobile apps are published to the Google Play and Apple App Stores. Some of these mobile apps are games, others are social networks, and many are ecommerce apps. All of these apps, if professionally built, should follow a similar mobile app development process. At BHW, we have built over 350 web and mobile apps. In this article, I will outline the strategy, design, and development processes we follow.

Each app is different and our methodologies are always evolving, but this is a fairly standard process when developing mobile apps. This mobile app development process typically includes idea, strategy, design, development, deployment, and post-launch phases.

Idea

As trite as it sounds, all great apps began as ideas. If you don’t have an app idea, the best place to start is to train yourself to always think of things in terms of problems and potential solutions. You want your brain to instinctively ask “Why do we do things this way?” or “Is there a better way to solve this problem?” If you can identify a problem or market inefficiency, you are half way to your idea!

The next thing to do is understand why this problem exists and think about why nobody else has made an app to solve this problem previously. Talk to others with this problem. Immerse yourself in the problem space as much as possible. Once you have a complete grasp of the problem, begin to evaluate how a mobile app could solve the problem.

This is where having some understanding of what mobile apps can do is extremely valuable. We are frequently asked, “Is this even possible?” Fortunately, the answer is often yes, but it is imperative that this answer is sound. You are about to invest a considerable amount of time and money into an app, so now is the time to challenge your idea’s validity and viability.

Strategy

Competition

Once you have an idea, you need to plan for your app’s success. One of the best places to start is by identifying your competition. See if any other apps serve a similar purpose and look for the following:

Number of installs - See if anyone is using these apps.
Ratings and reviews - See if people like these apps and what they like/dislike about them.
Company history - See how these apps have changed over time and what sort of challenges they faced along the way. Try to see what they did to grow their user base.

There are two main goals of this process. First, learn as much as you can for free. Making mistakes is time consuming, frustrating, and expensive. Often, you have to try a few approaches before getting it right. Why not save yourself a few iterations by learning lessons from your competitors? The second is to understand how hard it will be to compete in the marketplace. Are people hungry for a new solution? Is there some niche not being filled by the existing options? Understand what gaps exist and tailor your solution to meet them. If your idea is completely new, find other “first to market” apps and study how they educated consumers about their new product.

Monetization

Unless you just enjoy building apps for their own sake, you are probably hoping to make money on your mobile app. There are several methods of monetization that could work, including: in-app purchases, subscription payments, premium features, ad-revenue, selling user data, and traditional paid apps. To determine which is best for your app, look to see what the market expects to pay and how they expect to pay for similar services. You also need to consider at what point you begin monetizing your app. Far too many apps (particularly startups) skip this step and have a hard time later turning a profit.

Marketing

This step in the mobile app development process is all about identifying the biggest challenges you will face when marketing your app. Assuming you have a reliable app development and app design team, your biggest hurdles will likely be driving app adoption. There are thousands of beautiful and quite useful apps on the app stores that simply go unused. At this point you need to understand what your marketing budget and approach will be. In some cases (like internal-use apps or B2B apps) you might not even need marketing.

Road Map (MVP)

The final stage of the strategy process is defining your app’s roadmap. The goal of this process is to understand what your app could one day become and what it needs to be successful on day one. This day one version is often called your Minimum Viable Product (MVP). During this process, it can be helpful to write on a whiteboard all of the things you want your app to do. Then begin ranking these items by priority. Consider what your app's core functionality will be, what is needed to gain users, and what can be added later. If there are some features you think users might want, they are likely great candidates for later versions. As you gain users with your MVP, you can solicit feedback on what additional features are desired. App monitoring (covered later in this article) can also assist in this process.

User-Experience Design

Information Architecture

Information architecture is the process in which you decide what data and functionality needs to be presented within your app and how that data and functionality is organized. Typically, we begin this process by writing down a list of features we want the app to perform and a list of what needs to be displayed somewhere in the app. These are the basic building blocks with which we will build the wireframes.

Tools we use: Whiteboards and Pencil & paper

Wireframes

Next, we begin creating screens and assigning each functions and data. It is okay if some things live in multiple places, but you need to make sure each item has a home. This process often takes place on whiteboards or paper initially. You want to make changes here, rather than later in the process, because it is much cheaper to erase some marks than to rewrite code. Once you have several screens drawn up, begin considering your app’s workflows.

Tools we use: Whiteboards, Pencil & paper, balsamiq, and Sketch

Workflows

Workflows are the pathways users can travel within your app. Consider each of the things you want your users to be able to do and see how many clicks are needed to complete that action. Make sure each click is intuitive. If something takes a few clicks to accomplish, that might be fine, but it should not take a few clicks to perform common tasks. As you find problems with your workflows, update your wireframes and try again. Remember to run through all of your features in each iteration, just to make sure you did not increase the difficulty of one action in an attempt to improve another.

Tools we use: Whiteboards, Pencil & paper, Invision

Click-through models

Click-through models help you test your wireframes and workflows. They are basically a way to experience your wireframes on a phone for more realistic testing. For example, our clients simply receive a link, which when opened on their phone allows them to click through the wireframe. Although the app has no functionality at this point, they can click on each page in the app and begin testing the app’s navigation. As you find issues in this step, make changes with your wireframes and iterate until you are satisfied.

Tools we use: Invision

User-Interface Design

Style guides

Style guides are basically the building blocks of your app’s design. Having a sound style guide will help tremendously with your app’s usability. You don’t want your call to action button on one screen to be blue and at the bottom, but green and in the header on another screen. By having a consistent design language, users are more likely to be comfortable within your app.

There is a lot that goes into determining an app’s style guide. You need to consider who you are and who your customers will be. Is your app going to be used at night? Then maybe a dark theme will work best, as to not blind your users. Will it be used mostly by busy employees? Try to keep clutter to a minimum and get your main point across. An experienced designer or design team has a wide range of output and can deliver an app that is a great fit for you and your customers. The output of this phase is a set of colors, fonts, and widgets (buttons, forms, labels, etc.) that will be drawn from in the design of your app.

Rendered designs

Rendered design is the process of taking your wireframes and replacing the grayscale elements with elements from your style guide. There should be a rendered screen for each wireframe screen. Try to stay true to your style guide in this process, but you don’t have to be dogmatic about it. If you find yourself wanting a new or changed style, feel free to update or amend your style guides. Just make sure your design is consistent when this stage is complete.

Tools we use: Whiteboards, Pencil & paper, and Sketch

Rendered Click-through models

Once you have all your screens rendered, return to your click-through model application and test your app again. This is the step in the mobile app development process where you really want to take your time. Although a considerable amount of effort has already gone into the app, after this point changes can become increasingly costly. Think of this as reviewing a floor plan before your home’s concrete is poured. Fortunately, mobile app development is a bit more adaptive than construction, but thinking of it in these terms can be the most cost-effective.

Tools we use: Invision

Design-to-Development Handoff

After having put in so much effort into the form and function of your app, it is imperative that this vision is properly realized by your development team. It always amazes me how often this step in the mobile app development process goes poorly. Perhaps this is due to many organizations and agencies only providing design or development services or the sometimes combative relationship between designers and developers. Whatever the reason, I highly recommend finding a team that can provide both design and development services and can properly handle this step in the process.

Part of what helps ensure a smooth transition and exact implementation is the proper use of the available tools. We like using an application called Zeplin, which helps developers quickly grab style guides for the design. But, this is not foolproof. Zeppelin is a great tool, but sometimes its guides are not exact or not the best implementation (it can use explicit dimensions, rather than dynamic ones for example). In those situations, it is immensely beneficial if your developers can also use design applications (such as Sketch or Photoshop). The important thing here is that your team does not simply best guess at dimensions, hex values (colors), and positioning. Your design team put in tremendous effort to ensure things were properly aligned and positioned. Your development team’s goal should always be a pixel-perfect implementation.

Tools we use: Zeplin

High-level Technical Design (Tech Stack)

There are numerous approaches, technologies, and programming languages that can be used to build a mobile app, each with its own strengths and shortcomings. Some might be cheaper to use, but are less performant, whereas others might take longer to implement and be overkill. The worst possibility is building on a dying or unreliable technology stack. If you make this mistake, you might have to rebuild your app or pay a premium for developers moving forward. That is why having a trusted development partner that is seasoned in making these decisions is vital in this process.

Front-end (the mobile app)

For front-end development, there are basically 3 approaches. They are platform-specific native, cross-platform native, and hybrid. Here is a brief overview of each approach and some articles that delve into each with greater details.

Platform-specific Native - Apps built with this approach are written separately for each mobile platform. Code can’t be reused between Android and iOS, but these apps can be fully optimized for each platform. The UI can look entirely native (so it will fit in with the OS) and the app should work fluidly. This is often the most expensive approach, but is very tried and tested.
Cross-platform Native - Apps built with this approach have some (or entirely shared) code, but still run natively. Common technologies used for this are React Native, Xamarin, and Native Script. This is a nice middle ground between the various approaches in that it is more cost-effective, but can still be optimized and styled for each platform.
Hybrid - Hybrid apps are built using web technologies (HTML, CSS, Javascript) and are installed via a native wrapper. This can be done using technologies such as Cordova, Phone Gap, and Ionic. This option can be the cheapest, but also presents some very real difficulties.

Back-end (Web API & Server)

The server is responsible for much of your app’s performance and scalability. The technologies used here are similar to those used to power web-based applications. Here are a few things you have to decide before writing code:

Language - There are dozens of languages that can be used to build your API. Common languages used are Java, C#, Go-lang, javascript, PHP, and Python. Most languages also have numerous frameworks that can be utilized.
Database - There are two main types of modern databases, SQL and noSQL. SQL is more traditional and the best choice in almost all cases. Common SQL implementations include MSSQL, MYSQL, and PostgreSQL. In addition to selecting a database engine, you have to design your particular database schema. Having reliable and well organized data is crucial to your long term success. So, make sure this is well thought out.
Hosting Environment (Infrastructure) - In this step you need to decide where and how your API and database will be hosted. Decisions made here will help determine the hosting costs, scalability, performance, and reliability of your application. Common hosting providers include Amazon AWS and Rackspace. Beyond picking a provider, you need to plan how your system will scale as your user base grows. Cloud-based solutions allow you to pay for resources as a utility and scale up and down as needed. They also help with database backups, server uptime, and operating system updates.

Development & Iteration

Sound mobile app development is an iterative process. You have likely heard the term “sprints” or “agile methodology”. This basically means that you break up all development work into smaller milestones and build your app in a series of cycles. Each cycle will include planning, development, testing, and review. There are entire books written on this process, so this article will just provide a brief overview of each step. If your company elects to use another process, these steps will be quite similar, but the order and length of each might vary.

Planning

The planning phase of a sprint involves dividing up the list of tasks to be implemented during the current iteration. Each task needs clearly defined requirements. Once these requirements are understood by developers, they will often estimate the time needed to complete each task, so that the tasks can be evenly distributed to ensure a balanced workload during the sprint.

Developers also begin planning their approach to solving their assigned problems during this phase. Skilled software developers find ways to intelligently reuse code throughout an application. This is especially important for implementing styles and shared functionality. If a design needs to be changed (believe me, something will change), you don’t want to have to go and update code in numerous places. Instead, well designed software can be changed in select places to make these sorts of sweeping changes.

Development

During the development phase your development team will begin implementing the styles and functionality of your app. As they are completed, they are assigned back to a project manager or QA tester for review. Good project managers are able to fully optimize developer workloads during this process by properly redistributing assignments throughout the sprint.

It is important that your development team fully understand the goals of the application as a whole and for the specific feature they are working on. Nobody is more in-tune with that particular feature than the assigned developer. They should understand the intent of the requirements. If something starts to not make sense, it is often developers who will be the first to let you know.

During development, we use a private beta platforms (Testflight for iOS and Google Play Beta for Android). These allow us to privately and securely distribute the in-development version of the app to testers, clients, and other developers. These platforms automatically notify users of new builds (so everyone is testing the latest & greatest), provides crash reporting, and can ensure only approved testers have access to your app. It is a great way to keep everyone up to speed on progress. During development, we try to update beta builds once or twice a week.

Testing

Most testing should be performed by non-developers or at least people who are not your app’s primary developer. This will help ensure a more genuine testing experience. There are several types of testing that should occur during each sprint. These typically include the following:

Functional Testing - Testing to ensure the feature works as described in the requirements. Usually, a QA team will have a test plan with a list of actions and the desired app behavior.
Usability Testing - Testing to ensure the feature is user-friendly and is as intuitive as possible. Often it is helpful to bring in new testers for a “first-use” experience during this step.
Performance Testing - Your app might work perfectly, but if it takes 20 seconds to display a simple list, nobody is going to use it. Performance testing is typically more important in later sprints, but keep an eye on the app’s responsiveness as you move along.
Fit and Finish Testing - Just because the design phase is completly passed, it doesn't mean you can lock your designers in a closet. Designers should review each feature and ensure that their vision was implemented as described in the design. This is another reason why having one agency for both design and development is so beneficial.
Regression Testing - Remember that one feature from the previous sprint? Don’t assume it still works, just because you tested it last month. Good QA teams will have a list of tests to perform at the end of each sprint, which will include tests from previous sprints.
Device-Specific Testing - There are tens of thousands of device and operating system combinations in the world. When testing, make sure you try out your app on numerous screen sizes and OS versions. There are tools that can help automate this, such as Google’s Firebase, but always test the app on at least a handful of physical devices.
User Acceptance Testing - This is testing performed by either the app owner or future app users. Remember who you are building this app for and get their feedback throughout the process. If a feature passes all the above tests, but fails this one, what use is it?

As problems are discovered in this phase, reassign tasks back to developers so that the problems can be resolved and the issues closed out. Once testing has been completed and each task is done, move on to review.

Review

At the end of each sprint talk with each of the stakeholders and determine how the sprint went. If there were difficulties, try to eliminate similar issues from future sprints. If things went well in one area, try to apply them elsewhere. No two projects are the exact same and everyone should always be advancing in their roles, so aim to improve while you iterate. Once review is complete, begin again with the planning phase and repeat this process until the app is done!

Extended Review

At this point your app should be fully testable and feature complete (at least for the MVP). Before you spend a sizable amount of time and money on marketing, take the time to test your app with a sample of your potential users. There are two main ways to go about this.

Focus Groups

Focus groups involve conducting an interview with a tester or group of testers who have never seen the app before and conduct an interview. You want to understand who these testers are, how they learn about new apps, and if they use similar apps already. Try to get some background info out of them before even getting into your product. Next, let your testers begin using your app. They should not be coached during this process. Instead, let them use the app as if they had just found it in the app store. See how they use the app, and look for common frustrations. After they are done using the app, get their feedback. Remember to not be too strongly guided by any one tester, but combine feedback and make intelligent decisions using all available feedback.

Beta Testing

In addition to, or instead of focus groups, you can do a beta launch of your app. Beta tests involve getting a group of testers to use your app in the real world. They use the app just as if it had launched, but in much smaller numbers. Often these beta testers will be power users, early adopters, and possibly your best customers. Make sure they feel valued and respected. Give them ample opportunities to provide feedback and let them know when and how you are changing the app. Also, beta testing is a great time to see how your app performs on various devices, locations, operating systems, and network conditions. It is imperative that you have sound crash reporting for this step. It does you no good if something goes wrong, but is not discovered and diagnosed.

Refinement

After these extended review periods, it is common to have a final development sprint to address any newly discovered issues. Continue beta testing during this process and ensure that your crash and issue reports are declining. Once you have the all-clear from your testers, it is time to begin preparing for deployment.

Deployment

There are two main components to deploying your mobile app into the world. The first involves deploying your web server (API) into a production environment that is scalable. The second is deploying your app to the Google Play Store and Apple App Store.

Web API (Server)

Most mobile apps require a server back-end to function. These web servers are responsible for transferring data to and from the app. If your server is overloaded or stops working, the app will stop working. Properly configured servers are scalable to meet your current and potential user base, while not being needlessly expensive. This is where the “cloud” comes in. If your server is deployed to a scalable environment (Amazon Web Services, RackSpace, etc.), then it should be able to better handle spikes in traffic. It is not terribly difficult to scale for most mobile apps, but you want to ensure your team knows what they are doing or your app could fall apart, just when it gets popular.

App Stores

Submitting your apps to the app stores is a moderately involved process. You need to make sure your apps are properly configured for release, fill out several forms for each store, submit screenshots and marketing materials, and write a description. Additionally, Apple manually reviews all apps submitted to their app store. It is possible they will request you make changes to your app to better comply with their regulations. Often, you can discuss these changes with Apple and get them to accept your app as-is. Other times, you might have to make changes to be granted entrance. Once your app is submitted, it will be live in Google later that day and in Apple within a few days, assuming everything goes smoothly.

Monitoring

It would be incredibly naive to think that the mobile app development process ends when the app is shipped. Go look at any even moderately popular apps and you will see a long history of app updates. These updates include fixes, performance improvements, changes, and new features. Thorough monitoring is essential to best understand what sort of updates are needed. Here are a few things you should be monitoring.

Crashes

There are numerous libraries that can be used to reliably track app crashes. These libraries include information about what the user was doing, what device they were on, and plenty of technical info that is crucial for your development team in resolving the problem. Apps can be configured to send an email/text/alert when crashes occur. These crashes can be viewed and triaged accordingly.

Tools we use: Sentry and Bugsnag

Analytics

Modern app analytics systems are a treasure trove of information. They can help you understand who is using your apps (age, gender, location, language, etc.) and how they are using it (time of day, time spent in app, screens viewed in app, etc.). Some even allow you to view heat maps of your app, so you know what buttons on each screen are clicked most often. These systems provide an invaluable glimpse into how your app is being used. Use this information to best understand where to invest future efforts. Don’t build onto portions of the app that are seldom utilized, but invest where there is action and the largest potential for growth.

Tools we use: Facebook Analytics, Apptentive, and Google Analytics

Performance

One vital metric not covered by the previous two monitoring categories is your app's technical performance, i.e. how quickly it works. Any system we deploy has extensive performance monitoring in place. We are able to track how many times an action occurred and how long that action took. We use this to find areas ripe for optimization. We also put alerts in place to let us know if a particular action is slower than expected, so we can quickly look to see if there are any issues. These performance tools typically have dash-boarding, reporting, and alerting functionality included.

Tools we use: Prometheus

App Store Management

App store ratings and reviews are extremely important, particularly for newer apps. Whenever a new review is left on your listing, make sure to engage the reviewer. Thank users who give you great reviews and try to assist those who were frustrated. I have seen hundreds of poor reviews changed to 5-stars just with a little customer service. Users don’t expect app developers and owners to provide a hands-on level of service and that help goes a long way in boosting your online reputation.

Further Iteration and Improvement

The purpose of all this monitoring is to know what you need to do next. Most apps are never really done. There are always new features that can be added and things that can be improved upon. It would be incredibly wasteful to blindly build on your app. Use the information you have received from your users and your monitoring platforms. Then repeat parts of this mobile app development process (don’t worry, many steps are much easier each after the first pass). Continue to improve your app, your conversion rates, your install base, and of course your revenue. Mobile apps are fluid. Take advantage of that by continuing to grow and improve.

Conclusion

The mobile app development process might seem overwhelming and involved. There are a lot of steps and difficult decision making is required along the way. But, it is an extremely rewarding process and can be quite lucrative. Also, there might be some temptation to skip steps in this process, but this guide is built upon years of experience working with app owners that chose to skip certain steps.

If you are looking to build your next (or first) mobile app and need help with one or more of these steps, you’re in luck! The BHW Group welcomes app owners at any stage in this process. Whether you are a startup or Fortune 50 company, we have the team and knowledge needed to deliver a fantastic mobile app. Please don’t hesitate to contact us today.

Best Places to Work Austin 2017

Sun, 14 May 2017 00:00:00 +0000

BHW is honored to have been selected as one of the best places to work in Austin for the second year in a row! We would like to thank our incredible team that makes BHW such a fantastic place to work. Each individual’s contributions to our welcoming office environment, laid back, but still passionate, culture, and general sense of community can’t be overstated. This is a fantastic honor and is something that we appreciate each day.

The past few years have been an extremely exciting and rewarding time for us. We have more than doubled in size, continue to strengthen our already superbly talented team, and expand our technical and design capabilities. Throughout this evolution, we strive to maintain a fantastic work environment and company culture. Continuing to grow and build beautiful apps remains our focus, but we can’t lose what makes this a very special place to work.

Thanks again to everyone at BHW for making this one of the best places to work in Austin.

If BHW seems like a fantastic place to work, that’s because it is. If you are interested in joining our quickly growing team, learn more about BHW and our application process on our careers page.

Mobile App Maintenance Costs

Mon, 16 Jan 2017 00:00:00 +0000

Mobile apps can be expensive to initially design and develop, but many app owners forget to consider the ongoing maintenance costs of mobile applications. These costs vary from app to app and can play a meaningful role in your app’s overall profitability. For that reason, you would be wise to carefully consider them before getting started.

These mobile app maintenance costs often include hosting, monitoring, continued engagement, marketing, app updates, and customer support. This article will provide an overview of each expense and provide some idea about the level of effort involved with each.

Hosting

Many mobile apps require a server which hosts the app’s API, database, and assets (such as images and videos). Most app developers choose to host these items in a cloud-based environment, such as Amazon Web Services (AWS) or Rackspace. App owners will pay monthly for these services based on the resources used. If your app supports video streaming or large file transfers to and from your sever, this could be a large expense. Additionally, as your user base grows, so too can this cost. Fortunately, this is a cost that your developer or development agency should be able to estimate with reasonable confidence before your project starts.

Monitoring

Most apps should have analytical monitoring that reports on what users are doing within your app. There are numerous free platforms that provide this service (such as Flurry Analytics, Facebook Analytics, or Google Analytics), but you will still need to invest time or money in monitoring these reports. This data is invaluable, so use it to inform future decisions.

Additionally, apps should have crash/error reporting and performance monitoring. There are also plenty of platforms that do this for free, but fixing and improving issues could incur additional costs. You might want to have someone on-call to respond to these alerts, particularly after app updates.

Engagement

Apps thrive when they have continuous engagement. Frequent app usage increases the likelihood of adding new customers and maintaining existing ones. Well-designed apps have methods of driving ongoing engagement. Some of this can be scripted into your app, so that it does not require continued work, but having dynamic content created by a real person engaging on your app can be hugely beneficial. This can take the form of fresh content, push notifications, emails, or special events. By ensuring there is always something new happening in your app, you give your customers a meaningful reason to return again and again. The cost of this effort can vary depending on the type of engagement. It might require some work from your developers or could be something your content creators can handle on their own.

Marketing

It is quite shocking how many app owners never fully consider the amount of marketing that is usually needed for a mobile app to succeed. Thousands of apps are released each day. It is naive to think that just because your app is wonderful, it will flourish. Unless you have an existing customer base or your app is for internal company use, you will need a marketing plan. The cost of marketing can vary tremendously, but this is often the largest ongoing expense for mobile apps. Marketing costs can include content creation (videos, animations, photography, and/or blogs) and ad buys (app store listings, search ads, TV, and/or radio). You will likely need an experienced marketing team to guide you through this process.

App Updates

Look at any app in the app store and you will find a list of app updates. These updates will include new features, changes, and bug fixes. No app is perfect in version 1, but thankfully the app stores provide a reliable method of publishing updates. Deploying updates typically takes an hour or so, but the majority of the cost of updating an is additional development time. This cost will be determined by how large the new features are or how involved the bug fixes might be.

Licenses

Some apps will be built with or entirely through licensed technologies. Many such apps will have annual fees or optional annual update fees. Make sure you understand how your app is being built and what the licensing arrangement looks like. You don’t want to be shocked by an unexpected bill and want to make sure you consider ongoing fees when deciding between various development options.

App Store Maintenance

Well run apps have well run app store listings. Our most successful clients do a fantastic job of quickly responding to user reviews. Thanking users for good reviews and answering questions can make already loyal and happy users feel appreciated. This can lead them to share your app with their friends. Responding to unhappy customers can actually convert bad reviews to good ones at a shockingly high rate. Customers appreciate when app owners go out of their way to solve issues and respond to feedback. This “maintenance cost” is typically not high, but is something that is definitely worth spending time on as your app grows.

Conclusion

Mobile app development does not end when your MVP is deployed to the app stores. Understanding and considering ongoing mobile app maintenance costs is essential in properly planning for your mobile app. With this understanding, wise app owners can more accurately plan for the initial and ongoing costs of their project. It would be a terrible mistake to spend all of your resources in the initial app development and not properly invest in the mobile app maintenance phases.

If you are an app owner who needs help understanding and planning for your mobile app maintenance costs, please feel free to reach out. We welcome apps at any phase and would be happy to answer any questions you might have.

Austin Mobile App Development Camp 2016

Thu, 08 Dec 2016 00:00:00 +0000

Austin Mobile App Development Camp - 2016 Wrap Up

We recently completed our first Mobile App Development Summer Camp and it was a great success! We hosted about 20 Austin-area (and even a couple from Houston) students at our 2-day interactive camp. During the camp, 7th-9th graders were able to learn directly from professional mobile app developers and designers. We discussed the processes and tools we use when creating apps and each group left with a completed click-through model of their own app!

For those that were unable to attend or would like to attend in the future, here is an overview of our camp (complete with app screenshots!).

The Process

App Ideas

All great mobile apps begin as ideas. Each group of students spent some time talking about apps they enjoy using and how apps help them on a daily basis. We explored what makes certain apps successful and others forgettable. Each student was able to pitch their app idea to their group and after a short vote, one idea was selected by each team.

Feature Brainstorming & Prioritization

Even once an idea is agreed to, there are hundreds of decisions yet to be made. How do we best achieve our stated goal? Do we think our customers will want to use our app this way or some other way?

During this phase, we wrote a long list of things our app could possibly do and why that feature is important. We then worked to consolidate and prioritize this list. It is important to know what all we would like our app to do in the future, but also what is achievable in an initial version.

Wire Framing

Once a feature list had been constructed, we worked to translate those goals to potential app screens. Teams used whiteboards to discuss possible screens and describe how they would all link together. During this process, we tried to frequently return to our problem statements and see if our users could easily perform the desired features in the proposed screens and workflows. This process involved thoughtful iteration and compromise. It is important to always return to your goals and priorities. They should dictate this process.

Brand Design

During the brand design process our teams thought about who they were and how they want to be perceived as well as who their users were and what would attract them. Some teams did demographic research on similar apps to understand what their potential customers look like. It can be extremely helpful to create a picture of a singular potential user. Then you can think about how that person or group of people would be most comfortable using your app. In the real world this could be improved with focus group testing, but for the camp we did the best we could.

App Design

The next step in our process was to take our wireframes and color them in with our brand design. Brand design should help identify fonts, colors, and language that can best communicate with your users. We used Sketch to take our wireframes from whiteboards to laptops. Sketch is a fairly simple, but extremely powerful tool that we use to design our mobile apps. Students took turns designing individual screens in the app.

Click-Through Prototypes

Once our initial rendered designs were completed, we used a tool called InVision to stitch these designs together to create a click-through model. Basically, we uploaded each screen as an image, then selected click areas on each screen, and set what screen should be viewed when that area is clicked. This allowed us to review your app (on our actual phones!) and see what it will be like to actually use. This is a great time to test your app out on a new group of potential users who you can ask to perform a few basic tasks and see if they are confused about your app’s navigation or workflow.

Iteration

Mobile app development demands analysis, review, and iteration. During each step in our process, and particularly after our click-through prototypes were completed, we worked to improve our products. It is important to listen to your users, all team members, and to always revisit the problem you are trying to solve. The worst thing you can do in this process is be directionless and overreact to feedback. Understand and consider all available data and make an informed decision that you believe betters your app. Then do that at least a dozen more times!

Demos

At this point, our camp was nearing its end. But, we had one extremely important and fun step left! Our office was teeming with parents, siblings, BHW developers, and campers as we prepared for our app demos. Some students elected to do informal introductions and presentations of their work and others did Apple-style keynotes about their revolutionary product. Had there been VCs in attendance, we very likely could have had the beginnings of the latest Austin startup!

The Results

We were extremely impressed by our campers! The ideas, the hard work, and the resulting app prototypes were all fantastic!

Here are some screenshots from the final apps:

App Icons

YOUniversity

YOUniversity allows highschool students to find the best univeristy for them! Just answer a few questions and we will match you with your perfect college!

Pokestats

Want to dominate your friends in PokemonGo? Use Pokestats to find the optimal pokemon for each battle!

Clever Closet

Have trouble keeping track of what clothes are dirty and clean? Are you a dirty teenager? Never clean your room? Hate laundry? We have an app for you!

Hacked Life

Hacked Life lets you learn the latest tricks that make your life simple! Start saving time today!

Wrapping Up!

We had a great time hosting our Mobile App Development Summer Camp! We would like to thank all of our fantastic campers and our BHW team that helped host the event. We are already planning our 2017 camp. If you or your student would like to attend, keep an eye on the camp page We will be posting our sign up form for next year in April.

Material UI Redesign

Tue, 01 Nov 2016 00:00:00 +0000

Bringing Material Design to Rush Enterprises, Inc.

Rush’s mobile repair order app is used by technicians working remotely on vehicles. The app allows technicians to track their time for each task performed, invoice replacement parts used, keep track of inspections, and send reports to customers. Our task was to bring clarity to Rush’s internal app using material design principles. In this redesign, we used our 4 step process to make the transition as smooth as possible.

Bringing Material Design to Rush Enterprises, Inc.

Material design is based off the “street smarts” of working with ink and paper. But beyond this, Google reinforces the simplicity of material design with a comprehensive set of guidelines (book smarts) detailing sensible ways to handle a deluge of use cases (found here) as well as hundreds of free resources and icons. There’s hints of skeuomorphism in the way layering mimics the behavior of paper, and elements on screen are animated with a charm that is reminiscent of ink doodles. Besides this, material design is a good bridge between skeuomorphism and flat design. It is simplistic and bold without too being too radical.

Why We Adapted Material Design

So, why did we choose to implement material design on this app in the first place? A few reasons:

Users had a hard time telling which parts of the app were active or not
Where there was visual hierarchy, colors were harsh on the eyes
The app was lacking a well founded brand connection to Rush

Back to the Drawing Board

Translating to a new design language can sometimes be a rocky experience, so we set up a solid 4 step process to make sure the transition was as smooth as possible. This process can be applied beyond translating to a new design language; we oftentimes follow a similar approach to the branding process.

Step 1: Reduce

The first question we ask is, “what are the essentials?” At this stage, it’s a good idea to break the app down to its most integral colors and brand elements. Anything extra, including standard icons, will be replaced with material design elements later in the process. Testing the existing app is a good idea at any stage in this process. If in doubt of what could be made more lean in the reduction step, gather outside feedback.

Step 2: Evaluate Existign Patterns

Next, we decide what user experience patterns will (or won’t) translate to the app’s new version. In this app, for example, we found that text fields could be better represented using material design principles. By doing this, there is no question which buttons/fields are active or not. At this stage, make notes of any user experience or user interface design trouble spots or red flags within the app.

When in doubt, test the app and gather feedback. The more feedback from a wider audience, the better. Red flags in an app show up when there are conflicts between what users think they can do and what the app developers intended the users to do.

Step 3: Research

After evaluating the app’s current assets and identifying red flags in the app’s UX and UI, we begin researching using quick hand-sketching techniques which we then verify using the material design guidelines. While the guidelines are comprehensive, they are not anchored rules. Trust your intuition if a use case falls outside the guidelines.   On this project, it was unclear how to handle groups of text fields, so we organized according to what made sense. The original design’s text fields were difficult to distinguish between actionable and not, so we implemented material design’s fields. Each section becomes highlighted when interacted with, and the difference between input title and field is clearer.

Step 4: Implement

Once we’ve consolidated the app to its essence, spotted any troubling areas of the app, and researched ways to fix those problems, we implement. Refer back to sketches and app feedback. It is sometimes necessary to make multiple passes in this process.

One of the main areas of concern in this project was making sure technicians could easily stop and start the timer (and tell when the clock was still running) on each job.

While there was visual hierarchy between currently running jobs and not, we took the overall design farther. We highlighted the running job in red, we dialed back some of the app’s colors to relieve the user’s eyes and, as mentioned above, we made it clearer that the text fields could be interacted with.

Wrapping it Up

From our experience, we’ve found material design to be a viable solution to UX and UI design problems. Having consolidated, evaluated, researched, and implemented these ideas time and time again without fail, we have found users to be more satisfied with their experiences. We strongly recommend using our 4 step process when translating to a new design language!

If you want to see more of this app, check out our project page. If you need some design help on your next mobile app, visit our mobile app design services page or contact us today!