Seagull Scientific has been making “BarTender” software for over 30 years. While the traditional boxed software served its purpose well, the transition to the Cloud required a fresh approach and experiential overhaul. "BarTender” needed to join the future of user experience.
BarTender had critical UX problems in the following areas:
Outdated old-school UI
Siloed teams generating UI without oversight or communication
The use of varied tech stacks resulting in varying codes and disparate visual elements
Consideration and understanding of the User Experience
The Legacy Box Product
Original Box Product Integration Builder
Original Box Product Designer
Original Box Product Data Builder
Entering into this tech debt environment, where UX was a new concept to development, and engineers designed UI, my goal was to gain traction to evolve the product with current UX standards and best practices. Our users needed a champion and advocate for them and guide BarTender into a new era.
Key challenges and constraints
Scepticism about the value of UX
Integration of new and old UI patterns.. how to drive design forward while integrating what was already launched
Understanding our users: Persona’s were lacking, and research was non-existent
Development had one key stakeholder, the CTO, that made all final product and priority decision
Where to begin? Thinking towards The Cloud.
Sitemap
When I began at Seagull, the Cloud Product only had a few features. To envision a path forward, I needed to map projected features and consider the product in a holistic way.
The sitemap highlighted a critical need for extensive product integration among the formerly separate apps, as well as the simplification of workflows.
I discovered dead ends and critical errors that could prevent users from completing the key task of completing a label to completion.
The current workflows also served a narrow and specific user, the tech-savvy engineer-minded.. much like the current designers. Realizing the actual range of our users had not been considered, I realized the next key UX need: User Personas
Personas
Who were BarTender’s users?
Very little research had been done on our core users. Assumptions were being made, that they were generally tech-savvy engineer types, much like the folks designing BarTender all these years. To empathetically design for our customers, I needed to understand who they were.
This was a challenge, as our company uses resellers, and access directly to our customer base was gatekept from UX by stakeholders.
To develop ad hoc persona’s I interviewed Seagull support staff that have deep customer knowledge, particularly those from customer care and sales, to start defining our various user’s needs.
The result is thorough and empathetic Personas, that represent not only our tech-savvy experts, but also our small business owners, designers, and Print Operators.
With user insights and an improved IA infrastructure ascertained through the sitemap exercise, I turned to enhance the product's appearance and accessibility and began generating a design kit.
With its consistent and agnostic attributes, I chose Material Design as the design language for our Kit Standard. Over the course of a year, I developed a style guide in Figma to provide a cohesive visual guide for the future of the product.
Style Guide
Product Evolution
Now that we had a design guide and library, I could generate UI for the Cloud that felt cohesive and modern, and provide our users with an experience that didn’t feel fragmented and overwhelming.
The developers could now code elements to apply and update globally, a giant leap forward for feature release velocity.
High Fidelity Desktop Wireframes
High Fidelity Desktop Wireframes
High Fidelity Desktop Wireframes
High Fidelity Desktop Wireframes
High Fidelity Desktop Wireframes
High Fidelity Desktop WIreframes
High Fidelity Desktop Wireframes
High Fidelity Desktop Wireframes
High Fidelity Desktop Wireframes
Responsive Design
With the induction of a Cloud Product, our Windows software needed to become both device and operating-system agnostic. Development needed guidelines for how to make a responsive product and breakpoint behavior needed defining. Complex SAAS functionality needed conversion specs for the handset, such as query builders, data tables, etc.. to a responsive scale.
In addition, an early-stage BarTender App was released to the market, which needed updating to match our refined mobile functionality. (currently available in the APP Store)
Responsive Handset Versioning
Responsive Handset Versioning
Responsive Handset Versioning
Responsive Handset Versioning
Responsive Handset Versioning
Responsive Handset Versioning
Responsive Handset Versioning
Mobile Only: Refining an App
In addition to the responsive product, BarTender released an App for consumption in the App stores. Rushed to market, this App had flow and usability issues.
Below are examples of the original beta version and streamlined UI after a UX refinement pass to resolve dead ends and behavior inconsistencies with mobile standards.
Original Beta Version of the APP
Updated APP
Developing a UX Resource Library
Educating Developers on the Importance of UX
Once the style guide was initiated, it became clear that Engineering needed additional resources and lots of them.
Key questions that kept coming up:
What sort of animations/ behaviors apply to elements?
When do you use specific patterns?
How do breakpoints apply?
What are the specifications for each component and layout?
My door is always open, but build a resource library.
In this way, Engineers can find answers to questions, and reach out when they need more specific UX Assistance.
The Style Guide and Design System put in place works.
An initial version of BarTender Cloud has launched and is gaining traction on the market. Customers are positively responding to the new product’s look, feel, and functionality.
Also, UX’s collaboration has enriched the company and the product, as this testimonial shows.
Supporting Quantifiable Metrics:
30% increase in feature release velocity
80% continuity increase in new development
Customer usability poll satisfaction rating increased to 4 out of 5 stars from the legacy product (2 out of 5 stars)
“Dawn has been a great person to work with. She pioneered a lot of UX guidelines for us and worked patiently with development teams that hadn’t had formal UX discipline applied before. She was always kind, thoughtful, and especially detail-oriented. She was very passionate about her work, and the result of her efforts was instrumental in making our software better.”
Future Design and Navigation
At the time of my exit, UX had gained confidence and charter to finally update the navigation and visual presentation of the product.
I am proud of the strides taken during my tenure and look forward to the implementation of UX’s refined vision.