top of page
Device - Macbook Air (1).png
[Mockup] iPhone 14 (3).png

Admin Portal for Inclusive

How I designed an administrator's portal for a startup connecting neuro diverse people to community classes & resources.

About

Inclusive is a startup connecting individuals with intellectual/ developmental disabilities (I/DD's) to a centralized database of community classes & resources in order to improve their quality of life.

The Problem

As I helped develop Inclusive's customer-facing content, Inclusive's administrative team consistently expressed difficulty in searching & updating the ever-growing Excel spreadsheet of classes & resources.

The Solution

I designed an admin portal where administrators can easily search for classes, update class schedules using an existing mental model (Google Calendar), and see relevant user updates at a glance. 

My Role

UX Research

UX/ UI Design 

Tools

Figma

Miro

Justinmind: prototyping tool for form fields

Timeline

August - September 2021

Shameless Self-Plug :)

"I'm quite pleased with Kim Kim's work with Inclusive. She has the ability to see & hear nuance. Not only that, she's able to humanize experiences & histories. This is one of her major strengths."

- Jillian Louallen, Founder of Inclusive

Flat iPad (1).png
Vendors on Device.png

Research

Admin Interviews

What isn't working? Why?

 

I interviewed all 3 administrators at Inclusive, asking about their past & current experiences & expectations to discover their pain points, motivations, & challenges. I collected all my findings into Miro under matching categories then highlighted key takeaways that inspired my design decisions.

Screen Shot 2021-10-04 at 5.02.36 PM.png

"Excel is fine, but the duplicates. So many. How do we prevent them?"

- Inclusive Admin 2

"There must be a better way than Excel spreadsheets, but  I don't know what."

- Inclusive Admin 1

Research
Define

Define

Inclusive Persona - Admin.png
Inclusive Persona - User.png

Needs & Insights

Focusing on the User's Journey to get to the HMW's

In order to ideate with user needs & research insights in mind, I created a POV-HMW chart. The POV focuses on the most essential needs of the Admin Persona, while the Insights synthesized the user interviews in a way that naturally led to the How Might We questions. I keep the photo of the persona & her basic info on the left, so that we don't forget at any point in the design process who we're designing for & why. 

POV HMW.png

How Might We's

In Summary:

Easy

How might we design an easy, time-saving way to search & update vendor & class information?

Prevent

How might we prevent duplicates & mistakes in the entries?​

Notify

How might we notify the admins of updates, changes, & duplicates?

Creating Personas

Admins Serve the Users

 

I created an Admin Persona to summarize the research findings and to help define and prioritize what problems to solve for.

However, since the admins are solving for the users, I also included a user persona, which I based off of the 8 user interviews I did to redesign Inclusive's Landing Page.

Ideate

Ideate

Group Ideation Session

Good Synergy, Lots of Possible Solutions

 

Although I was the only UX Designer working on the admin portal, Inclusive has a team of UX Designers working on the customer-facing website. I presented my research findings and asked them to ideate with me on possible solutions.

Research Team Meeting July 5, 2021.png

Project Planning

Prioritizing Features in a Tight Timeline

 

After the ideation session, we put the ideas on a matrix according to impact, urgency, & my ability to design within the given timeframe.

Screen Shot 2021-11-01 at 6.21.40 PM.png

Sitemaps, Task Flow, User Flows

Foundations for Further Research

 

At this point, I wasn't exactly sure how to implement some of the ideas, but I created a Task Flow & User Flow to make sure I browsed and searched for design solutions specific to the user & task flows.

Task flow & user flow.png

Sitemap

Connecting the Admin Portal to the Overall Website

 

I used the website sitemap (which I helped create with the other designers) to guide the Admin Portal features (highlighted below) because some things that the Admin updated would be shown on the customer-facing side of the website, and the Admin could see if a customer updated their information or reserved a class. 

Portfolio Sitemap.png

Design

Sketches & Big Decision #1

The Sidebar menu. Why?

 

In order to allow for growth within the admin portal, I chose to go with the side bar menu, so that more items could be added as the admin's capabilities grew.

Teaming up with the Developer

Is this feasible / functional?

 

Because this was my first time designing an admin portal, I had tons of questions, especially for the developer as I began to build out the lo-fi wireframes. I made sure to check in with the developer often & sought out continuous feedback from peers & mentors for every version, whilst keeping good examples nearby that I wanted to follow for reference.

 

More Questions Arise as I Design

 

The red notes below are all the questions that came up as I designed about functionality or "Does this make sense?"

Screen Shot 2021-10-05 at 1.29.43 PM.png

Version 2

Focus first on form fields, then a landing page.

 

I did an additional sketch as I realized I needed a landing point for the portal. This seems obvious in retrospect, but I was very focused on form fields for a time & how to design easier ways to input information or for a system to ask for information over thinking about a welcome page. I got around to it eventually, but only after looking at a lot of references.

Sketch to Mid-fi.png
V4 - Add a Class.png
Design

Test

Building the Prototype

A Mid-Fi Prototype to test form fields + inputs

 

I built out a usable mid-fi prototype where the user could fill out every form field. I used Justinmind since Figma didn't have the form field feature yet. The only part I couldn't build out was the calendar feature, but asked testers about how they have used Google calendar, their likes, pain points, & what information they prioritized.

Usability Testing

Using the HMW's as a basis for Testing

 

I tested the prototype on the 3 admins + 2 fellow UX designers at Inclusive with the initial HMW questions as test objectives:

Easy

How much time does it take to fill out? Does it feel easy? Why or why not?

Prevent

Are there enough constraints & hints to prevent duplicates & mistakes?

Notify

Are you notified of the important things for your workflow? Anything missing?

Usability Test Responses

The Positives:

"This feels better than Excel. Just more organized and less overwhelming, like it knows what it's doing for me."

"I think this could also be used for the vendors & business owners themselves since it's all pretty straightforward."

Usability Test Responses

Possible Iterations:

"I think we'll need more info in the payment section."

"Will it tell me if I spell something wrong?"

"I want notifications from vendors, too, who are our customers. Not just the users."

Iterating on Feedback

Limits in the First Phase of Development

I added more information on the payment section, then made an annotation for the developer to add tooltips if something might be misspelled, but this would only be for descriptions, dates, & times. I just added vendors update in the New Profiles section.

Screen Shot 2021-10-05 at 2.14.41 PM.png
Test
Iterate

Moodboard: Adding Colors + Personality

Saving the colors for after testing

I kept the test mid-fi because I wanted to test the form functions first. Once the functionalities were discussed in depth with the developer for feasibility, I went on to create a mood/inspiration board to choose colors and styles.

Inspo.png

UI Kit Design

Bright + Welcoming, Clear + Easy

I chose three main colors that were bright & welcoming, and would be clear & easy to use. Once they were approved by the founder, I proceeded to create a UI Kit then added color and styles to the Mid-Fi wireframes.

Admin Portal UI Kit (1).png

Hi Fi Wireframes & the Next Steps

Final Designs

Just kidding. There's way more work to be done.

 

This portal was the MVP based on prioritizing user needs within a timeframe of 1 intense month. Inclusive's actual logo has yet to be finalized & the full scope of what Inclusive can do will continue to grow as new information & data is gathered. #startuplife

Device - Macbook Air (1).png
Vendors on Device.png
Hi Fi Add a Vendor.png

Design Decisions

Using User Research to Keep Design Decisions

 

In a peer critique, some designers asked about dividing up the sections & adding more in the progress bar. However, I was able to point back to user research where all 3 users expressed frustration that they couldn't see all information at a glance. This way, they could quickly scroll through the sections and know what's expected.

Form Field Choices

Better Ways to Input Info

I also spent a lot of time researching the best ways to extract a lot of information in the easiest way possible from drop-downs to radio buttons. I'm still not sure that many of the form sections are the best, so I will continue to be on the lookout for useful methods.

Next Steps

Metrics

Measuring Success

The Product is In Development

 

But I hope to continue to measure:

Metrics

A decrease in duplicate entries. At least, 80% decrease.

A decrease in the time it takes for an admin to fill out information due to pre-filled information for existing vendors.

A decrease in the time it takes an admin to search for necessary information.

Reflections

Reflections

It's the climb...

Embracing Ambiguity &

Bracing Myself for another Startup Journey

Because this startup is still in its starting stages, there were a lot of unknown factors, including timelines & the different responsibilities. Thankfully, I have experience working for a tech startup. Although I was in marketing then, much of the communication skills & navigation skills applied.

 

The key was to embrace the unknowns, but clearly define & communicate my own expectations. Get used to surprises/ roll with the punches. I learned the importance of asking lots of questions before getting started on anything, but even then, there were several unforeseen bumps in the road, but that's what makes the journey fun. :)

Read the next case study:

ACCESS

Responsive Redesign for local nonprofit.

MOCKUP_Phones (2).jpg
Read More
Stay Creative

App Design for new venture pitch

Frame 24 (1).png
Read More
bottom of page