Bio-Techne’s products are scientific and require the presentation of many data points to allow our users to make educated purchasing decisions. Instead of creating a mobile-first design, we needed to adapt our desktop content to work with mobile. Desktop-first is a tough ask, but we created the universal design system and pattern library for this specific purpose. After all, we weren’t just building a mobile eCommerce platform… we needed our software to work everywhere, on every device, in every country on the planet, with a consistent user experience. Let’s dive in with the first high-fidelity draft of our product search design.

This image represents my high-fidelity interpretation of the wireframes we created with our stakeholders, existing customers, and development team. I love design collaboration and working with my teammates to create a great user experience for each of our personas. I also love research. We spent a lot of time user testing these designs with one-to-one interviews, surveys, and comparing those results with our real-world data gathered through analytics. This is a basic first take–it lacks the evolution, polish, and consideration of the final design–but it excited our stakeholders and sparked even more creativity in our collaborative process. After a few more iterations, we had our final launch designs for the product search results and the associated features.

In this fifth iteration, you’ll notice many of the design system objects have been updated to their final assets including buttons, input fields, dropdowns, etc. Even still, this is just the aesthetic we used for the re-launch. If you visit the website now, you’ll notice even more improvements to the product search design. Updated iconography, new search filter designs, cleaner images, and more polish – nearly all of these improvements were based on suggestions from our customers. I love feedback, qualifying it with actual data, and using those suggestions to improve my designs.

I’ll leave you with one final thought about these designs: we worked very hard to ensure they were device independent. Hopefully, you noticed design inspiration from Material Design, Apple’s Human Interface Guidelines, Microsoft’s Fluent Design, and even some influence from Twitter’s Bootstrap framework. Most of these design systems have been vetted for a good user experience and accessibility, but some designs are certainly better than others. We pulled the best and most accessible designs from each system, tweaked them to satisfy our strict requirements, and developed a design system that feels at home on any platform. I hope to continue this trend in any role I take moving forward. A consistent user experience is my top desire for the software I create; a great design system and pattern library is the best way to ensure that for iOS, Android, or the web.

The post Reimagining eCommerce for iOS and Android appeared first on Neon Studio.

During our persona creation, we determined our internal customers were our primary accountability for this project. Since it wasn’t a sellable product, we needed to make their tasks more efficient, less stressful, and with fewer competing stimuli. I recently tasked our researchers with the creation of regular surveys to enhance our design and development communication with these stakeholders and VIPs. Unfortunately for our researchers, they didn’t have a budget for a survey platform subscription, and using most free platforms as a corporate entity is problematic. So, I asked the team if they’d like to use our upcoming “Fridays at Avaya” meeting to find a solution. On the last Friday of each month, I set aside time for my teams to work together on relatively random, startup-style projects that helped benefit our teammates. They were excited, and I encouraged them to find a few must-have features for survey platforms before the meeting. I, however, had every intention of using my WordPress expertise to quickly create an internal site to manage our user surveys – live, during our ideation session. I grabbed a few assets from the server ahead of time, created a WordPress instance on my laptop, and was ready to get started.

The Day of the Workshop

On a crisp Friday morning in February, I skated my way down the icy sidewalk, up the elevator, and into a conference room with my designers, product owner, and a few UX researchers. While enthusiastically drinking my coffee, I led the group through an icebreaker game: “Two Truths and a Lie” (with corporate-friendly restrictions). This group really seemed to enjoy the activity: some shared internal memes; others shared interesting personal stories, humorous and terrifying alike.

After a few minutes of guided ideation, we determined our goal for the meeting: “To find a survey solution that will allow us to introduce new software features to our VIPs and gather responses about the feature set, user flow, efficiencies of interactions, and overall layout of the re-designed software.” That’s it; we really weren’t looking to accomplish anything but that. Next, we determined the types of questions we’d like to ask our users and began creating survey content.

Side note: I didn’t let my team know my strategy ahead of time. I didn’t want it to influence the ideation process; I had already created bias by preparing a strategy for the workshop. We needed a fresh ideation session to ensure our surveys would collect user data that was truly useful to the development of our software. My free solution utilized WordPress and a multi-step, form creation tool… certainly not robust survey software. I had used the software enough to anticipate a match, but all solutions deserve a good vetting.

While my researchers led the question-writing portion of the session, I began replicating the team’s questions in WordPress. After we had five questions written for our first survey, I introduced my WordPress solution to the group. This sparked another round of ideation within the constraints of WordPress and lots of “Can we do this?” After 30 minutes of knowledge sharing, creative testing, and ideation, the team decided to move forward with the WordPress solution since it could be added to the other resources on our intranet and managed in-house. We spent the rest of the workshop collectively designing assets for our survey questions. Here is one of the questions we created during the session. The team was curious if they would find a pattern within the answers to the following question.

Question 4

Based on your feedback, we’ve added a separate toolbar in the bottom left corner of the main window (as highlighted in the image above). Considering the location of the toolbar, where would you expect these tools to appear when opened?

Wrapping Up

I wish I could share more about the ideation session, link to the survey site, share more screenshots or pictures, but given the sensitive nature of the work we did with customer strategies, I must respect my NDA. If you have any questions about my user experience research work, please get in touch. If you’d like to read more about the design choices we made referencing feedback from these surveys, check out this portfolio piece.

The post Fridays at Avaya – UX Research and Ideation appeared first on Neon Studio.

• A Focus on User Experience
• Responsive Content
• Header Redesign
• Main Menu Redesign and Restructuring
• Mobile Menu Design
• Slider Redesign
• Footer Redesign
• Retina Compatibility for High-resolution Displays
• Homepage Content Redesign
• eCommerce Search Tool Redesign
• Product Category Browser Redesign
• Responsive Product Comparison Tool
• Product Page Template Redesign
• Luminex Assay Tool Redesign

We tackled this in an Agile, Lean UX environment using sprint-ahead methodologies that ensured proper time for our designers to research, collaborate, and test individual designs before passing them to our development team. After our initial ideation sessions, we created wireframes for stakeholder approval. Next, my designers created high fidelity prototypes for stakeholder approval. In the before and after image below, you see our first prototype and the final prototype after accounting for stakeholder feedback and other design system iterations.

[twenty20 img1=”7789″ img2=”7787″ offset=”0.5″]

Then came the front-end developer handoff to build out the necessary template code using pre-existing objects in our atomic pattern library. Afterwards, the back-end developers provided functionality and pulled content from the database. Then, I personally checked each user story for proper translation from design to code. Lastly, the QA team completed their testing procedures before we marked the changes as ready for launch. Rinse and repeat for each story in the redesign. It was an awesomely-complex eCommerce project in which I thoroughly enjoyed leading the user experience. This is an over-simplification of the process, but I’ll leave it at that for now. If you would like more specifics on how we achieved this marvelous feat of modern engineering, I’m happy to share more over a cup of coffee. I’ve included a few more pictures of the process below, including a few showing our initial wireframes and the iteration process of our high-fidelity prototypes.

UX and eCommerce

My team successfully put the user first for this redesign. I encouraged my teammates to remove themselves from the conversation and think about the story from the perspective of our users. I constantly asked my team, “If what we’re doing isn’t making their path to purchase easier, why are we doing it?” That qualifying question saved us from days, maybe weeks of scope creep.

We did a full template rewrite to accommodate our newly responsive designs for the content of the website, but this was previously a static-templated eCommerce site… we had so much more to consider. R&D Systems (and its parent company Bio-Techne) may not be a household name, but they’re the biggest name in the antibody industry right now. They sell nearly everything in the antibody supply chain and often claim that their products will be used to cure cancer. The scope of their eCommerce catalog is tremendous.

Considering that, most of my time was spent researching, testing, and improving the user experience of their eCommerce catalog with a focus on converting sales. In our testing, we found that our customers were more likely to complete a sale when they didn’t have to scroll down to complete a purchase. This does not align with other industry research, but this shows the advantage of testing with your actual users. Many of our users are uninvested research students renewing stock levels for hundreds of items; they don’t want to see anything but the add-to-cart options so they can move to the next product on their list. Our customers enjoyed the newly-designed user flows so much that many of them decided to order more stock more often.

We also researched the UX of standard eCommerce considerations like search result organization, data architecture, product comparison, variated layouts, review optimization, and more. We studied the analytics and included real user testing to supplement the research we found for each feature requirement.

Shortly after launch, we observed a boost in our conversion rate and customer satisfaction. While most of us moved on to the next Bio-Techne subsidiary redesign, we still monitored analytics, user testing, stakeholder inquiries, and customer feedback to ensure the user experience was always improving.

I’ve included a gallery of the end results below, but you can always head over to the website and check it out for yourself: rndsystems.com.

As a final bonus, here’s a before and after of the R&D Systems homepage:

[twenty20 img1=”7168″ img2=”7167″ offset=”0.5″]

The post 500,000 Products and the UX of eCommerce appeared first on Neon Studio.

Over the last six months, my team and I worked on a design refresh with a heavy focus on usability and accessibility. A customer support team asked if the Avaya would accommodate their accessible team members — that request ultimately got me hired. AAfD 2.x was our opportunity to take all the good from 1.x and bring it into a user-centered environment.

Building a Design System for Avaya

We began by sharpening the team’s focus on UX and accessibility by utilizing design systems, pattern libraries, and style/branding guides. Defining these standards offered us the freedom to think creatively while staying inside a vetted user experience. With a design system, designers and developers could choose an existing pattern that satisfied the user stories without having to blaze a new trail. Our teams began building out our new designs with improved efficiency.

We referenced Material Design, Apple’s HIG, and Microsoft’s Fluent Design System during the creation process. The team also ensured these changes weren’t a radical departure from Avaya’s current aesthetic. This also allowed us to create something familiar, and entirely proprietary, all while accommodating the usability and accessibility mandate.

Creating Assets for the Design System

Buttons may not seem like an obvious place to start, but the majority of our interactions began with buttons. After buttons, we designed other controls, dropdowns, forms, menus, tables, lists, and more. Then came the layout of the main user interface. Before showing you the finished design, let’s look at some of these assets.

I’d like to highlight the UX-friendly interface controls; I merged the best concepts from Google, Apple, and Microsoft into a simple take on modern UI controls. I also designed a “Combo Box” that meets all current accessibility standards. The combo box is mostly used by Microsoft and hasn’t yet been embraced in other design systems. It also doesn’t have a native HTML object for the web. Even still, I’m an advocate for the combo box because it gives the user more interactive freedom in less space.

The Final Designs – AAfD 2.x

After creating hundreds of assets, it was time to design window frames and start creating the user interface. While this was strictly a desktop app, our design system was platform-agnostic for future mobile updates. Here are the finished designs.

Discussing the Designs

Clean, simple, and modern… but we still needed it to feel similar to the original 1.x designs. We changed the layout and many of the interactions to accommodate the newly mandated accessibility requirements. Too many interactions in 1.x required users to navigate across the app to continue the workflow. In contrast, 2.x grouped many interactions and eliminated those that broke accessibility guidelines.

Call appearances are the perfect example of grouping interactions. In the 1.x designs, starting a call, dialing, and the controls were far from each other. Now, all those interactions live inside the same card; users move a few pixels not inches. Because of those improvements, our users move the mouse less — saving them time and the company money.

In the new UI, we have the menu and status at the top and the call appearances in cards below. There are detachable tools in the bottom left, and audio controls in the bottom right. The tools were designed to be reactive. If you open a single tool, it docks at the bottom of the main window in a full-width layout. Open a second tool, and it will split them 50/50 unless you drag and drop it otherwise. Each tool renders as 1, 2, or 3 columns; they also detach or undock as a separate window entirely.

Wrapping Up

With UX at the center of every conversation, my devs started looking for the right solutions instead of the easy ones. Once you embrace UX, it’s impossible to banish it back to the fiery chasm whence it came. I shouldn’t imply that the user experience is “The Ring,” but let’s roll with it. It consumes you with jealousy for great interactions and makes you feel safe when you’re in its presence. Too much? Probably, I’ll see myself out.

Before I go, allow me to leave you with a before and after shot of AAfD so you can compare the work we did on 2.x with 1.x. It was certainly a fun and challenging project.

The post Simplifying Design and Development for Avaya appeared first on Neon Studio.

For years, designers relied on style guides so their developers could build UI elements that looked the same in every template. Developers waste a lot of time referencing the style guide to ensure their UI elements match the design. What if we could eliminate that process entirely? Enter: Atomic Design. Originally conceived by Brad Frost, Atomic Design separates your software into tiered UI elements: atoms, molecules, organisms, templates, and pages. At a rudimentary level, it’s like building software with Legos — there are thousands of pieces with specific dimensions that, when assembled correctly, make an object. Further still, using those modular components allows you to assemble the object the same way every time. As a designer, developer, or stakeholder, you don’t need to manufacture the Legos, you just put them together.

Using an atomic pattern library as the source of truth for your development process not only allows for rapid development, it also ensures a better user experience for new projects. Assuming you’ve user tested the UI elements in your library, you can include them in your new project without worrying about the usability of the interactions they create. If you find yourself needing a new UI element, your user experience designers can research the best implementation of that element and put it in the library for use in your new project and every future project after that. If that’s not enough to convince you atomic design is the future, let’s talk about a real-world implementation of this philosophy.

When I was hired at Bio-Techne, they didn’t have a streamlined development process, let alone a pattern library or even a website style guide. The best they could offer me was a branding style guide from corporate headquarters (basically just colors and fonts). They recently adopted the agile development approach but relied on their stakeholders for design feedback. I consider that a cardinal sin of design. I love NN/g’s mantra: you are not the user. A stakeholder cannot possibly define the design for a project without introducing bias. Stakeholders should be available for general, product-specific guidance, but the user experience team should define the design based on their knowledge of standard UI elements, interactions, and actual user testing results. That data, rooted in empathy, will always result in a better user experience.

Before moving forward at Bio-Techne, I had to define our overall design and development strategy. Since I wanted consistency and efficiency, we decided to work towards an atomic pattern library. The ultimate goal was to create a single source of truth for all design and development assets. It’s even possible to integrate your code-based pattern library with certain prototyping tools to keep the designers on the same page as the developers. It’s certainly complicated to get everything configured and communicating properly, but once you do, it’s an amazing way to do more work in less time. It also ensures a better user experience for every interface you build.

The post Design Systems, Pattern Libraries, a UX Perspective appeared first on Neon Studio.

[twenty20 img1=”7150″ img2=”7149″ offset=”0.5″]

Overall Design Aesthetic

I didn’t have complete design freedom for this project; it was my first project for Bio-Techne, after all. While some of my inspiration came from the existing company websites, I also referenced standardized design concepts based on popular guidelines like Material Design. Ultimately, our stakeholders asked for something clean and “science-y” — that’s certainly a starting point, but I added modern, simple, and usable to the list as well. Since the Tocris design would slowly roll out to our other Bio-Techne websites, I needed buy-in from stakeholders across the company. It sounds daunting, but when your role defines the design standards for a company that previously had none (and you’re good at it), you’ll find your stakeholders ready and willing to get on board.

Everything we did for this project became the foundation for the next three website projects at Bio-Techne. I’ll cover the unique aspects of those website projects in future portfolio pieces. For now, I need to stick with high-level concepts. We put an incredible amount of time into researching and user testing every aspect of this redesign… I would have to write a book to convey the care given to this project. Bio-Techne is a billion-dollar company, so we took it slow and made sure we did everything right while maintaining the philosophy of rapid development and iterative design in an agile environment.

Header Redesign

The new header for the website includes the Bio-Techne brands bar, the individual company logo, a large search field, cart information, account access, the internationalization tool, and the main menu… phew! Since I couldn’t convince the marketing department to update or replace the brands with a better design, I did my best to make it fit the new design direction. First, we replaced all the brands bar assets with retina-compatible images, flattened the images, and adjusted the colors. Then we re-built the code to make it responsive with adjustments for each Bootstrap desktop breakpoint. After finishing the brands bar, we started putting the other necessary elements into place and removed unnecessary items like social links.

I believe a good user experience dictates a clean and usable interface that offers users the same interactions on every device. Unfortunately, the marketing department chose to hide the brands bar on mobile (we adapted everything else). While it breaks my UX philosophy, it’s better to hide it than to clutter the mobile interface. If it were up to me, I would have done cross-site promotional content elsewhere on the site instead of relying on a massive gray bar in the header. C’est la vie.

Homepage Redesign

The team redesigned the homepage from the ground up as a CMS page. We worked with the marketing team to implement a new page featuring a large rotating content slider, targeted box-links to showcase products, category tiles, and other information. We accomplished all this while ensuring the design translates well from the largest desktops to the smallest mobile devices. Tiles would eventually become an integral component of our new global design styles as they create a content-rich, easily-consumable design with calls-to-action that offer the customer a way to quickly scan what’s new.

Tocris also had a bad habit of using long lists of bulleted text links. If you think about it, that design gives mobile users an extremely small touch target (in this case, 14px) to click the correct link. This is woefully insufficient. Apple’s iPhone Human Interface Guidelines suggest a minimum touch target of 44px. I find it annoying that Apple stopped following their own recommendations, but I was certainly going to fix that problem for Tocris. Instead of bulleted text links, we created linked image tiles with a title and the option for a brief description. These tile elements became a massive part of the global redesign and tested extremely well during user testing. In scenarios where we didn’t want images replacing bulleted links, we moved to a wider button style that improved our touch targets to 35px. While that’s not the recommended 44px, it was a tremendous improvement for mobile without hurting the desktop experience.

Main Menu Redesign

We completely redesigned the main menu to provide a clean user experience that includes a mega menu for the main product categories, the ability to highlight newly updated product categories with brightly-colored tags, and standard dropdown menus for non-mega sections of the menu. We also re-organized the top-level-menu content into new parent categories to simplify the overall link structure. Since the new menu items live in the CMS, our content managers could finally edit the menu as necessary without a code push. Lastly, we modified the default Bootstrap menu behavior to accept hover interactions to encourage discoverability within the menu content.

Mobile Menu Design

While we kept the design of the main menu on the desktop clean and simple, it’s still a very complicated link structure that includes several sub-layers. Upon first open, the mobile main menu shows the top-level-menu items with the ability to expand and hide the sub-level items for each. This takes a relatively complicated link structure and simplifies it for mobile in one of the most universally accepted user experiences available. Since we needed clickable top-level-menu items with sub-levels nested underneath, we added a large show/hide button to each top-level-menu item. We relied on color, border thickness, and positioning to illustrate the menu hierarchy. We did not rely solely on color because color is not an accessibility-friendly way to differentiate between objects. While there are obvious visual differences between the desktop and mobile menu layouts, it utilizes the same code for each layout and ensures familiarity in the user experience no matter what device you’re using.

Search Redesign

We scrutinized every element on the site from a responsive, mobile, and user-experience perspective. Search was one area that received significant attention. We researched filter styles, product comparison designs, organization by category, and filtering concepts to come up with the new search interface. Since search is the main way our users interact with our website, we focused the user flow on conversions. We show the users all the necessary information in a clean and organized layout (on desktop and mobile) so they can spend less time trying to figure out what they’re looking at and more time buying our products. Even our mobile users see the same simplified layout; there’s no difference in content between desktop and mobile.

Datasheet Redesign

One of the biggest challenges of a responsive design is organizing data-heavy content in a way that works for desktop and mobile layouts. We accomplished that with our datasheet redesign by creating organized sections that collapse as the screen becomes smaller without losing any of the valuable data. The mobile design specifically mirrors that of the desktop to ensure user recognizability no matter how they visit the Tocris website. Further still, we adapted every element to be simple, clean, and responsive so the smallest screens get the same user experience as larger desktops.

Footer Redesign

We created a new footer design that would eventually end up on all the redesigned Bio-Techne websites running this new global framework. Our stakeholders requested brand-specific links, support information, global branding links, and a social/connect section. We put each of those requests into their own column and added some color. Each footer column collapses vertically on smaller devices while retaining the same visual design. We also made the footer editable in the CMS so changes don’t require a code push. This was a significant improvement over the previous footers as they were crammed with unnecessary information and incredibly tiny text. Since implementing this design, user interactions with the footer content have dramatically increased.

Retina Compatibility for High-Resolution Displays

In addition to responsive design, we added retina image capabilities to the Tocris website to ensure our images look great on every device. Most modern devices (phones, tablets, and computers) ship with high-resolution displays that dynamically “pixel-double” images to make them sharper and clearer. Without this design addition, our images would appear pixelated on almost all mobile devices and even some computers. Click the Tocris image to see a basic example of the difference between non-retina images and a retina image. Not everyone can see the difference (it’s noticeable depending on your eyesight), but there’s a blurry quality to the top logo and crisper edges on the bottom. If you’re having trouble seeing the differences, check out the registered trademark symbol in the top right corner of each logo.

Everything Else

As I mentioned, I wanted to focus on high-level concepts for this portfolio project, but I still want you to be able to see everything else we accomplished during this redesign. Here’s a longer list of technical things we did to the website. If you have any questions about the list below, I’d love to discuss them with you. Give me a call or use the contact page to get in touch with me.

Improvements outside of code: Single SOLR Slice, Acquia Development Environment, Akamai ION Platform, and New Relic Monitoring.

Improvements to code: Shared Codebase, Worldwide Purchasing Capabilities, SOLR-Based Redirection, Geo-Location Technology, E-Commerce Analytics, Multiple ERP Capabilities, CMS Integrated SEO, Product-Level Caching, Search Boosting Capabilities, Fully-Integrated JSON-LD Schema Tagging, Product Reviews, Account Document Storage, Search Compare Tool, Content Translation, Search Term Replace Capabilities, Search Advertisements, and Site unit testing.

Wrapping Up

Leading the Tocris redesign was challenging and fun for me because I needed to organize a massive amount of data into a clean and usable interface. While I didn’t re-invent the wheel with this project, I designed and built everything from scratch to deliver an excellent user experience to our customers. As with all projects, we translated incoming feedback into improvements to our global design standards to further improve the user experience. Tocris has grown tremendously since the redesign and will continue to do so as we continue our design, build, test, and iterate philosophy.

The post Modernizing Tocris Bioscience with a UX Focus appeared first on Neon Studio.

It seems like the design industry gets a new prototyping tool every month, but there are some obvious front-runners that get the most attention. Does that mean those tools are better than the rest? Does the tool you use actually matter? Note: this article is quite old; newer options are available. We’ll write an update in the future. In the meantime, check out this site for useful information on prototyping tools. There are many factors that play into the selection of a prototyping tool, one of the most important is popularity. To remain competitive in the design world, you should stay familiar with the bigger players: Adobe Xd, Sketch, etc. That said, let’s dive into the factors we considered for our team.

• OS compatibility
• Price
• Ease of use
• Interactive / live prototyping with app support
• Responsive prototyping
• Wireframing and high-fidelity options
• UI Kits, pattern libraries, and design resources
• Stakeholder sharing features
• Designer collaboration
• Version control
• Developer Exports

OS Compatibility

Obviously, the first factor to consider when choosing a prototyping tool for designers is the OS compatibility. It’s not likely that your team is going to buy new devices to use a design tool. If you’re in an all-Mac environment, you can use anything you want. If you’re in a mixed environment, or all-PC, you have fewer options. Many of the tools that push the boundaries of prototyping are Mac-only. Since our team is all-PC (sad, I know), we had to stick with prototyping options that were cross-platform. While it certainly limits our choices, it doesn’t mean we’re any less capable of doing our jobs. I also need to mention web-based prototyping tools: I wouldn’t use them at this point. If you’re reading this article, you probably need more robust solutions than what a web-based tool can provide.

Pricing

Does pricing need an entire paragraph? Probably not, so here’s a quick guide. Pricing varies widely; most of these apps require a subscription. Expect to pay a minimum of $20 per month, per user. The obvious winner here is Adobe Xd as it includes the entire suite of applications with your subscription.

Design Efficiency

Design efficiency is relatively subjective. A clean UI and readily available interactions help make you more efficient, but taking time to learn a tool will always make you more productive. I recommend watching some videos of designers using the application before deciding your favorite UI. Even with that extra research time, you may find encounter roadblocks. Talk to the support team for the app to see if they can resolve the problems. Most of the support teams for these tools are extremely responsive because they want your business. Competition drives these tools forward.

Mobile Apps

Not many tools include an app that you can use for your prototypes. Many of them end up being web-only if they have a live prototyping feature. We ended up choosing a tool called Justinmind for this feature since it included an app that syncs your prototypes from your account. When you open the app, all the prototypes become available to test on that device. It’s great if you’re prototyping apps or testing your mobile layouts on iOS and Android. Since we originally looked at tools, several other apps have added this functionality. If it’s important to you, check around.

Responsive Prototyping

Responsive prototyping is a difficult concept for design tools. Very few have implemented it, and even fewer have been able to do it well. We ultimately chose to remove this factor from our comparison because of its limited availability in early 2017. We’d certainly like to consider this in the future, but at this point it’s not ready. Since our company uses Bootstrap 3 for responsive layouts, we decided to build separate templates for the corresponding breakpoints. We could do this with any software, but we like the templating/screen system that Justinmind used at the time.

Wireframing and High-Fidelity Prototypes

Depending on your design workflow and the overall user experience integration at your company, you may need a tool that handles both wireframing and high-fidelity prototypes. At our company, we have tons of meetings discussing layout and content architecture. In our process, we don’t need software for wireframing as we usually do those on a whiteboard during a meeting. We determine our basic layout and move to a high-fidelity solution so it’s easier for our stakeholders to understand the visual concepts.

UI Kits, Pattern Libraries, and Design Resources

Most of the major players distribute design resources like iOS UI assets, Material Design icons, etc. If you’re designing for a specific platform, you should investigate what UI kits are available to you for that software. If there are first-party kits, they’ll likely be maintained for future releases. Relying on third-party assets can be hit-and-miss, but some designers are more current than the bigger companies… so your mileage may vary. Asset management is also important. Many tools allow you to add assets to a library for use in other prototypes. Instead of copying/pasting assets between projects, you can just insert them directly from your library saving a significant amount of time for each project. Some tools can even integrate with an external pattern library — I haven’t used this yet, but knowing the advantage of pattern libraries in development, I imagine it would be awesome from a design perspective.

Prototype Collaboration

Let’s talk about collaboration. Unless you’re a solo shop, it matters. Actually, it still matters if you are a solo shop. As designers, we need to share our designs with other designers and stakeholders to gather feedback and improve our designs. The coolest aspect of collaboration is real-time sharing: you can have multiple designers working on the same prototype at once. This allows for a real-time collaborative process that’s new to the modern design world. Several apps have this option, but it’s not common. Another aspect of collaboration – stakeholder feedback – was a huge factor for our team. We wanted a commenting system that would allow our stakeholders to ask questions about specific design elements. At the time, Justinmind was the only tool that included commenting features without additional software or paid subscriptions. Lastly, do you need version control? Well, that depends mostly on your design process. If you have only one designer working on a prototype at a time, version control isn’t necessary and would be a glorified version of the undo button. If you will have multiple designers in a single prototype, it’s worth looking into a version control system. For our team, we decided against it because it was in its infancy in early 2017. Most of the major tools have some sort of version control system available.

Developer Exports

So many tools offer some sort of export feature that you should be able to give to a developer so they can start coding. At least that’s how it’s supposed to work… but it never does. Some tools simply give you the specifications for each element (this is cool), while others generate HTML, CSS, and JavaScript automagically for you. Auto-generated code is never as good as code purposefully-written by a human and audited by another human. Simply put: unless you’re using an integrated pattern library with pre-defined code for the elements in your prototype, it will not end up being accurate and should generally be avoided. That said, we ignored this as a factor when we were shopping for a prototyping tool. Eventually, we would like to see a complete integration with our atomic pattern library (for development) and the design libraries within our prototyping tool. That would allow us to design and code entirely within one source of truth. Sign me up.

What Tool Did We Pick?

In early 2017, Justinmind fit our needs the best. However, I would certainly like to revisit this process at some point in the future. Justinmind isn’t perfect; no design tool had everything we wanted. It’s also not a very popular design tool; it’s been around for a long time but has struggled to gain market recognition. Other tools see significant improvements, but Justinmind is relatively slow at feature additions. As the other tools get better, we will revisit their features every few months. It won’t surprise me if we end up on Adobe Xd at some point in the future, but in early 2017, it was a bit too new for us to consider it. Sketch is another very popular option, but it’s Mac-only so we couldn’t use it at Bio-Techne. Whatever tool you decide to use, make sure you’ve considered all the features we discussed in this article. Tools matter; they won’t make you a better designer, but they’ll certainly make you more capable as one.

The post Choosing a Prototyping Tool for Designers appeared first on Neon Studio.

One of the first projects I tackled while I was at Bio-Techne was validating Bootstrap 3 as a responsive framework from a user experience perspective. I was already very familiar with Bootstrap, but since Bio-Techne wanted to use it as the foundation of their new design framework, I wanted to see if it had any shortcomings that we needed to address during development. As with every framework, it has quirks, so here’s a list of things that needed to be better based on our Bootstrap 3 user experience validation:

• The entire menu structure
• The pre-defined mobile breakpoint for CSS media queries
• Overall styling changes to match company branding
• Vertical alignment challenges
• Lack of slider support

Validating Bootstrap 3 Menu UX

Let’s start with a brief discussion of the Bootstrap 3 menu, specifically, hover elements. By default, the Bootstrap 3 menu doesn’t open on hover. I can understand why: hover menus are difficult to implement in a way that easy enough for the user to use without interfering with their mouse interactions. Most developers opt for superfish-style hover menus that rely primarily on HTML, CSS, and a little JavaScript for compatibility. We knew we would have to modify the Bootstrap 3 menu behavior to put it more in line with modern usability standards. We’ll dive into how we did that in a future post, but we were able to create a great menu experience for desktop and mobile browsers that shared the same structural elements. We simply used a CSS media query to adjust the design after our mobile breakpoint.

Validating Bootstrap 3 Breakpoint UX

Speaking of mobile breakpoints: Bootstrap 3 defaults to mobile styling for any screen size smaller than 768 pixels. Am I the only who thinks that’s an odd choice? I don’t think they chose that number at random; I’m assuming their intention was to serve the iPad the full desktop version of a website even in portrait orientation. After much discussion and testing, our team determined that changing Bootstrap 3’s default mobile breakpoint to 769 pixels would give customers a better user experience by allowing them to choose between designs with the orientation of their device. If they want our mobile layout, they can use their device in portrait. If they want the full desktop experience, they can use their device in landscape orientation. By changing the default mobile breakpoint, we were able to use the same mobile layout for every mobile device simplifying our design and development process tremendously.

Validating Bootstrap 3 Design UX

The next issue: Bootstrap 3 isn’t exactly pretty. I’m willing to bet that any designer would choose to replace the default bootstrap styling with something a little more modern and in line with their brand. That’s exactly what we did. Bootstrap has a great CSS reset, but we replaced the styles for nearly every Bootstrap element we used on the site. We also made those stylings available to our content managers who can now use Bootstrap to build content pages that align with the rest of our design without much interaction from the design team. It’s been a great benefit to productivity.

Validating Bootstrap 3 Column Height UX

Bootstrap’s lack of vertical alignment consistency drives me crazy. If you style a content block with a simple 1-pixel border, the height of that element will vary based on content inside the div. So, if you have two tiles next to each other, one could be significantly taller than the other. It’s a bit twitch-inducing for people like me. I would prefer that everything lines up perfectly with matching tile heights and spacing.  A simple jQuery fix allowed us to add a class to columns that needed equal heights. We based our code on the window resize function in jQuery. It’s not enough to just check for the tallest object and make the others match; we need to do that every time the window changes size as well. Otherwise, you’ll get some pretty funky visuals as you test out your breakpoints. It’s not something that’s terribly jarring, but it’s necessary to fully fix the problems with Bootstrap 3 column heights.

Validating Bootstrap 3 Slider UX

Finally, we noticed a distinct lack of pre-made slider options that worked within the Bootstrap framework. The built-in carousel was too limited for our scope, so we had to look elsewhere. Most sliders use a general fluid width that doesn’t adapt well to Bootstrap 3’s breakpoints. Knowing this, we started building our new framework expecting to add a custom Drupal slider that worked within Bootstrap 3. After investigating many jQuery slider solutions, we determined that Slick slider would allow us to define the structure of our slides without having to write custom animations and functionality from scratch. We built our templates and created a custom entity type in Drupal so our content managers could add new slides directly from the admin interface. It’s been a huge hit with our content team, and it looks so pretty.

That’s certainly not an exhaustive list of user experience problems within Bootstrap 3, but those are the biggest issues that came up during our validation of the framework. Bootstrap 4 brought a lot of changes, some of which invalidate issues we brought up here. However, since 4 wasn’t available during the project, we made Bootstrap 3 into a good user experience for our customers.

The post Bootstrap 3 User Experience Validation appeared first on Neon Studio.

Agency Off Record

When we first visited AOR, their daily struggles included extremely slow internet, an antiquated file server, and a phone system that didn’t work well. The phones rang, but the system didn’t have any modern features like virtual conference rooms or voicemail to email messaging. They weren’t happy with what they had, but they didn’t know how to improve their systems. We completely overhauled their entire technical infrastructure. They got a new internet connection, firewall, phone system, server, and RAID storage solution. All these upgrades paid for themselves over time. After our improvements, they saved at least $2,000 per month. Yeah, they’re happy.

Network Administration

The first part of this project was increasing their overall internet speed. Their team couldn’t be productive with the speeds they had at that point. The Birch connection was only providing 8 Mbps (Megabits per second) download speed and significantly less upload speed. We talked with our contacts at Comcast and were able to secure a 100 Mbps download and 20 Mbps upload connection; that’s more than ten times their previous speeds for 25% of their normal monthly bill.

Since they were hosting a server at the office, we also needed an enterprise-grade firewall to help manage the network and keep it secure to the outside world. The Kerio firewall handles everything from virus protection to dedicated bandwidth for crystal clear phone calls. Within a few hours, the network infrastructure was in place. We heard giggles and Spotify streams in the office the next day. If you’d like to know more about our network services, please give us a call.

Phone Systems

After we established a reliable network infrastructure, we were able to move onto the phone system. Since Birch also provided the phones, we had to replace them before they could cancel their Birch contract. We worked with Jive Communications to provide them with the same phones they loved while improving the system capabilities. They moved to a digital infrastructure that allows for easy device management, unlimited expansion, and complete customization. We set up several virtual conference rooms, ring groups, and dial plans to give them the exact workflows they wanted. Since Jive phones work anywhere, we set up their remote employees with phones too. They can take phone calls from Hawaii and no one would know the difference. If you’d like to know more about our phone services, please give us a call.

File Storage

When we looked into their file server, the first problem we noticed was its age. They had a Mac mini running a 9-year-old operating system that just couldn’t handle the technology requirements of a modern company. They needed a newer server to ensure continued functionality and security. We set them up with a new, quad-core Mac mini server running a server-grade solid-state drive and upgraded the RAM to 16GB. At Drift, we always recommend Mac mini server solutions for security, cost of ownership, and reliability. A comparable rack server from Dell runs at least $2,000, consumes a significant amount of energy, and produces a lot of noise. Not many people want that sitting in their office. We support both solutions and suggest whichever option is better depending on our clients’ needs.

In addition to the Mac mini server, we set them up with 24TB of redundant file storage. The storage lives in two 4-bay Thunderbolt RAID arrays for extremely fast data access. The primary array has 10TB of usable RAID 5 storage, and the secondary array is a nightly backup of the primary array. That technical jargon may not mean much to you, but this configuration makes it almost impossible to lose data. We also set up our recommended CrashPlan online backup solution for a final layer of protection. AOR will never lose their server data. We’re completely confident in that.

Spending A Little Saved Them Lots

AOR completely recouped the cost of these upgrades and service changes within the first four months. They’re saving over $2,000 per month with these new systems — that’s $24,000 in the first year alone. Obviously, they’re very happy with the improvements, but this isn’t an isolated case. We’ve done this repeatedly for many of our clients. Go ahead, invite us to your business for a free intro meeting. We’ll look at your technology, determine the right way to improve it, and save you money. We helped AOR handle their network administration, phone systems, and file storage — we can do the same for you. Give us a call or fill out our contact form today!

The post We Saved this Business $24,000 a Year appeared first on Neon Studio.

Over the last six years, we’ve been their on-demand IT department and their digital business strategy advisors. Instead of hiring an internal technology position, they call us when they need something fixed, upgraded, or replaced and we make it happen. We monitor their systems regularly to keep everything running smoothly. If something does break, we resolve the issue quickly. We’ve also built a great relationship with their team. We know everyone by name and provide a friendly support environment to keep things operating efficiently. To us, having a good working relationship is just as important as getting things done.

Digital Business Strategy

With new clients, we start by attempting to fix what’s broken within their digital business strategy. Sometimes the solutions they have are the right choice but need some extra help to make them great. Then we look at what’s missing and help them implement it. Tigris needed a new file server and better security overall. As Tigris grew, they started working with larger corporations that required very strict security measures to qualify for contracts. They also needed a secure way to share documents with their clients. Lastly, and most importantly, they needed a backup for their backup’s backup. That may sound funny as you read it, but it’s crucial for any modern business. Let’s break down these solutions and find out how they helped Tigris’ digital business strategy.

Security is Job 1

No modern business can afford to ignore security. That’s an article for another day. Here at Drift, we treat security as job one in our digital business strategy. It was the first thing we improved at Tigris. We gave them an enterprise-grade firewall from Kerio, a Mac server with the latest software, and taught them about secure password strategies. The Kerio firewall keeps their internal network protected from viruses, malware, external attackers, and all of the liabilities that come with each of those vulnerabilities. That one box, and a few hours of setup, has saved Tigris from countless hours of downtime and potential external threats. It’s a simple, necessary solution for any digital business strategy.

Tigris had several clients that would not allow typical “cloud” technology like Dropbox or Google Drive for corporate documents. While unusual in 2016, that was a very common conversation in 2010. In order to meet their requirements, we gave them a secure Mac server for file sharing and data backups. They didn’t want every employee to have access to every file on the server. We set them up with a complex user and group system that allows them specific control over their internal documents. We also set them up with a secure file sharing solution to use with their clients. It’s similar to cloud storage in concept but still satisfies the strict security requirements for their corporate clients.

Beyond securing a network or a server, we always train our clients on proper password usage. We’ll probably write an article on this some day, but let’s just talk about the basic password policies we created for Tigris. Passwords are not supposed to be simple. Every password should include upper and lower case letters, numbers, and symbols. Moreover, it shouldn’t have any common words found in a dictionary. Every account we gave them — file server, email, computer, etc. — had a different password and these passwords change quarterly, at minimum. When possible, we encourage our clients to enable two-factor authentication for even more protection. We know it’s difficult to keep track of regular password changes, but applications like 1Password can help make that easier.

Since 2010, here are the highlights from our security strategy:

• Tigris has never had a security exploit.
• Our proactive approach to IT meant zero downtime for our solutions.
• None of their passwords has ever been used improperly.

A Backup for Your Backup’s Backup

Simply put: redundancy keeps businesses in business. It may sound ridiculous to have three different layers of backups running at all times, but it’s extremely important. In this industry, many of us hear horror stories about a computer and its backup failing at the same time. Most businesses can’t afford to lose data like that, so we recommend three layers to ensure complete redundancy. Since all of Tigris’ data lives on their server, that’s where we’ve implemented the three-layer protection. Here’s what three-layer protection includes: continuous incremental backups, a nightly clone, and a continuous incremental offsite backup. That means their data stored on the server is copied onto two local backups and one offsite backup every single day. In addition to that, every workstation has its own local backup and an offsite backup for added redundancy.

Since 2010, here is the highlight from on our backup strategy:

• No one has ever lost saved data.

Daily IT Support

The last part of a good digital business strategy is daily IT support. Workstations, printers, monitors, software, etc. — we help Tigris with everything digital whenever they need it. We’re not just about solutions implementation; we’re here to help our clients with any aspect of their digital business strategy. Onsite or remote, if something isn’t working, Tigris calls us to get it fixed.

Since 2010, here is the highlight from on our support strategy:

• If it broke, we fixed it.

Let Us Help Your Business

While the highlights of this case study may seem a little tongue-in-cheek, we’re serious about our clients and their digital business strategy. We’ve been doing this for years, so we tend to over-simplify these scenarios. We’ve found great solutions for our existing clients that often translate well to new clients. Give us a call; let us come out for a free intro meeting. We’d love to see how we could improve your digital business strategy. We’ll probably save you a lot of money too.

The post Digital Business Strategy – A Client Case Study appeared first on Neon Studio.