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.

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.