Published on | Prototyping: From UX to Front End — Medium Signe Roswall

When I started as the designer at Napp in September of 2017 my mission was clear. I was to gradually improve the design, look and feel as well as the user experience of the publishing platform Siesta.

Despite this being five or six months ago already, I clearly remember sitting at the job interview all like, hell yeah–I can do that.

Piece. Of. Cake 🍰

Blissfully unaware of what was really in store for me.

From the Napp Tivoli tour, October 2017

Barely two months after my first day, the concept for Siesta expanded

In October, barely two months after my first day, a new strategy for Siesta was presented. Originally serving as a Publishing Platform, Siesta would now be expanded to be a Partner Relationship Management (PRM) system.

While this might sound pretty straightforward spelled out in a single sentence like that… it meant an entire world of difference in my work day.

The system would grow tenfold.

It would need a complete redesign. Not only for the product itself; the Siesta backend system and the app that goes with it, but everything around it, too.

Slowly but surely we moved into what would become a four months long period working intensively on the redesign. For my part, it began with feverishly trying to recreate the look of Siesta.

Launching a new, redesigned Product Website

The Siesta redesign actually began with the product website.

In a previous attempt to make Siesta appear more fun and fresh the platform came across as being Business To Consumer on the original product website:

*sucks air in through the teeth* 😬

But Siesta has always been a Business To Business product exclusively. So not only did the content no longer correspond with the new strategy, the design was simply not hitting its target customers at all.

Looking back at it today, I’m actually really glad the first design task following the concept change was redesigning the product website. Most of Siesta’s new identity formed during the webdesign process. Through it, I began getting a sense of the new Siesta — the “PRM” Siesta. Fonts, colours, illustrations and the visual style slowly came together in a new look. I swapped the aggressive orange out with some nice, blue-green hues.

In November, we launched the new website. The feeling was amazing ✨

But one thing is redesigning a website. A complete other thing is redesigning an entire backend.

Redesigning Siesta’s backend interface

After the new website design had gone live and I finally had some piece of mind, my CTO approached me. He proceeded to casually announce, as only he can casually announce a statement somewhat like the following:

“We’re going to redesign Siesta’s backend entirely with the new look from the website. I’d like you to begin designing it how you think it should be.“

I’d like to be able to say I shouldered it, cool-headed. Like a professional.

Instead, I began sweating through my deodorant.

I knew this would be the biggest, baddest design challenge I’d ever faced. And that I sure as dirt wouldn’t be able to do it alone.

Every good interface design begins with people

The first step was to investigate the people involved with Partner or Reseller Management. How is their work day like? What are their challenges? What motivates them? How can we help make their work day better?

Personally, I had no prior experience with Partner Relationship Management. In fact, I didn’t even know such a thing existed. So I really needed to find and get those real-life perspectives.

But getting in touch with people from the field proved much harder than I expected. I only got to do three interviews, and I couldn’t help but feel they alone weren’t enough. So I also eavesdropped heavily on my colleagues in Sales when they were sharing the reactions from their sales meetings and product demo’s. Who are they, those who buy and use our system?

Eventually I developed something of an impression of them:

Our target users for the backend are mature adults; men and women from 35 to~50. Usually they’re either a CMO, CSO or a manager of some sort. We’re definitely targeting bosses and leaders, but we shouldn’t forget entirely about the “field guys” like Sales Reps, because they’re the target users of the app itself.
Their tech savviness is low to mid-level, usually within other systems such as a CRM. They often work with Microsoft’s Office pack, especially Excel. Most of them are most likely also very active on LinkedIn.
One of the interviewees expressed a want to forge personal relationships with their partners and resellers and improve their loyalty. Another expressed frustration about not having any overview of them at all.
Almost everyone we talked to knew what a CRM is, but have no knowledge of PRM platforms and what it even means.

I would definitely have preferred to do much more initial research and interviews. But the reality was, time was moving on and it was going fast.

Completely overhauling the Main Menu

It made sense to begin with the backbone of Siesta; the main menu. The main menu is so critical because this is where users navigate the entire system from. It needs to connect all the dots and make features reachable.

But very early in the redesign stage it became painfully clear the structure of Siesta couldn’t support the “PRM-expansion” in its current design. We simply had to change the structure to not only support the complexity of the system, but also make it seem easier and intuitive to use. Despite being very different.

The original menu lists all the functionalities: first-level and sub-level both. This creates a messy-looking, overwhelming menu. The new menu groups together features in corresponding “actions” such as;

Publish for publications and creating forms
Manage for partner and user administration
Collab for messages and chat
Engage for campaigns and push messaging
Et cetera…

Bracing for impact

Introducing a new structure in an already established system is risky. People generally tend to dislike too much change all at once, especially if it disrupts their daily rhythm. We’re creatures of habit and use patterns to save as much brain power as possible⚡️

“Why isn’t this over here where it used to be?! It was so much better before!”

Our clients have developed solid habits in the old menu system and there’s no reason to believe they’ll be perfectly happy with our changes right away. To ease the transition we wrote a guide to the new design and are hosting Webinars for our clients immediately after the redesign launch. We’ll have a unique chance of initiating a dialogue with them about Siesta.

It’s important to stay curious and open — not proud and stubborn, convinced our solution is the only right one. If several of our clients express unhappiness with the new menu, we’ll simply have to change it. Kill your darlings — or at least allow them to evolve beyond your own beliefs.

It’s important to stay curious and open — not proud and stubborn, convinced our solution is the only right one.

I’m eager to hear the feedback both good and bad and if needed, make the changes necessary so our clients will continue enjoying Siesta.

But even with the new menu in place, there was still a long way to go. The menu is — literally — only a small corner of the system.

Tending to our roots: Redesigning the Upload Publication feature

Siesta is having some serious growing pains, but that doesn’t mean we should forget entirely about the features already there. Starting out as a publishing platform, the most used feature in Siesta is undoubtedly the Upload Publication feature.

Upload a Publication is where clients go to digitise their materials, mostly pdf’s, and make them available in the backend as well as in the Siesta app. Clients have been using it over and over again, for thousands of files — with incredible patience.

The old Upload Publication view

I say with incredible patience because when you click the New Publication button, you’re met with no less than fifteen inputs and buttons in a total of six panels (see image above). Fifteen options your brains has to process for uploading one publication. Despite most of them not even being required.

Every. Single. Time.

The Upload Publication feature has been completely redesigned to hopefully offer a much better and faster uploading experience:

The most important fields are above the fold, the less important ones are below. Only three fields are required; file, title and category, they’re marked accordingly. The title is generated from the file name, saving users additional time.

New Dashboards and Statistics views

Many other views in Siesta were redesigned as well. The “home dashboard” is where most clients begin their Siesta experience so it’s a pretty important page. The new dashboard is lighter and friendlier. Instead of bombarding our visitor with info, it’s presenting it instead:

This wasn’t only the strategy for the dashboards. All the statistics pages in Siesta got a much-needed makeover, focusing on prioritising information to avoid overload and presenting data in a nice, understandable way.

The new user statistics page with user activity and user journey. PS Sorry for the Laravel icon thingy.

The “App” and “Web” statistics pages were terribly misunderstood. Clients thought these statistics pages were for actual page views inside their publications. But really the statistics pages show visits and page views on the entire platform. In another word; traffic.

We renamed the pages to “App Traffic” and “Web Traffic” and included banners which specifically explains what data the user is looking at.

Optimising the drag & drop experience in the App Designer

Siesta’s new “App Designer” is where clients can customise the layout and content of their front page in the Siesta app. The App Designer now supports adding, moving and deleting modules with drag & drop and the view has been completely redesigned to be more intuitive.

The App Designer page will also get a new Preview functionality very soon so users can admire their completely custom layouts.

Cards! Cards everywhere ✨

Mmmmmmm…. Cards.

Obviously, we needed to talk about the elephant in the room: ‘Access Groups’

I know what you’re thinking right now. Access–what? You and our clients have that in common.

The most severe usability issue in Siesta was no doubt the dreaded “Access Groups”. Access Groups is where administrators can group people together and give those groups access to specific content, such as publication categories. This actually saves clients the hassle of adding or removing people separately inside each and every publication. Really smart, right?

I didn’t get it at first, either.

Several times my patient colleagues in development tried to explain how Access Groups worked. They even went as far as drawing it to me. Just imagine that, developers drawing!

In an attempt to explain the functionality of Access Groups, the developers drew me this

But all I saw was a plate with three cookies 😞

Access Groups had to go

The first issue with Access Groups was first and foremost the name. Apart from making the feature sound unreasonably advanced, the name puts the emphasis on the “access” aspect of the functionality. Access Groups is actually just a group of specific users, but this wasn’t clear at all in the UI. You couldn’t even add people to the Access Group when you were creating it:

The second issue was when Access Groups were paired with publication Categories. No one could understand how or why the two worked together. “Why don’t you just delete categories?” Everyone kept asking. One of our clients actually named their Access Groups and publication Categories the exact same thing:

Clearly, Siesta wasn’t communicating how we intended clients to use Access Groups and Categories well enough.

Introducing Teams

We decided to rename Access Groups. But this wouldn’t solve the issue alone, we also needed to be much better at helping our users understand both inside and outside of Siesta. We renamed Access Groups to “Teams” to completely remove the old access confusion. Everywhere the system said “Access Groups” we changed to “Teams who can view this” or “Teams with access”. Almost literally spelling it out.

But if you really want people to understand something, you need to give them examples they can relate to. I created two Infographics, one for Categories and one for Teams:

We added a banner on the “Teams” page to not only inform people of the name change, but also to link to a help article and the infographics.

A completely revised, more understandable copy

Siesta’s communication issues weren’t only apparent in the Access Groups. All of the copy inside the system was originally written by its developers who, of course, have a deep and thorough understanding of the system. They did build it, after all!

But our clients don’t share this deep understanding or the technical knowledge behind it. During the redesign, a lot of the interface copy was rewritten to make more sense to regular mortals.

Rewriting copy is not always enough. Placement is also key. In the new design, short explanations of views and features are placed directly where they’re found, such as on the new User Journey view:

On User Journeys, the first “entry” is some help text explaining the feature which can be removed.

Creating a new tone of voice

AI’s and Conversational UI’s are all the rage of the design and tech community these days. So far, Siesta has been a one-way communication platform but now, it’s moving closer towards a collaboration platform with the PRM expansion. The new Siesta will aim to offer feedback where and when it’s needed and intelligent suggestions for actions or features.

The tone of voice in Siesta has been redesigned alongside its brand, aiming to be more friendly and humorous. In contrast to the previous “developer copy” Siesta won’t go out of it’s way to explain techy-system-stuff. The theory is, our clients won’t necessarily care what’s going on technically inside the system so long as whatever it does, it gets the job done.

What’s next: Putting the ‘Partner’ in Partner Relationship Management

Like many other systems Siesta currently has a user administration, but it’ll also have a dedicated partner administration for adding, editing and deleting reseller or partner companies. Partner administration is the backbone of the PRM expansion, but it’s still currently being developed as it turned out to be a bit more tricky than first anticipated.

The first PRM feature coming for Siesta is Partner Administration.

When designing the “Add New Partner”–flow, one approach could be to simply duplicate our current “Add New User”–flow one-to-one. That might’ve even been the “easy” way to do it.

But in this particular user case, our clients are companies with somewhere between 20–2000 partners. Forcing them to add all their partners one by one would surely make us very unpopular.

Using the office whiteboard for the Partner Creation flow allowed me to sketch out the user journey and quickly generate ideas.

Forcing clients to add hundreds of partners one by one would surely make us very unpopular.

To avoid having a lot of frustrated clients, a completely new flow is being developed. The flow allows administrators to invite several partners through their emails, and sends partners a temporary login so they can fill in their own details properly. This also means partners are introduced to Siesta and will have a chance of getting to know it themselves. Hopefully they’ll discover all the benefits along the way.

The invite via email flow could even be applied to the user administration section as well, saving our clients from doing even more of the tedious, manual tasks which often comes with business systems. We also know Excel plays a huge part in exporting and importing data in between systems, so an optimised and redesign Import flow is also underway.

The Partner administration isn’t completely ready yet, but it will be soon.

Finally and lastly… We added plenty of beautiful illustrations and iconography! ✨

Conclusion

My mission from starting out at Napp back in 2017 is still ongoing, albeit not exactly how I first expected it to be.

Despite having a very long road ahead of us still, the redesign update is also an opportunity to look back over our shoulders and celebrate our current progress. Hopefully we’ll learn a lot from this update and those learnings will inspire even more redesigns and optimisations.

Looking back, I’m amazed at how much we’ve accomplished in such a small amount of time. And I’m sure that whatever challenges lie ahead, we’ll find a way to solve them.

So long as it’s not another concept change….. 😬

Thank you for reading!

Head over to Siesta’s homepage if you’re still curious about the new concept or contact us if you’re considering using Siesta for your company.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Let’s redesign the entire platform, they said. It will be fun, they said. was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s redesign the entire platform, they said. It will be fun, they said.

Cool stuff, every week

More Articles