Responsive Redesign for Systemize & CounterGo

Moraware

Moraware is making their products more valuable with a new responsive, tablet-friendly interface that’s quick and easy to use in the field.

Industry:  
Retail

web

web

mobile

mobile

desktop

desktop

embedded

embedded

MESSA and its design logo are marks owned by Michigan Education Special Services Association, registered in the U.S.
Systemize and CounterGo from Moraware help countertop fabricators create quotes and manage their work.

The two web apps work together, allowing fabricators to lay out and spec countertop projects, and keep track of their inventory, quotes, projects, clients, etc.

Systemize and CounterGo had received many incremental improvements since their initial release in 2002, but no major visual update.

Moraware’s customers had started using the software on phones and tablets, and the company wanted the system to work seamlessly on these devices.

Moraware worked with an interaction designer to plan their responsive, mobile-friendly approach, and they did code updates in-house. They came to Atomic Object for a complete visual redesign of Systemize and CounterGo.

Systemize and CounterGo are live products with many different types of users, so we had tight constraints. But Atomic’s design improved them dramatically—they're easier to use and much more beautiful.

Ted Pitts, Moraware Founder

Coordinating Stakeholders

In addition to team members Grand Rapids and Atomic Object, this project brought together lots of different groups. Having this many cooks in the kitchen required a lot of coordination and a complex project schedule that balanced several timelines and sets of constraints.
Recycling data from the GR Public Services Department
Dozens of vendors with rewards of various sizes, types, and durations — recruited and coordinated by Local First
The myGRcitypoints information website, created by The Image Shoppe

Technical Specs

Atomic designed the system architecture and wrote software and firmware for:

Custom Protocol
Reduces required bandwidth and handle collisions, allowing reliable transfer of a high volume of information through RF and cellular communications back to the data collection service.
Gateway Devices
Each is a Technologic TS 7800 single-board computer with a custom RF receiver. They run a combination of C and Ruby on an embedded Linux system.
Web App
A JRuby on Rails application using an Oracle database that deploys to IBM Websphere.

Phase 2: Developing a Full-feature Workshop Experience

With the Learning Map developed into a digital product, Root wanted to further help users dive into their organization’s strategy, financials, or processes with a second release. Among other features, they sought to create a kind of a virtual whiteboard, where everyone’s voice could be heard in a fun, engaging, and meaningful way.

Atomic’s Software Design Practice Lead in Ann Arbor, Bryan Elkus, led design work on the project. He saw the user experience of going through the Learning Map activities as a type of collaborative online challenge.

Under the guidance of Atomic's Software Consultant & Designer Bryan Elkus, the project emphasized collaborative user experiences, akin to an online group challenge, focusing on:

  • Consultants facilitating onboarding, ice-breakers, and exercises.
  • Client company employees engaging in organizational change.

Atomic Object Software Consultant & Developer Matt Soto his development work focused on delivering Root’s vision of polish, complex features, and emphasizing a business model around the digital product.

Root's VP, Nate Butki says Atomic’s consultative approach helped the project team uncover and address underlying needs rather than merely executing requests.

“Atomic didn’t want to just figure out what we wanted and give it to us—but rather figured out the need and helped us with it,” he said. “If they had listened to us and spit out exactly what we asked for, they would have only gotten 80 percent of it. Atomic’s team asked the questions and pushed us further.”

Technical Specs

Atomic designed the system architecture and wrote software and firmware for:

Custom Protocol
Reduces required bandwidth and handle collisions, allowing reliable transfer of a high volume of information through RF and cellular communications back to the data collection service.
Gateway Devices
Each is a Technologic TS 7800 single-board computer with a custom RF receiver. They run a combination of C and Ruby on an embedded Linux system.
Web App
A JRuby on Rails application using an Oracle database that deploys to IBM Websphere.

The new CounterGo and Systemize are designed for tablet users. The new responsive interfaces use space efficiently, with easy-to-use navigation and inviting colors that decrease eye strain.

They’re also backward compatible to work for all users, regardless of the type (or age) of their device.

Phase 2: Developing a Full-feature Workshop Experience

With the Learning Map developed into a digital product, Root wanted to further help users dive into their organization’s strategy, financials, or processes with a second release. Among other features, they sought to create a kind of a virtual whiteboard, where everyone’s voice could be heard in a fun, engaging, and meaningful way.

Atomic’s Software Design Practice Lead in Ann Arbor, Bryan Elkus, led design work on the project. He saw the user experience of going through the Learning Map activities as a type of collaborative online challenge.
Under the guidance of Atomic's Software Consultant & Designer Bryan Elkus, the project emphasized collaborative user experiences, akin to an online group challenge, focusing on:

• Consultants facilitating onboarding, ice-breakers, and exercises.

• Client company employees engaging in organizational change.

Atomic Object Software Consultant & Developer Matt Soto his development work focused on delivering Root’s vision of polish, complex features, and emphasizing a business model around the digital product. Root's VP, Nate Butki says Atomic’s consultative approach helped the project team uncover and address underlying needs rather than merely executing requests.

“Atomic didn’t want to just figure out what we wanted and give it to us—but rather figured out the need and helped us with it,” he said. “If they had listened to us and spit out exactly what we asked for, they would have only gotten 80 percent of it. Atomic’s team asked the questions and pushed us further.”

“Atomic didn’t want to just figure out what we wanted and give it to us—but rather figured out the need and helped us with it.”

Nate Butki, Root VP

Taste-testing the Product in the Field

Delivering A Great Product and An Empowered Team

By getting to share their decades’ experience with agile practices, Atomic’s team got to watch the counterparts at Root develop new skills over the course of the second engagement.

Soto says he loved watching Root’s inherently collaborative culture adopt the agible practices they were learning.

“After a few months, they loved how easy and smooth it was to make last-minute changes, to pivot in another direction, and use feedback to spend their time where it was most impactful,” he said.

Root’s Jared Page says the agile approach to product design, development, and management he saw during the engagement had a profound impact.

“One of my favorite things about this project is that everyone got better—better at our jobs and better with communication; it just feels cool,” he said. “Sometimes you work for a year and don’t know if you’ve improved but everyone could look back on this project and say they’ve improved. This project changed the way I will work forever.”

It was very nebulous, complex problem, and we couldn’t always explain what we wanted. Sarah was great at iterating with us. She’d try something, we’d give feedback, and she’s come back with something else. We really enjoyed working with her.

Loren Curtis, Moraware Software Engineer

Coordinating Stakeholders

In addition to team members Grand Rapids and Atomic Object, this project brought together lots of different groups. Having this many cooks in the kitchen required a lot of coordination and a complex project schedule that balanced several timelines and sets of constraints.
Recycling data from the GR Public Services Department
Dozens of vendors with rewards of various sizes, types, and durations — recruited and coordinated by Local First
The myGRcitypoints information website, created by The Image Shoppe

A Partnership with a Storybook Ending

The team’s careful project management, client communication, cutting-edge architecture, and cohesive design strategy helped the team ship the product on time and on budget.

Reflecting back on the multi-year, high-profile project, Robinson said Atomic helped his company arrive at a special moment in time.

“We'd never done anything this big. Ever,” he said. “We’re live across all the major pillars Atomic said they would deliver on. It was delivered on time, on budget, to expectation, live. Not three or four milestones late with people leaving and the platform half-baked and full of bugs.”

StoryLoom began open-beta in December 2022. A global launch is scheduled for the spring of 2023.

“We’ve been given a rare opportunity," said Robinson, "to find success by chasing opportunities Starship Enterprise-style: going where people aren’t—pushing boundaries.”

Atomic provided responsive web app design and front-end development for CounterGo and Systemize using HTML, CSS, and JavaScript.

The Atomic Team

Here are some of our current Atoms who worked on this project. Click their photo to read their bios!

No items found.

Project domain(s)

web

web

mobile

mobile

desktop

desktop

embedded

embedded

Industry

Services provided

Interaction Design
Visual Design
Software Development

Tools used

HTML
CSS/SCSS/Less
JavaScript/ECMAScript