The Design System: The Hero Your Brand Needs

The Design System: The Hero Your Brand Needs

The Case for Design Systems

 

Maybe you want to build a design system. Maybe you don’t. Maybe you have no idea what one is. Regardless of where you’re at on the scale, you need one.

Does your life depend on it? Well, no probably not. But does the success of your product or brand depend on it? Yes, it does!

 

What exactly is a Design System? 

 

How do we solve the world’s problems with one? Well, it may not save the world, but a design system will certainly save the day for your users, designers, developers, and anyone else interacting with your product. Simply put, a design system is a set of standards, or guidelines, on how things are to be implemented.

You may have heard of things like Brand Standards, or Style Guides, or Component Libraries, or even Pattern Libraries. In many ways, these things are all very similar, but a Design System is something larger, more all-encompassing, and may contain any or all of these.

A Design System is a roadmap for a brand, a company, a product, or perhaps all three if the situation calls for it. It outlines best practices and standards for everything from brand personality, to voice and tone, to visual specs.

The biggest benefit of having a Design System is consistency. Confusion plummets, and efficiency skyrockets when elements are repeated, predictable, and reliable. When designing for scale, consistency is crucial.

 

Multiple Teams

 

Working from a Design System means collaboration that makes sense. No longer does redundant communication need to eat away time. When multiple teams are coming together to work on a project, or maybe several projects in tandem, there are often numerous email chains that crop up.

“Do you have the current logo assets?” “What size is an H3 on Desktop?” “How often can we use contractions in a single paragraph?”
Often an answer requires digging through assets, or—in unfortunate but not uncommon circumstances—a wild guess.

A living, breathing Design System ends this nonsense by standing as a pillar of truth and consistency. It closes the loop of endlessly sifting through folders, and it means there’s no need to reinvent the wheel (and have it look slightly different every time).

 

Initiating New Team Members

 

When new members are brought in to a team, the task of bringing them up to speed can seem daunting. With a Design System, it doesn’t have to be. Having guidelines already established helps reduce the fear of mistakes. Instead of wondering if they’re doing things correctly, or whether or not “the ways things have always been done” is the way things should always be done, they have a point of reference to rely on.

A Design System makes it clear when to follow established methods and when to get creative.

 

Faster and More Efficient Implementation

 

A Design System makes the repetitive simple, and in turn, frees up bandwidth to focus on other issues. Simply put, make one input form and be done. Move on! Your brand and your business should be unique, but not every button and component in your product needs to be.

 

Getting Started

 

Right then, Design Systems are great; we all agree. Now, where in the world do we start?

 

Know Thy Audience

 

The first question to ask is “How far do you want to go?” Not all Design Systems are created equal, and that’s perfectly okay. Before jumping into the trenches of documentation, establish who this document is for.

Is it a visual guide to streamline workflow for your designers and developers? Are you hoping to encompass an entire brand or just a product? Do these standards apply company-wide, or only to specific teams?

Establishing these criteria from the start means content included will be limited to solely that which is relevant while taking into account topics that might otherwise be overlooked.

Holy Grail Design System Mantra: Include what’s necessary, forget the rest.

 

Set a Foundation, Then Start Building

 

It’s natural to want to jump right in with outlining specifications for colors and typography and logos and all that jazz. After all, these things are likely already established, so it seems like the perfect place to get started.

Before setting sail on this epic journey, though, we need to make the decisions all others will stem out of. This includes specifying things like core company ideals, values, and objectives. Having these from the beginning unifies the entire process because rather than asking, “Is this the best solution?” at every step, we can instead ask, “Does this solution achieve our core objectives?”.

Rather than trying to reach this vague, undefined level of perfection, decisions are kept focused and direct.

 

Dive Deep, But Know When to Stop

 

If you’re the type of person who finds the thought of being locked in a disorganized room, armed with a label maker therapeutic (I’m one of them), then you might be tempted to include every possible ounce of documentation in your Design System. I’m here to tell you to resist that urge.

Think back to the group of people who this is intended for. Do they really need to know the exact spacing values for every minute detail, or will a standard grid system work just as effectively? By making things as straightforward and consistent as possible, you increase the odds of your Design System being correctly implemented across the board.

Guidelines should be specific enough to keep everyone on the same path, but it shouldn’t be so burdened with details that it dictates their every step.

 

Let’s Wrap Things Up, Shall We?

 

Here at Shockoe, our Design system is named “Monster”, and that’s a pretty accurate description. Creating a Design System can sometimes feel like taming a wild beast, but I guarantee it will be worth it. Your designers will love you, your developers will thank you, your content writers will want to shake your hand, and above all, your customers will praise the rising level of quality within your products.

 

Hannah Kauffman

Hannah Kauffman

UX/UI Designer

Hannah is a UX/UI Designer with a passion for all things creative and a penchant for the whimsical. If she’s not at her desk designing the next rad app, she’s probably off painting, or drawing, or drafting her third novel! Fueled by an overactive imagination and copious amounts of tea, her goal is simple: elevating the human experience through tech.

The Future of React Native with Fabric

The Future of React Native with Fabric

 

The main criticism of any cross-platform mobile development framework is inevitable if small, loss of performance when juggling native elements and cross-platform elements; if your app calls to a device camera, Bluetooth, microphone, or otherwise, you are familiar with the loss of precious milliseconds. React Native is looking to dispel this criticism with its upcoming updates in Fabric and Turbo Modules.

 

What is React Native?

React Native Logo

What is React Native? React Native is the cross-platform framework built by Facebook for building apps for Apple, Android, and other devices in the future, and is used for apps today like Bloomberg, Walmart, Uber, and others. The React Native framework uses Javascript for building its Components and allows developers to call directly to native modules using Objective C and Java within its code.

 

With that kind of support, adoption, and ease of use, you would assume that they’ve solved the issue of performance, right? Not until now with Fabric and Turbo Modules.

 

What is the Problem?

 

Javascript is a performant language used all over the web, so this should be a simple problem to solve, right? Not quite. As Ram N from Facebook explained at the 2018 React Conference, React Native applications work currently by moving across 3 different layers: platform/UI, layout, and Javascript.

 

React native platform UI layout Javascript frame

 

In order to display Javascript on the platform, you need to pass it through a layout handler and React Native typically handles this in an asynchronous manner. This communication needs to be asynchronous due to the typical disparity of load: the UI layer usually does the least amount of work, where the Javascript layer is where business and product logic is handled. To make things worse, when moving between the layout and Javascript layers, information needs to be converted to serialized JSON and back again, causing extra effort to return the results from the Javascript layer.

 

React native platform UI layout Javascript JSON

 

In an example highlighted by Ram, a user could be scrolling through a long list of data points quickly, which is sending the onScroll event to the Javascript layer requesting more information for their user in an asynchronous method, usually. This is the critical point in a mobile app user experience that differentiates between a great app and a good app: the screen flickers, sputters and fails to load the content at the speed that the user needs it, and the user is taken out of their experience.

React native platform RAM Loading

 

How Do We Fix This?

 

Valentin Shergin, one of Facebook’s engineers depicted this problem in the below nightmare diagram, emphasizing that, by using these three layers, we’re stuck with repetitive calls across these layers and lost performance as a result (or, as he calls it, a non-flattened experience). This repetition causes inefficiencies in memory distribution across Javascript and native.

 

Javascript and Native without flattening and with flattening reach native

 

Using Turbo Modules

 

Here’s where Fabric and Turbo Modules come in.

 

Through a method Facebook is dubbed JSI or Javascript Interface, a unified lightweight API able to be used by any Javascript VM. React Native can focus on the conversation between Javascript and Java/Objective C, and emphasizes hosting objects and exposing methods/variables to Javascript. Javascript can avoid making the heavy calls of serialized JSON by referencing objects in JS rather than calling to them directly and focusing on calling native elements first.

 

Ram N explained this with a Camera module; here’s the module using the current method, where serialized JSON is being passed between the platform and Javascript to get the picture host object:

 

RAM N Camera module Javascript

 

Here’s a version using JSI where the picture host object is referenced rather than called/translated:

 

RAM N Camera module Javascript

 

Once the JSI has called the JSI host object, methods can be called on the object using Javascript, and returned values themselves can even be classified as host objects.

 

Using Fabric to Manage UI

 

React Native will be able to run certain heavier calls synchronously, prioritized over other UI elements, to return information quicker to reduce the chance of flickering by using their new UI Manager dubbed Fabric.

 

Per Valentin Shergin, an engineer at Facebook, Fabric focuses on the following top strategies:

  • Using C++ for cross-platform “shadow” layer (in place of the Layout layer above)
  • Immutable data structures (Shadow Trees, Props, Events)
  • Shared memory ownership (between JS and native)
  • Type-safe data structures
  • Opt-in synchronous execution where it benefits performance, the UI responsiveness and simplifying inherently-synchronous interop APIs.

With Fabric, you’ll be able to worry less about relying on non-performant asynchronous calls and can instead only make costly calls out to Javascript objects when absolutely necessary.

Ram N depicted the benefits of this new system with the following diagrams. In this initial diagram, you see the current method, where dotted lines represent an asynchronous call, blue boxes represent background processes, and green boxes represent the UI thread.

 

Ram N React Native initial diagram

 

Using Fabric, you can prioritize certain calls to be prioritized and sent synchronously, as shown in the onScroll event below. The user would receive the information they’re expecting while scrolling much faster since they don’t need to wait for an asynchronous call to be completed.

 

React Native New Way

 

Why Is This Exciting for React Native?

 

React Native is a widely used framework that allows businesses to streamline their cross-platform app dev, but, like any cross-platform development, the creeping annoyance of lacking performance with native modules is always a criticism brought up during discussions of which framework is best. With these changes, businesses can worry less about the optimization of their experiences and can know that they’re delivering an experience close to native.

 

When Can I Optimize My Apps?

 

Fabric and the use of Turbo Modules are still in development, but you can follow their progress via their Github thread. You can also find Ram N’s full talk from the 2018 React Conference here. In the meantime, check out our React Native white paper on how we can help you deliver your business value using React Native cross-platform dev.

 

Cameron Hall

Cameron Hall

Mobile Strategist

Cameron uses his experience in app and analytics strategy for healthcare, finance, government, and logistics apps with a focus on emerging technologies to deliver on customer-centric product development. When not devouring research on the latest and greatest, you can find Cameron hiking, playing soccer, reading a book, or continuing his education.

9 Design Features to Consider for an Event App

9 Design Features to Consider for an Event App

This year I had the privilege of designing two event apps for Richmond’s own rvatech. rvatech is a Richmond, Virginia based, member-driven technology association of businesses and organizations that serve to promote the region as a technology center and provide a vehicle for addressing the needs of Central Virginia’s dynamic technology community.

 

rvatech/Gala

 

Earlier this year in May, the Richmond Technology Council (rvatech) hosted their annual Gala event, where they celebrated the many breakthroughs, advancements, and technologists which are driving our technology-based economy. With significant growth each year, rvatech recognized that they needed to provide their members with an easy way to access and manage the event details, a way to network with other members, and promote rvatech as a brand. rvatech reached out to Shockoe and challenged us to come up with an intuitive app to meet these needs. We also had to keep in mind that the app would need the ability to grow with each event.

Rvatech requested the following for their Gala event app:

  •  Eventbrite Sign-in
  •  Event Details
  •  Links to Social Media
  •  List of Sponsors and Finalists
  •  Searchable Attendee List
  •  Connect on LinkedIn
  •  Searchable Map to Find Their Table
  •  User Profile

 

1. Environment 

 

As I dove into the designs, I received a lot of feedback that the app should have a white background, as it provided a clean look and is easier on the eyes for reading and scanning information, and all of that was true. My biggest concern was that this event would predominantly be dark, as it was an award ceremony with most of the lighting focused on the stage. In my mind, I was picturing 80 tables full of bright glowing white screens causing distractions during the event. I had some concerns with where the designs were going. I decided to meet with another designer who encouraged me to stand up for my ideas and voice my concerns. It worked. Using rvatech’s brand colors for the event, we went dark, using white only for navigation and text and I believe it worked better in the long run.

 

dark and white comparison richtech event app

 

2. Map

 

One of our biggest challenges was creating a searchable map of the event so members were able to find their table out of over 80 tables. Designing the actual map was the easy part, but designing the interactive portion of it was something that demanded a great deal of collaboration with the developers recreating it. This was also a wonderful learning experience as a designer to know what my limitations were considering the small window of time we had to complete the designs and development before we launched the product for the event.

Some things to consider for designing an event map, making sure users are able to identify where they are in relation to labeled landmarks, like a stage or the main entrance. Letting users know where restrooms are located is also something to consider.

 

rva-tech-map-brand

 

3. Networking

 

To bring networking in, rvatech requested that we have users sync their LinkedIn accounts with the app. This actually worked in our favor. When users synced their LinkedIn accounts it provided our searchable networking tab with their name, company they worked for, and career title from their account. It also populated the profile page we created with their profile image and career data from LinkedIn. We also provided an on/off switch for any users who did not want to share this information or if they didn’t have a LinkedIn account, for those instances we allotted users to manually enter their personal and career information. In addition, when users synced their LinkedIn accounts, when they selected the networking tab, they had the option to connect on LinkedIn.

rvatech-networking-connect-event-app

 

4. Event Schedule

 

The event details, sponsors, and finalists were designed as scrollable lists so users could keep track of the event and educate themselves about supportive technology-driven companies and technology leaders in the Central Virginia community.

Rvatech’s Gala event went off without a hitch. Users were delighted with being able to manage the schedule of events, network with their peers, and easily find their table by entering their company’s name. Shockoe was also honored with an award for a non-related app we created for ARROW electronics, one of the largest distributors in the world, where the lead developer of that project, Jay Soumphont, gave a moving speech about his work developing the app and working closely with the client.

 

Updating For a New Event


After designing the rvatech/Gala app I was asked to work on the rvatech/women’s app. This presented the opportunity to maintain consistency while redesigning a new look geared towards an entirely different event.

 

rvatech/Women

 

Rvatech/Women is Virginia’s premier conference on women in technology, hosted by the Richmond Technology Council’s WIT forum, bringing together professionals on a wide range of technology topics to learn, network, and collaborate.

Rvatech requested the following for their Women’s event:

  •  LinkedIn sign-in
  • Event Details
  • Biographies of Keynote Speakers
  • Workshop Descriptions
  • Links to Social Media
  • Searchable Map
  • Searchable Attendees
  • Connect on LinkedIn
  • Augmented Reality (AR) Featuring Designs From t-shirt Contest Winner
  • User Profile

For their October event, the rvatech/women’s conference, Shockoe had a firm foundation in place from our work on the Gala app, but little did I know how a simple color change would change everything. For this event, everything about the user interface (UI) had to be in the reverse from the Gala app. The app needed to be bright and visible, and easy to read and scan information. The women’s conference colors are light blue and purple, which are wonderful colors, but we didn’t want it to look like the Gala app at first glance, we wanted it to look like the rvatech/women’s conference app.

 

5. Accessibility

 

One of our initial challenges was meeting accessibility standards. At first, I was trying to swap the Gala’s dark purple background with Women’s light blue, but it failed WCGA standards miserably. While collaborating with another designer, they suggested keeping the light blue background but placing all the event details on white cards using black text. Brilliant problem-solving right? Not exactly. While the designs were clean and made the app stand out on its own, it was no longer the same app. It was an app with expandable cards based on the data that was being entered. We had provided estimates based on the fact that it was the same app, but now I was giving the developers a new app with new design behaviors that were nothing like the previous app.

Luckily our developers were able to adapt and problem solve these new features and recreate the designs without flaw. I was amazed at the networking tab, where users were able to scroll attendees by alphabet, with each alphabet being on its own card. And when users searched for a specific attendee it narrowed the cards to a single card for the letter they typed. It was beautiful, clean, and intuitive. I can’t thank the developers enough for their hard work.

 

women-in-tech-accessibility-event-app

 

6. Navigation

 

For the map features, we tried something a little different for the navigation. Since the only thing to search for was speakers and workshops, we decided to move the map access to a call to actions (CTA) button in a card associated with the workshops and the speakers, rather than having its own tab. We replaced the map tab with the speaker’s tab, where users could search for the speakers or workshops of their choice. In the search results, users had the option to view the speaker or workshop on the map, where the location would be highlighted in purple and users pinch to zoom in and out and scroll the map as necessary.

 

rvatech-women-in-tech-navigation-event-app

 

7. Solving a Problem

 

An app should always solve a problem. Since this event was primarily a series of keynote speakers and workshops we wanted users to be able to make sure they could manage their time with the topics that interested them most. With the schedule in place, we were able to give a user access to the speaker’s portrait, biography, and workshop details. With these details downloaded ahead of the event users were able to decide which speaker or workshop interested them most.

 

8. Immersive Media

 

The beauty of this beast emerged as an augmented reality (AR) experience we created with the help of our Immersive Media Director, Dan Cotting. Originally rvatech wanted to incorporate AR in the initial Gala app, but time was not on our side. But for the Women’s app, since we had most of the framework in place, and the designs and development stayed ahead of schedule, we had more than enough time to design and iterate a themed AR experience based on rvatech’s own t-shirt design contest. Dan suggested we use Facebook’s new AR Studio to save both time and money and give users access to the seemingly endless volume of AR featured. We were hesitant at first to use a 3rd party for the experience because we were concerned about sending users to another app, but users seemed to embrace the exciting feature and shared their selfies all over social media.

 

women-in-tech-rvatech-event-app-AR

 

9. Branding

 

For the rvatech conference apps, one of the most important goals was communicating the brand. Images, colors, font style, content, and designs leave a lasting impression. It is our job as designers to make sure it’s a positive impression we’re leaving.

For the Gala app, I used a draped red curtain in the background of the header to give a prestigious look. The Gala event has two brand colors. Their main color, a dark purple #0F0F2D, was used as the background of the entire app. Their other color, teal #189579, was used an accent color and design element throughout the app to provide contrast.

For the Women in Tech conference app, I replaced the standard default profile image of a human head outline with an outline of a woman’s head. Since this was predominantly a networking event I created a networking design in the main header. As I discussed before, we used their light blue #6BCCDB for the background, and purple #46479D was used for all CTA’s. In addition, I switched from 90º corners from the first app to subtle rounded edges for content cards, and circles for the scheduled events to match the theme of the networking header. These two apps may have similar frameworks, but they’ve been branded completely different.

 

rvatech-event-apps

 

We look forward to designing a new experience for rvatech’s next big event. Now we’ll be able to not only provide them with a unique experience with cutting-edge immersive technology, but we’ll be helping rvatech strengthen their brand name, improving their member’s brand loyalty with a customizable experience true to each event.

What does it take to build true loyalty through design? Our dynamic mobile solutions will invigorate how people engage with your brand. If you’re interested in learning more about other personalized solutions we’ve designed with the customer in mind, take a look at our latest examples of work here.

 

Jason Day

Jason Day

UX/UI Designer

Jason graduated from the Savannah College of Art and Design and holds degrees in Illustration and Sequential Art. His diverse professional careers have ranged from comic book artist, picture framer, retail store management, photographer, building inspector, and designer, demonstrating his ability to understand multiple facets of thinking and implementing them in intuitive ways.

Mobile Apps for the Supply Chain

Mobile Apps for the Supply Chain

Apps to Support the Supply Chain Workforce & Its Processes

While computing in the supply chain is nothing new, many of the existing systems and platforms are typically running on bulky and dated equipment, limiting the flexibility and efficiency of employees. This issue isn’t confined to one segment of the supply chain. Everyone from suppliers to retailers is often conducting day-to-day operations with outdated supply chain applications and hardware. With the ubiquity of mobile technology, introducing apps into the supply chain can be beneficial and seamless. Mobile supply chain apps can lead to improvements at every step, often in similar ways across segments. For example, inventory management apps allow suppliers to track their raw materials, manufacturers to decrease the time to manufacture and ship and retailers to more effectively track their stock. Companies frequently focus the majority of their mobile technology investment on consumer-facing apps, often at the expense of mobilizing their supply chain operations. Shockoe has partnered with several big box retailers, as their supply chain app developer, to create apps that support supply chain workforce and processes. The infographic, below, outlines examples of how these supply chain apps can support desired customer experiences by improving processes such as inventory management, production planning, material management, and resource planning processes, to name a few.  

Increasing Customer Loyalty

As a supply chain app developer, we work with our clients to help them gain insight into points along the supply chain that will benefit from mobile app investment in order to get customers their product faster, more efficiently, and more effectively. This leads to a better customer experience, which maximizes their existing investment in consumer-facing solutions and increases customer loyalty.

How Suppliers Benefit:

 

  • Accurate sourcing: track and distribute raw materials anytime, anywhere. Mobile apps connect manufacturers to the first step of the supply chain, the raw materials supplier.
  • Easier inventory control: inventory management with the tap of a finger. Warehouse management apps give you 24/7 control of inventory
  • Simplified logistics: order fulfillment that’s simple, intuitive, and on the go. Track the transit of materials from anywhere in the field.

How Manufacturers Benefit:

 

  • Faster production times: supply chain apps integrate with legacy systems to cut down on the overall production process, decreasing the time to manufacture and ship.
  • Recall/damage control: simplify field assessments and integrate data captured in the field from mobile apps with back office applications. The faster a customer complaint is resolved, the more likely customers are to become repeat customers.
  • Better final product: tighter quality control means better oversight. All of this amounts to a higher quality product.

How Distributors Benefit:

 

  • Improved warehouse management
  • Smarter communication
  • Increased “on-time” delivery

How Retailers Benefit:

 

  • Better stock management
  • More efficient front-line employees
  • Less shrinkage

How Consumers Benefit:

 

  • Faster shipments
  • Accurate order tracking
  • Great customer experience

Increase Your Bottom Line

Partnering with an experienced supply chain app developer to digitize the supply chain means organizations can have the best of both worlds by increasing efficiency to decrease costs and making sure customers become ambassadors for the brand, leading to repeat business and long-term revenue growth.

Apps for the Supply Chain

How to Align the Right Supply Chain App With Your Needs

How to Align the Right Supply Chain App With Your Needs

Prioritizing the strategic importance of technology that supports your supply chain is essential. Mobile Solutions are an integral and expanding component of the technology landscape that support all steps of the manufacturing process. Organizations that have mobilized solutions such as enterprise resource planning (ERP), enterprise asset management (EAM) or field service management (FSM), warehouse management system (WMS), Inventory Management System (IMS), etc. are more prepared tackle the overall digital transformation. By 2018, mobile has served as the key to unlocking the “supply chain digital transformation.” Shockoe is creating supply chain apps that are designed to support new production strategies, reduce time to manage and log resource and production activity, bring greater accuracy to tracking and analyzing data, and support the automation of production centers. Within the supply chain, more specifically warehouse management, manufacturing, and distribution, there are several opportunities for leveraging mobile in the workforce. In working with our clients, we believe the list below is the starting point for mobile solutions. These supply chain app options are aimed at supporting the overall manufacturing and sales process through an ecosystem of inventory apps, customer-facing apps, and order fulfillment apps. supply chain management diagram

Mobile Apps to Consider by Point in the Supply Chain

Planning & Production Apps

  • Managing parts and resource staffing requirements
  • Production workflow management
  • Inventory and asset management apps
  • Logistics and supply chain coordination

arrow supply chain app Production Planning Apps are not only used for the manufacturing business, but also across the entire supply chain.  Production planning apps allow users to manage the overall process in three primary ways:

  1. Augment your Production Planning System:  A Production planning solution is only the first step in transforming the planning process from a manual process based on spreadsheets to one based on integrated sales history-based forecasting and confirmed sales orders/release schedules, Mobile Apps allow your team to make real-time decisions based on information obtained through a Mobile App
  2. Managed Strained Resources:  What happens when you find out that there will be a 10 percent increase in demand next month but you have no idea if you’ve got the labor, warehouse space, or raw materials to fill these extra orders? What happens if your demand shifts mid-cycle? Master scheduling can be controlled via a computer, but why not get the insights to do it on your mobile app.
  1. Disconnected Plant Floor:  Errors mean waste, unhappy customers, and non-compliance. As your business grows, mobile becomes the only way to ensure your team can “be there”, on the plant floor, to know what’s going on at any given moment. Operators and Managers need to focus on the task at hand, not on managing issues.  Mobile Apps give Managers and Operators a complete view of the manufacturing operation that is available to the entire organization but on the shop floor.

Order Management & Accounting Apps

Mobile Apps that fall into this category include:

  • Order management apps, pricing, and fulfillment
  • Real-time quote generation

ac moore order management app There are two types of helpful applications that support the order management and accounting process.  Order Management and Fulfillment Apps will support users with:

  • Two-way transmission of orders, inventory, shipping, & Invoices
  • Track process of fulfillment orders real-time and close the fulfillment loop
  • Enable shippers to track order progress

Real-time quote generation also has some great benefits.

Order Fulfillment and Compliance Apps

Mobile Apps that fall into this category include:

  • Order status and delivery
  • Product traceability and quality
  • Logistics and supply chain apps
  • Machine level compliance and intelligence

arrow order fulfillment app Much like the production & planning stage, order fulfillment falls apart due to inefficient operations, a lack of integration, and a lack of inventory knowledge.  Mobile Apps can relieve the following key pain points experienced:

  1. Automate Entry for Order Fulfillment: We see our clients continue to use a manual process for order entry as their go-to option. This leads to all kinds of inaccuracies in the order, from the items needed to fulfill it, to where it is being sent. Mobile apps can equip operators with the equipment necessary to eliminate manual entry errors on things like product SKUs, quantity, and shipping addresses
  2. Resolve Inventory Inaccuracies & Inefficiencies‍: Having the right inventory is only half the challenge, operators need to know where it is and how to get to it.  Mobile is not the only solution for this, there are two things your team needs to do, (1) Make sure to have a floor layout that makes inventory visible first, from a Mobile Perspective, track inventory as it enters and leaves the warehouse in a centralized system, mobile apps enable employees to do this quickly and efficiently, real-time.
  3. Team Communication in Fulfillment: Miscommunication can cause shipping delays just as much as a disorganized warehouse. If the entire team isn’t on the same page and has no direct access to managers, too much time is spent “chasing” down the right person.  As a warehouse manager, you may have all the vendor information you need – but that won’t help your team unless you communicate the information that they need, with a supply chain app in hands, your team can be in constant communication.

When prioritizing and considering mobile supply chain solutions to support the manufacturing, administrative, and customer engagement process, Shockoe suggests using three key metrics to prioritize supply chain app development versus alternative mobile applications or the overall technology portfolio.

Reduce Manual Labor and Increase Productivity

Delivering a successful customer experience and subsequently driving more revenue requires mobile leadership and prioritization activities to go beyond the building of apps for customer-facing roles (i.e. Work Order Management or Sales). Back-office workers, technicians, and managers need mobile access to enterprise systems to better perform their jobs and service customers more efficiently. Think about creating a better mobile experience by integrating with ERP or WMS systems for, example, giving employees more freedom to do their jobs wherever and whenever. Critical features for a mobile supply chain functions are scheduling, measuring, and dispatching the workforce. Leveraging the mobile context for such, will allow organizations to accurately measure and improve the productivity of each individual. Which finally in turn will allow organizations to accurately measure and improve the productivity of each individual. Going beyond technology and mobility, an app that enables the workforce can also collect data essential to future planning. The organization can better analyze how much more work it can take on and whether there are enough people to support the forecasted workload.

Revenue

Historically speaking, revenue was only accounted for from a customer standpoint. Integrating new technologies to create a mobile supply chain allows monitoring and assessing revenue percentage at the process level. Being able to quickly obtain the percentage of revenue contribution at each step in the order to cash process is valuable information for real-time decision making and forecasting. Mobile solutions can track performance at each step which gives both locations with context. These values help indicate whether a measured process is underperforming or contributing significantly to the overall revenue. Whether it’s an investment in an asset management app or an inventory management app, whatever it is, a more granular overview of information through your processes can help target your areas of growth, need, and reward in the supply chain.

Automation

Automation, IOT, and Machine Learning are popular terms. What manufacturing companies really need to worry about and set goals for is the extent of the automation planned and how these emerging technologies can help. Once the business understands its goal, mobile solutions can embrace IoT devices to enable the desired automation. Allowing employees to monitor automated processes on mobile devices can decrease error rates, speed fulfillment processes, and ultimately settle cash faster. The continuing development and availability of newer and better technology imply that processes can be made to work faster, repetitive work can be automated, FTEs can be reduced, operations can be systemized, and customer handling can be improved. Tackling automation, IOT, or machine learning require a set of tough decisions:

  • To what level will I automate the process?
  • What aspects of the process will I automate?
  • What tools will my employees use to monitor and be alerted of the process?

The mobile supply chain is the next era of communication, collaboration, and responsiveness to the customer, driven by the ability to meet ever-more-stringent deadlines and delivery dates. Start from your key challenges and business objectives, use the right metrics to prioritize, and plan your journey for successful implementation of mobile, IoT and emerging technologies. Shockoe works in the supply chain to prioritize manufacturing apps and technology that support essential business processes. Mobile Solutions are at the forefront of all digital transformations and can support all areas of the manufacturing process. The right mobile app can help manage several areas of the manufacturing process and beyond.

Alejandro Otañez

Alejandro Otañez

COO

Alex has more than 10 years of international experience in Strategic IT Transformation and Custom App Development. His expertise in various industries ranges from Consumer Goods to Retail to Finance while assisting clients in the areas of Business Strategy & Development, Security & Compliance, and Technology Transformation. As one of Shockoe’s founding members, Alex is focused on business strategy, security & compliance, digital innovation, mobile management, and operational transformations.

Identifying Solutions with The Opportunity Tree

Identifying Solutions with The Opportunity Tree

At Shockoe, we often have prospective clients come to us with a defined idea of what features they want in their mobile app. But more often than not, as we get deeper into the Discovery phase, we uncover truths that make us question if those features are actually the right solution for the problem our client is trying to solve. By then, it may be too difficult for our client to pivot to a new solution, as it would require all new buy-in from their stakeholders. When clients lose sight of why a decision is made, and are far more concerned about the tactical aspect or flashiness of a feature — It’s important to keep the user’s need front and center throughout the process and keep an eye on the overall outcome or objective.

Recently a group of us from Shockoe attended the rvatech/Women conference, and participated in a variety of panels and break-out sessions, such as exploring diversity in the workplace, creating a culture of innovation, and inclusive design. One of the more hands-on workshops was presented by Jenn Atkins, Katie Moriarty, Amy O’Callaghan and Rob Huddleston of Snag, that led participants through the exercise of creating an Opportunity Tree.

The exercise began in a way that seemed very familiar…. our “stakeholder” asked our table (the product delivery team) a simple request– “I need a boat. I need it in 3 months, and I have one million dollars.” We then got to drawing a mock-up of that boat, without asking the stakeholder any questions. At my table, the drawings varied from a mega-yacht, a souped-up fishing vessel, and a solid gold boat paperweight. Snag UX Researcher Katie Moriarty then asked us, “how many of you clearly understood what the stakeholder needed?” And of course, none of us did. So how did we expect that any of our boats would be remotely close to solving the stakeholder’s problem?

1. Outcome

In the world of mobile app development, clients will call us with the same kind of request– although instead of a boat, they ask for features– “I need an app with touch ID.” But instead of turning around and putting that feature in a scope of work, we should ask “why.” Here Snag urges us to follow Toyota’s 5 Whys method developed as part of lean manufacturing:

Q: Why do you need an app that has touch ID?
A: Well, when I use my banking app, I really like that I can just log in with my fingerprint.

Q: Why do you like logging in with your fingerprint?
A: I always forget my password for all these apps, so when I can log in with my fingerprint it just saves me time.

Q: Why does it save you time?
A: I always want to have really secure passwords, so I keep making up different ones for each account that have different combinations of letters, characters, numbers, upper-case, lower-case, and the names of each one of my pets and children. I also never write the passwords down, so how am I supposed to find them quickly??!

Q: And why do you need to log in so quickly?
A: Because if I can’t log in, I always just give up and close the app. I don’t have the patience to go through a long process to reset my password. And I don’t want our users to give up without being able to use the app.

You get the basic idea. By interviewing the stakeholder or client and listening to their responses, you start to get a sense for the desired outcome. So in this case, the desired outcome is not “an app that does has touchID.” It instead is “To decrease user drop-off during log-in by giving users an easy and fast way to log in.”

The desired outcome now goes at the top of The Opportunity Tree.

2. Problems into Opportunities

The next step of the exercise is to start identifying problems so that you can invert them to create opportunities. In the workshop, we did this by interviewing our stakeholder, but this could also be achieved in user research as well. The interview questions were framed around the outcome, and the stakeholder’s feelings around it. “When you think about achieving “X”, what worries you the most? What problems do you see personally?” The group furiously detailed each problem on a sticky note, and then organized them at the end of the interview. Certain themes emerged quickly, and we were able to craft three problem statements that covered all of our stakeholder’s concerns.

Now using our app example, problems might include:

  • I can’t remember my password.
  • I hate when my spouse can’t log in under our account because he doesn’t know the password.
  • I want to be able to get into the app right when I need it — I don’t have time to go through a whole log-in process.

Problem statements are now inverted to become opportunities. Each opportunity is in the voice of the consumer. So the problems above might turn into:

3. Solutions

Finally, we arrive at the solutions, or in our case, features. We now can brainstorm individual solutions that can ladder up to each opportunity. In our exercise, we quickly narrowed down to 2-3 solutions per opportunity. This gives our stakeholders a way to look at potential solves and weigh the value to the consumer, against the cost of the effort, and decide what’s worth moving forward with. In our app example, by doing this exercise our client may decide that no secure information is in the app, so a full authentication process isn’t necessary. And for their consumers, it’s more important for them to get in and use the app quickly than to be logged in.

At the end of the workshop, when we looked back at our outlined solutions, Katie asked us again, “how many of you clearly understood what the stakeholder needed?” And this time, all of us raised our hands. We were confident that the solutions we landed on would meet our stakeholder’s needs, and achieve the desired outcome.

By using an exercise like The Opportunity Tree in the initial sales process, clients and mobile app developers can be sure that the solutions they will be developing and validating all lead back to the overall desired outcome, even before a Scope of Work is signed. This simple process allows us to get to the root of the problems we’re trying to solve when sometimes our clients have trouble identifying what those are. So that by the time the product is ready to be deployed, we can all be confident that we released the right set of features to deliver the most utility to consumers, and business value to our clients.

Rebecca Thompson

Rebecca Thompson

Project Manager

Rebecca has over 10 years of production and project management experience in advertising and tech. She has led numerous national multi-media campaigns including television, print, out-of-home, radio, digital, social, and PR events. Rebecca approaches project management with three goals in mind: to keep the process efficient, team members happy, and the work cutting-edge and award-winning.

Tips for Developing a Custom Application for Academic Research

Tips for Developing a Custom Application for Academic Research

Preface 

This post is about developing a custom application, V-Coach. This custom mobile app encompasses the development of meaningful digital feedback mechanisms, field testing among college music majors and their mentors, and progress assessment. V-Coach is a unique collaboration between Shockoe and a VCU Music Department researcher that advances technology-assisted arts training and injury prevention for musicians.

Let’s Dive In

I recently took on the development of a custom mobile application for Virginia Commonwealth University (VCU). VCU Music department was interested in building the V-Coach App, an iPad app that puts specific tools of deliberate practice and reflection into the hands of practicing violinists and violists. V-Coach is a pioneering digital arts technology designed to bring a healthier, more mindful, and more deliberate approach to musicians’ personal practice by allowing the musicians to self-regulate their practice habits.

VCU came to us with an idea to use mobile to assist in the training and improvement of student musicians. The app would encompass most of the latest tools and technology that mobile has to offer: AR, Video, Annotation, Motion Tracking, Data collection, and Audio. The goal of the application was to find a way to allow student musicians to track their violin learning goals, use interactive tools to improve practice and get statistical insight into practice behaviors. Many ideas were passed around, that in theory would work to meet these requirements. We put together the best strategy in place that would help VCU students and professors reach musical goals and now it was time to dive into the development.

As a mobile developer, more often than not you are developing applications that you have had the experience on a subject about and that the average person would understand how to use. Many of the features and UI elements may be decided prior by a project manager or a UX/UI designer, but the success of the application comes down to how well it is developed. Developing application well means understanding the subject and user needs so the app provides utility in moments of need and empowers the user. In the case of this app, I was in uncharted territory as a developer since practices and behaviors that musicians follow and expect were not second nature to me. As a developer, when you find yourself in this position remember to always go back to the basics of development.

Approaching the development of an application of any kind can be broken down with a few simple steps: research the subject, get to know your audience and test with expertise.
1. Research the subject:

Research, research, research, and more research. This step goes a long way in helping you more easily implement a solution that meets requirements. First, take a step back from your subject and narrow it down to the areas that present the most questions. For example, for the V-Coach app, we started with developing a tuner for our users. Instead of researching various tools musicians utilize to practice, we wanted to focus specifically on how a tuner works. How does it operate? What makes it useful? What separates one tuner from another? Compile questions during your research and set out to answer them. Use all the tools at your disposal (books, articles, interviews) to collect sources. Document your source to use as a reference during development. Research done upfront will help tremendously in these next few steps.

2. Get to know your audience:

Try to put yourself in their shoes. Using the research you compiled, start to form assumptions about how a typical user will interact with the application. Distinguish behaviors that beginners use, and compare those to how a professional would behave in the same scenario. Determine which group your app will tailor to by default, and allow room for tools you develop to be easily expanded and configured for future releases. For example, when developing the tuner, we noticed there was a distinct connection between the user and the visual representation of sharp and flat audio responses. The behavior of the in-tune descriptor or needle was very important. It needs to move consistently across the screen and remain steady as the user got more in-tune. Due to the quality of audio intake on some devices through the microphone, it became difficult to filter out background and instrument noise and provide an accurate experience. In this case, we developed our tuner to allow each and every value to be configurable. Therefore, during implementation testing, we could adjust and tweak these value to get it just right. Within these configurations, we applied a smoothing function to normalize our audio input and make the experience more consistent for the end user.

3. Test with expertise:

Now that we have researched our subject, and know our audience, we can develop this app with a better understanding of our users and product. We can use what we learned to start testing with expertise. As a developer, you will often be left to your own devices during the implementation phase. It is impossible to develop a great feature without testing at the same time. Thorough testing by the developer before passing a feature to QA will benefit you by having fewer tickets passed back due to a fail. For example, when testing our tuner, I had to learn how to tune and play a guitar. Not to the level of an expert exactly, but enough to produce results for testing. I needed to know each note, as well as how to audibly tell if I was in tune or out of tune. This way, I could translate expected behavior into actual results produced by the application. Working directly with the client can be beneficial to meet their requirements as well. Use them as a testing resource because they typically have the most background on the subject and audience you are developing the application for.

Following these simple steps can lead you down an easier path to tackling your next big mobile application project. These steps will help make the unknowns, known. For now, and true to the generative spirit of research, our team and I look forward to experimenting, breaking ground in a new field, and sharing lessons learned among colleagues and audiences in the tech sector. So go on, use what you have learned from this blog to make your next big idea a reality.

Notes from the editor

Our UX/UI team who closely worked with the development team on the V-Coach app has recently given a talk on designing this custom application. If you’re interested in how we approached the digital app design portion for this app, you can find the detailed event recap here.

Developing a tailored app that is better suited for musicians, draws attention to and provides solutions for remedying injury prevalence in the music industry, and has the potential to advance the hybridization of arts and technology. We at Shockoe, the mobile technology company engaged in this research, are equally excited about the potential, especially as it pertains to developing more applications to help the academic industry. Ready to have our team help you develop your custom app? Don’t be shy, reach out to us to find out what it takes to make your app happen.

Justin Boswell

Justin Boswell

Mobile Software Engineer

Justin is a Mobile Software Engineer with a specialization in iOS native development, but he enjoys creating frontend and backend solutions across a wide variety of platforms. When he is not spending his days getting Swifty, he enjoys hanging out with friends, playing soccer, and getting wins in online competitive games. He is a Computer Science graduate from Virginia Commonwealth University and was born and raised in the Richmond area.

Methods for Mobile App Testing Emulating Real-World Scenarios

Methods for Mobile App Testing Emulating Real-World Scenarios

If you’re a mobile app tester, you know that testing mobile apps is complicated. There’s a long checklist to keep track of, like considering the effects of various OS versions, design requirements on various device sizes, comparing the differences between Android and iOS – the list goes on and on.

Most companies have a scalable testing strategy, however, I’ve noticed a very important shortcoming that is often left forgotten – the environment in which we test. Mobile testers think testing is coherent simply by matching the test cases and installing a fresh app for each case, however, we are forgetting how the app would be used in everyday life. In my experience, nothing is more valuable than taking the time to go outside and use the app as a user would.

To make sure your app can handle anything in a real-world use case, there are quite a few questions you should be asking yourself while testing. Questions like ‘What is going to happen to the state of the app if the user gets a phone call?’, and ‘What if the user accidentally left the app open on the map screen overnight?’ are just the tip of the iceberg. To ensure that your application can truly handle any real-life scenarios, your team must start with goals and a purpose to track.

Read on for effective methods I make sure to highlight in my QA testing sessions:

Network Connection

What happens to the app when the network connection is compromised? Test cases to try:

  • Turn off Wi-Fi
  • Have the device only run on LTE/3G/4G
  • No Wi-Fi and no network connection
  • Location Services Disabled

Disruptions

What happens to the state of the app when it is interrupted by other applications? Disruptions to try:

  • Receiving phone calls
  • Receiving text message
  • Receiving push notifications from other apps
  • Facebook messenger sticky on Android
  • Alarm Clock / Full-screen interruptions
  • Open Siri/Bixby/Google Assistance/Mobile Device’s virtual assistant

Overnight testing

What happens to the app when the user forgets to turn it off? Test cases to try:

  • Put device to sleep and reopen the app
  • Background app, open another app, then reopen your app
  • Leave device untouched for (especially for things where the app uses a camera or map)
  • 10 minutes
  • 1 hour
  • Overnight

Biometrics

What if the user is using biometrics on the app? If an app requires biometrics for accessing secure data, ensure to test the following:

  • Touch ID
  • Face ID
  • Toggle biometrics on and off, see how the app handles it
  • Test on a device that does not have biometrics
  • Attempt to access data with invalid biometrics, find the limit to how many times a user can get it wrong

Testing these everyday scenarios is crucial to prevent bugs from making their way to your users. Go on a walk with your testing. Literally. Take your testing outside, you might be surprised by scenarios that were missed in development. These methods for mobile app testing will ensure that your application can handle anything that real-world users throw at it. Leave us a comment and share what you think!

Reach out to us if you’d like to talk about how we can help enable your QA and development strategies to test mobile apps faster and more efficiently.

 

Jay Soumphont

Jay Soumphont

Jay Soumphontphakdy is a Cross-Platform Mobile App developer who enjoys working in a transdisciplinary manner— collaborating and wearing hats between roles for design, development, and QA. He is dedicated to continuing his education to create high-quality user-friendly applications, recently becoming an ICAgile Certified Professional in Agile Testing and Test Automation.

How a Track and Trace System Can Optimize ROI (In 6 Steps)

How a Track and Trace System Can Optimize ROI (In 6 Steps)

In logistics, the visibility of your product in transit is essential to promote your brand’s reliability and capability. It is an expectation, not an added benefit, for a consumer to know where a product is and when they can expect it.

We’ve previously talked with you about supply chain management, and the strengths of your track and trace system can directly influence the available impact of your supply chain by increasing transparency around your products in transit; if you lose sight of your products between order and fulfillment, then delivery speed, loss prevention, and, most importantly, your revenue are data points needing to be gathered after the fact rather than real-time.

1. Decrease your computing footprint, Increase your mobility

Realizing the capacity of inventory and the effectiveness of your logistics infrastructure is not a function only needed in an office or in a space where a desktop computer can be present, it’s something you need on you all the time. With over 4 and a half billion smartphone users worldwide, a handheld computer that is low cost, scalable, and widely compatible is the ideal track and trace terminal. Reduce the cost of maintaining the hardware and peripherals of a desktop solution and by focusing on the devices currently used by employees, and equipment costs and the operational costs of training can be reduced drastically.

2. Visualize your products in transit

Understanding exactly where a delivery vehicle and associated shipment is at any point in time can help both distribution and client project payment and inventory, but to understand where the delivery vehicle needs GPS. While GPS in vehicles is typically reserved for luxury or premium vehicle packages, GPS in smartphone devices is an expectation in 2018. Avoid the additional cost to provide GPS for delivery resources, and rely on the GPS available from the phone of a driver. By adding the data provided by other smartphone and GPS users worldwide using the APIs of Google Maps, Bing Maps, and other affordable solutions, you can gain access to real-time traffic data to better analyze expectations around delivery.

3. Centralize your data and integrate legacy systems

Knowing the multitude of systems needed to manage inventory and resources, whether enterprise resource planning (ERP), enterprise asset management (EAM) field service management (FSM), warehouse management system (WMS), or inventory management system (IMS), there are often more individual interfaces available that can be managed by one person or one team. With a mature user experience informed by business goals, bring the data and interactivity of the systems housing your data into a simple and accessible mobile solution via APIs and integrations, reducing the need to rely on different interfaces and compatibility models. Bringing all of the data around your track and trace system together can help build comprehensive business intelligence reporting needed for your business, helping you build a clear, real-time understanding of your capacity in the palm of your hand.

4. Use machine learning to project costs and capacity

Historically, resource projection and calculation would require analytics software on a powerful desktop computer in the organization, and are susceptible to human error from manually maintained functions. With the strength of cloud computing in your hand, leverage complex AI and machine learning models to build accurate and informed projections based on historical, competitive, and real-time data to be able to make decisions for the future of your resources through services like Google’s Tensorflow and Microsoft’s Azure ML. The cost of intelligently anticipating the needs of your product are increasingly affordable, and the benefits are available from your phone.

5. Ditch peripherals. Scan and tag products from your smart device

To measure and manage your inventory quickly, less is more: less mobile terminals, barcode scanners, and extra peripherals needed to validate barcodes and identifying information to update inventory. With a mobile device, you can scan your barcode, look at a QR code using your smart glasses, detect RFID or NFC tags on boxes, or even have your phone recognize your product based on its appearance with machine learning. Your bank recognizes your check when you use mobile deposit, so why shouldn’t your track and trace system be able to understand a barrel of your material based on an OSHA label? Whether by using visual recognition software on the device or by checking a label against a library of images stored in the cloud, reduce the cost of managing inventory by focusing on your mobile device.

6. Start your mobile track and trace system with Shockoe

By leveraging the power and proliferation of mobile interactions, your track and trace system can be more visible and more all-encompassing to keep up with demand and to promote profitability real-time. In bringing your track and trace system to mobile, you elevate your business goals and realize your logistics footprint from your pocket.

For more on how we’ve helped our partners implement a successful track and trace system, read about our Drive app built for J.B. Hunt.

Cameron Hall

Cameron Hall

Mobile Strategist

Cameron uses his experience in app and analytics strategy for healthcare, finance, government, and logistics apps with a focus on emerging technologies to deliver on customer-centric product development. When not devouring research on the latest and greatest, you can find Cameron hiking, playing soccer, reading a book, or continuing his education.