Design & Architecture in borderline B2C/B2B apps | Accelo

John Scrugham
7 min readDec 3, 2015

--

Software product design is converging between business and personal.

Just this past fall, Salesforce, Accelo, Asana, and Basecamp relaunched their design and architecture with heavy B2C influence.

And on the other side,businesses are heavily using the biggest B2C platforms such as Google, Facebook, and the iPhone’s iOS; the design & architecture of these applications are starting to reflect that.

So, why are B2B and B2C apps converging?

We are accessing and using apps in very similar ways regardless if it’s personal or business use. Because of this, we begin to expect the same endpoint when the road that takes use there (hardware and software) is the same. Because I access business and personal applications in the same manner (and hop between them so quickly), I come to quickly compare and be affected by vastly different user experiences.

The first applications were accessed through dedicated hardware — a.k.a terminals — but have evolved to being accessed nearly anywhere from any connected device.

Tektronix 4010. https://ub.fnwi.uva.nl/computermuseum/tab13215g.php

Terminals were built specifically for the purpose of running a dedicated program — e.g., Pixar employees rendering visuals on graphics terminals or Marriott front desk agents checking in guests with DOS MARSHA terminals.

As computing power increased and cost decreased, personal computers began to make their way into consumer homes. You could play with computers: draw a love letter in Paint or build a home in Sims. The definition of what a computer was for and where it sat broadened.

Now, computers transcend the physical space of one function: I watch Netflix at home and write emails at work on the same device; I bounce between Instagram (personal) and Slack (business) on the train; you can bring your own device (BYOD) to work.

I access the online world through one portal: Chrome. Whether that be a personal site like Zen Habits or a business application like accelo.com.

Quick check — how many of the tabs open on your browser bar are work, play, or both?

To perpetuate this trend — we are seeing the same applications serve a business purpose in one setting and a personal purpose in another, e.g., I use personal Gmail at home and business Gmail (Google Apps) at work. And what does it mean to be at work or at home when you are working from home or a coffee shop? Apps are moving into the 3rd place, that liminal space between work and home.

Using borderline B2C/B2B Apps

Traditionally, software applications came in two flavors: Personal (to affect endorphins, happiness, social connections, fitness) and Business (to affect bottom line, reporting, cashflows, management).

The place between personal and business is growing with productivity and social-commercial apps:

Sunrise Calendar App
  • Productivity: Time management (calendars), to-dos / checklists, communication (email) provide ubiquitous benefits that transcend personal and business. Many times, personal (B2C) apps like Gmail, Trello, and Evernote are moving into the business.
Facebook Advertising interface
  • Social-commercial: We also use apps to connect and find information about — and interact with — others. While these applications, such as Facebook or Google, were originally non-commercial and consumer, they have become some of the most lucrative business platforms in the world. The business management tools feel like the rest of the app: clean, easy to use, and social. Personal apps are becoming business apps.

Why Accelo created a B2B / B2C solution

Geoff, the CEO of Accelo, was the managing partner at his digital agency. As his client size and team grew, he was finding that running the day-to-day of the business was increasingly more demanding, and that the work he loved — designing, coding, building, consulting — was slowly dying.

Soon, the team of four sitting around the conference table grew to fifteen in an office, and the cracks began to show: emails were getting stuck in inboxes; the team wrote tasks and time on sticky notes that took hours to translate into project plans; budgets to clients were just wrong.

Their current tools were flexible and B2C-esque. For a growing company though, the tools weren’t scalable. The next logical step was B2B enterprise software with the joys of clunky UI and a big price tag.

Geoff and team were stranded in the valley between software tools and enterprise solutions.

What they did next was what we often see with a group of UX/UI designers, engineers, and web-savvy individuals: start building your own solution.

Here are some other awesome examples of digital agencies building cool stuff:

Accelo was built to bridge the gap between the frankenstein of multiple tools and the hairy monster of enterprise systems.

When your experiment becomes your company

A small group at the digital agency began experimenting with a CRM and ticket/project tracking system to help them automate the business side of their client work. It was basic, but it worked.

Curious clients asked how the digital agency managed its work, and a few clients asked to use it. There was a need. After considerable debate, the founders left the agency side of the business to start a software company. In 2011, Accelo came out of beta and on to the market.

Accelo’s middle-out architecture

Accelo wasn’t going to be like most software architecture: either top-down or bottom-up. We chose to ride the line between with middle-out architecture.

Top-down architecture. When designing for enterprises, traditional system architecture starts on the top with providing executive dashboards and reporting — and then works back from there to figure out the inputs. The prevailing design reasoning is,

“Find the outputs, then determine the inputs: if we need utilization reporting, then the team should probably log their time.”

The classic ‘90’s software company built and sold a top-down system with top-down promises of organizational efficiency and insight. While they delivered on the promise of reports, the data that was fed up to that was garbage because the bottom (the majority of the users) didn’t use the system.

Middle-out architecture. Accelo started and continues to be built in the middle of the functional and strategic objectives of the business.

We do this by building personas around three users at once. For example, the owner persona is a 1) top-down CEO for project dash boarding 2)middle-out project manager for budget management 3) bottom-up user for time tracking.

In small & medium businesses — especially in agencies — roles are fluid, so our architecture needed to deliver value at each level,

“Make the inputs really easy to get great outputs: The team needs an easy way to log time, regardless of the reporting that comes out of it, or there is no buy-in.”

Bottom-up inputs

Bottom inputs: Task cards for collaboration, management, and time tracking for end-users to easily communicate what they are up to.

Middle-out tracking

Middle: Live budget tracking for Project Managers to stay on budget

Top-down executive reporting

Top outputs: Project scorecards for VPs and executives to fight fires where needed

Bottom-up architecture. Most personal apps are built from the perspective/ user journey of the most basic user. Social apps, for example, put single human data points front such as names, birthdates, photos, faces.

The prevailing thought is,

“The core experience and value is for the end-user so design for that user.”

Accelo’s design — natural, human touches

Professional service application data is mostly human-made, as opposed to many enterprise software systems that track widgets and numbers. Because of this, we have more data points and elements to surface that are B2C-esque.

Human data includes client email conversations, time spent solving a technical problem, a human uploading design files.

And if it wasn’t directly human-made, it was a close derivative. For example, Account Managers and Project Managers scope the work (SOW) from a client request for proposal (RFP) — which involves estimates on effort (how hard can my team of humans work, what unique skills do they have).

6 design elements to humanize your B2B app

  1. Conversation threads that feel like email / social media and natively integration with Gmail / Office365. When you are switching quickly between applications, you tend to expect a similar experience and want them to work with each other.
  2. More white, taking inspiration from borderline business apps like Basecamp, Google Docs, and Medium — more white gives you breathing room to digest the information in front of you.
  3. Faces next to names because we are human. It puts a personal stroke into the interface. Also, it helps you remember who you are talking to.
  4. Materiel interface rather than tables and grey. @media handles and divs to build up the flexibility on any screen because we no longer access applications from one screen.
  5. Natural movement like swiping, dragging and dropping for tasks and assignments.
  6. Timers to track time — instead of the dreaded timesheet. We experience time as a seamless flow, not in estimated blocks after days since it’s happened, so timers help with accurately representing our efforts.

Learn more about we are doing at Accelo.

--

--

John Scrugham

Growth & Product at @coda | previous: @accelo | Founder of amara -a travel experience platform