Adminca – Admin Panel as a Service

Summary

Mobile app publishers need to manage app content and user information to keep the data up to date. But admin panels are broken! Developers waste weeks setting it up, and the interface is often so complicated that nobody wants to use it. To solve this problem we created Adminca — the interface for your backend data.

Adminca provides an Admin Panel as a Service which allows developers to get a powerful admin panel without writing a single line of code. Creating and customizing a panel takes seconds instead of weeks. Adminca was designed specifically for non-technical users so they can view and manage their data more intuitively.

Type:

Startup with Jordan Vincent and Frank Xu

Role:

UX Designer, Product Manager

Time:

10/2015 – 03/2016 (6 months)

Deliverables:

Process Book, Poster, Video

Project Scope:

User Research, Prototyping, Usability Testing, Product Launch


Problem Space

What is Backend Data?

Data generated through or for mobile/web apps that is stored in a database.

Most mobile or web applications do not save all their data locally. The app communicates with a backend server to save or access data from the backend database.

Backend data can be:
  • User generated (e.g. a user’s profile picture)
  • System generated (e.g a user’s current location)
  • Publisher generated (e.g. a new article)

What is an Admin Panel?

An internal tool allowing the publisher’s team to view and manage all the backend data relevant to the app.

The team that owns the app needs a way to access the app data. Developers can access the backend database directly but non-technical users need a tool to access the data: an admin panel.

An Admin Panel can be used to:
  • Create new data
  • View and analyze existing data
  • Edit or delete existing data

Design Question

From our personal experience of using, building and maintaining admin panels in the past we know that admin panels are broken.

Developer Perspective

Most admin panels are built from scratch which means developers are basically reinventing the wheel. Developers waste time building and maintaining a tool that it is not core to the actual product or business.

Non-technical User Perspective

Non-technical users have to work with a poorly designed admin panel that was built on the premise of not being important since it is not customer facing. The poorly designed interface often lowers the staff efficiency.

How can we improve the experience of creating and using administrative interfaces to manage backend data?

Process

After our initial research phase we started our rapid iterative design process. During each iteration, we went through the process, and improved Adminca based on the findings from the previous round.

Research

We carried out a lengthy user research study that included 14 interviews, a competitive analysis of 13 competitors (view table analysis) , and the review of 27 online sources (online requirement analysis). We identified two main user groups with different goals:

Developer Insights

Goals
  • Develop and maintain an admin panel for team or clients to access and manage data.
  • Make sure team/clients know how to manage data through the admin panel.
  • Backup the database to ensure the app does not crash if team/clients mistakenly delete things.
Pain Points
  • Designing and building admin panels is usually not a developer’s expertise or passion.
  • Depending on the complexity of data management needs, building an admin panel can take weeks even with admin panel templates.
  • The team/clients may accidentally delete crucial data.

Non-technical User Insights

Goals
  • View data in a straightforward layout.
  • Manage data quickly and easily without asking developers for help.
  • Export data for business analytics or marketing campaign.
Pain Points
  • Current interfaces are developer-oriented, but make difficult for non-technical users to view or manage.
  • Non-technical users are often afraid of changing or updating data because they do not want to mess anything up in the app.
  • Most admin panels only export data in JSON format, which is difficult for non-technical users to use.
Read more about the idea and the research behind Adminca in this and this blog article.

Design Principles

Research insights became more than mere design principles, they became our values! Every subsequent decision we would take would have to fall in the bounds of our three values that we called the 3S:

Simple

Effortless Setup
Intuitive Interface

Secure

Data Permissions
Encrypted Credentials

Smart

Powerful Features
Smart Defaults
Save developers time, and streamline the admin panel setup process. Provide an intuitive interface that non-technical users can use without training.
Empower developers to manage data permission to ensure data integrity. Use highest encryption and security measures to protect customer data.
Provide solutions for diverse data management problems with a comprehensive feature set and smart defaults based on the user's goal.

Final Design Overview

Because our two main user groups had very different needs, we decided to build a two sided interface that could be setup and used without writing any code.
An Admin Panel as a Service
Admins can create and customize their admin panel in a matter of seconds and invite contributors.
Contributors only have access to the data management part of the interface which is customized by admins.

For Developers: Admin View

Adminca enables developers to easily set up a fully customizable admin panel where they can then invite their collaborators.

For Non-technical Users: Contributor View

Adminca empowers non-technical users to intuitively view and manage their data.

Design Evolution – Detail View

Limitations of existing solutions

Different pages for View and Edit
Users have to decide if they want to just view a record or edit it.

Opening is difficult
In most admin panels the icon to open the detail view is extremely small and located far away from the name of the record.

Loss of context
Once the detail view is open, the relationship to the original table is lost.

Our approach

The Detail View allows users to edit fields but still presents it in a clear way that makes a view-only page redundant.

Adminca provides a detail view that can be opened from anywhere in the table, because the whole row is a click target.

The Detail View opens in a side panel. This way the user keeps the context of the original table and can easily navigate to other records.

Changes from first to final version

  • A In the first version the table only allowed vertical scrolling and was limited to one column. In the second version users can scroll vertically and horizontally and can view multiple columns at once.
  • B We changed the field labels from vertical labels (on top of the field) to right-justified horizontal labels. This reduces the vertical space needed while still having the label and the field close together.
  • C We added more field type formatting options. Strings, for examples, can either be formatted as an email address, a one line text or a long text.

Design Evolution – Settings View

Limitations of existing solutions

All settings are defined through code
No other person (e.g. a product manager) can make changes to the views without involving the developer.

No easy way to customize views
Once the admin panel is in production, it won’t be modified because even small changes require a lot of work.

One size fits all
Admin panel templates and plugins only allow users to change a few settings that don’t account for all scenarios.

Our approach

Adminca lets users modify the settings through an interface rather than code.

All settings can be edited in one place andchanges are reflected instantaneous.

Adminca allows users to change granular permissions and settings for all classes and fields.

Changes from first to final version

  • A The class settings in the first version were difficult to discover. For the second iteration we adjusted the IA and moved it to the side navigation into its own section to highlight it.
  • B We simplified the side navigation by removing additional information that was distracting for users.
  • C Users can now rearrange the fields in table by simply dragging the fields. The name field stays at the top and hidden fields are shown at the bottom.
  • D Simplified the structure in the main view. Created new and easier to understand categories and descriptions. Added tooltips for each field that explain details.

Prototyping

Following a lean UX approach we started with paper and whiteboard sketches. After that we built a low-fidelity click prototype and tested it with our first users. Based on this feedback we built a higher-fidelty prototype and after that launched our MVP.

Read more about the intial product launch and a subsequent feature release in our blog.

The images show one of our whiteboard sessions, an early information architecture as well as some low and high fidelity prototype screens.

Design Evolution – Onboarding

Following our design principles, we wanted the very first experience of Adminca to be as smooth as possible. We designed and refined our onboarding flow through usability testing to help developers to get started with Adminca without prior knowledge of admin panels. The magic moment happens within a minute, when their panel is up and running and they can start managing their data right away!

1. Account Creation

We removed unnecessary fields and reduced the required information to the essential.

2. Welcome Email

Once the account is created the user receives a welcome email with additional resources. There is no need to confirm the email.

3. Intro Video

Some users were not exactly sure how Adminca worked. The video explained the main concepts again.

4. Panel Creation

Some users were not comfortable with providing their keys. We added a new tooltip that explained our security measures and why Adminca required it.

5. Onboarding Tips

We observed that some users did not know what exactly they were supposed to do next. We added a guided tour to help then get started.

6. Help Section

More detailed explanation about all of Adminca’s features are available in the help section.
Check out the demo video to get a better understanding of the onboarding process:

Outcome

We launched in January 2016 and quickly saw people from all around the world using it! Adminca is the perfect tool for web and mobile agencies. It allows them to offer an admin panel to their clients without the need for coding. The feedback we received has also been very positive:
Designed & built by Lukas Eiermann 2016
Always happy to chat .