CCC Days at RoleModel Software: Part 3
Learning and innovation go hand in hand. The arrogance of success is to think that what you did yesterday will be sufficient for tomorrow.
- William Pollard
If we were to turn back the clock even just five years, the software stack we were using at RoleModel Software would look a lot different than it does today. Many of the top languages still are used regularly but new libraries, plugins, and features are always being added. User interface and experience standards change and the process to support it all does as well.
If you build software today that looks exactly like software you built five years ago, it will be obsolete, slow, and largely unusable. You can’t expect to do everything the way you always used to do it in this industry.
But to adapt to new standards, you need to understand them, and to understand them, you need to learn them.
One of the ways we pursue learning new technologies is through our quarterly CCC Days (learn more about CCC Days here). Here is what our exploration looked like this time around.
Common Mobile UX Patterns
RoleModel Software has a fairly well-defined set of common practices when it comes to UI/UX for our software solutions. However, much of what we use does not automatically translate well to mobile applications.
This experiment focused on developing some standard UI/UX patterns for our common mobile use cases.
This included converting menus that are acceptable for desktop orientation into mobile-friendly tab bars and turning “bread crumbs” into a navigation flow that makes the most of the smaller screen space.
Another point to consider is that since you don’t have all the extra screen space when you’re on mobile, you can’t show everything at the same time. The team explored options for how to designate the most important items for a particular user, show them primarily, but then also place the other options within reach.
LightningCAD Static AR
One of the experiments at a past CCC Days was integrating augmented reality within our LightningCAD framework. (Read more about it here!)
An interesting possibility we explored this time was the ability to place a static image within the 3D LightningCAD model. That way, even if you weren’t on location and thus unable to use AR to visualize, you could import a photo and still get an idea of what it would look like.
The team working on this experiment created a new feature called the image plane which was essentially a frame for the actual image. The image plane can be placed and moved within your 2D design just like any other element. By then selecting the image you want to be displayed on the plane and setting some dimensions, the image is then visible within the 3D model in relation to how it was laid out in 2D design.
It’s certainly at an early stage of development but static AR shows a lot of potential for inclusion in coming versions of LightingCAD.
Second Generation Support Scorecard
With more projects being added to the roster every month, the RoleModel Software Ops team uses a system we call a “scorecard” to manage the health of the projects and keep track of key metrics.
Currently, the scorecard is built on spreadsheets and requires manual updates and maintenance. This project was meant to introduce more automation while producing greater visibility and accessibility for the projects.
A few of the key adds were:
- adding a feature that auto-generates reports that need to be sent out by pulling in data tied to that account from our time tracking software
- adding a reporting engine to visualize project status
By adding methods of automation to the support scorecard, the operations team can be in a better position to handle an influx of projects without being overwhelmed.
Refine DPQ UX
Design Price Quote (DPQ) is a platform that combines CAD capabilities with the simplicity of a configure price quote (CPQ) system. (Learn more about DPQ here)
With more clients onboarding with DPQ all the time, we wanted to take this opportunity to figure out how we can best improve the user experience while it’s still a newer platform.
The team started with a user story mapping session where they figured out the path a user takes through the system, making sure to consider the different types of users, such as an admin, dealer, and consumer.
From that session, we identified a few areas that needed the most attention. One half of the team dove into building some new features, such as an estimate creator tool and a confirmation when a request for quote was submitted. The other half of the team kept pushing the UX exploration forward, looking to simplify the existing user experience and build out the interface for new screens.
iOS Testing
At RoleModel Software, we operate solely on test-driven development, which means writing tests based on the software requirements, and then writing the actual software to fill those tests and meet the requirements.
The tests that we write look different if you’re working with a desktop application versus a mobile or hybrid app. Most of the work we do is focused on desktop applications, and we have our go-to tools for running tests. But our standards for mobile applications are less established.
The team on this project explored a new tool for automating mobile tests and set up a handful of different scenarios to see how well it worked.
Using Storybook with View Component for RoleModel CSS
Storybook is an open-source tool used for building component libraries for easy access and integration into projects. By loading it with all of your standard components, you can interact with all of them in one place. Using a tool like Storybook makes it easy for developers to work with components and know what to use and when to use them.
View Component lets you create React-like components within Rails apps. By using Storybook in conjunction with View Components, you could easily manage the use of your View Components throughout your projects.
But there’s a catch. Storybook technically doesn’t work with non-JS frameworks (ie Rails… which we use. a lot). Recent updates have made it possible but it’s not as easy.
This experiment consisted of working through the process of using Storybook and View Component within a Rails app. The team also added the component library for our RoleModel website to Storybook to see how that could be valuable as well.
Refining Color Theory and White Labeling
Building off a project from a past CCC Days, the goal here was to further explore how to best incorporate responsive color schemes within our projects.
A lot of clients desire the ability to make their software look like their brand colors, which is a reasonable ask. But as most are aware, not all colors play nice together. Everything might look just great using blue for example, but what happens if the client's brand colors are red?
The team worked on an internal time tracking tool developed by the company to test out color theory, diving heavily into the differences that luminosity makes, and figuring out how to handle edge cases where certain colors did not work well together.
Basic Email Styles and Infrastructure Setup
When we get started on a new Rails project, we employ a system we’ve developed called RoleModel Rails. It is essentially a template for new Rails projects based on what we typically need. We’ve taken an assortment of different pieces that end up getting implemented at some point and they get imported automatically.
The most recent piece that we wanted to add to RoleModel Rails is a basic email template for notifications, as well as SMS notifications, allowing better communication between the platform and users. The team on this project worked on developing that template and exploring additional notification options.
Particular to emails, one of the obstacles was creating something that could be viewed across a number of different browsers since styles are not necessarily available universally. The team wanted to create something that could be used regardless of the final format (HTML, plain text, etc) without the need for duplicating from one format to the next.
The solution we found was Ruby gem called “premailer” which allowed us to use our CSS styles while still accomplishing what is needed when working with different formats.
We cover a lot of ground at CCC Days on many different fronts. Everybody always has something to learn, and it’s not just software craftsmen who contribute. Even the most junior employee lends a fresh perspective that others can learn from, even if they don’t possess decades of programming experience.
Whether the focus is development, design, administration or something else, we believe time spent learning is time well spent.
