Mariana Tek Admin UI Kit

Mariana Tek - Admin / Developer Portal

During my time at Mariana, I both directed design on the Admin platform, did design work myself and built a full design system (examples pictured above). Not only that, but I also worked with a small team to build out a Developer Portal, where external developers could build features and add them into the Mariana Tek platform.

Director of Design
  • Design / UX
  • Prototyping
  • Some User Testing

Admin Example Project

Admin is a very complex product, allowing fitness studios to do everything to manage their businesses. Studios can, for example, add and/or manage memberships or credits, have their staff clock in and out, check clients into classes, manage duplicate accounts, etc… I worked on many features and improvements in this system. This example below is one of the many.

In the Mariana Admin system, adding products a was very complex process. Pieces of functionality appeared when least expected, and adding a product was a very labor intensive and time consuming task. I greatly simplified this process by adding things like bulk actions. I assessed, advised and worked with the team on what we could and should build as an MVP and also provided future additions for sprints down the road.

Mariana Tek 2 screens from admin platform

Process

Processes changed based on the feature or functionality we decided to build. What is not included in the below example is the coordination and presentation of findings, designs, etc… to other team members, and exec staff.

Discovery

Gathering information on what we know, have heard, etc… sometimes doing user interviews

Majority of the time my User Researcher did this work

Occasional Functionality Analysis / Discussing MVP

Next, I found patterns for the pieces of functionality that users would be familiar with and work best for the feature. This allowed us to have potential MVP discussions early on.

Myself

UI / Design / Prototype

Based on everything I had seen and heard, I used the UI kit that I created to build out comps as well as a prototype for testing purposes.

Myself

Qualitative Testing

We often tested the designs to validate them. Testing smaller pieces together and larger pieces of functionality alone.

Majority of the time my User Researcher did this work

Coordination with Dev Team - Building Components

I always insured the developers were involved from the beginning but once they started building, I worked even closer with them to insure what was built met user expectations.

Myself
Developer Portal create account page
Developer Portal create apps page
Developer Portal initial screen for apps
Developer Portal getting started page

Developer Portal

With a small team, I built out a system for external developers to contribute to Mariana Tek’s platforms. The goal was for external developers or companies to be able to contribute features to Mariana's system that are either outside of Mariana's core features or was something that the external company specialized in (e.g. Vimeo adding funtionality into Mariana's system, instead of Mariana's staff building a video platform).

This system allowed developers to make an account, get access to the information they needed, e.g. sandboxes, build apps and request permission to push their app(s) to individual studios or eventually, an app store.

Redesigned Pages

Finally, I redesigned many pages in the Mariana Admin system and provided ideas for what external developers could build in Mariana's system, allowing for easier partnerships.

Roster printout with more information
New roster page
New daily schedule page