.png)
![[Mockup] iPhone 14 (3).png](https://static.wixstatic.com/media/687f23_13be86b9cb234e56a3871196e79e45fe~mv2.png/v1/fill/w_243,h_425,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/%5BMockup%5D%20iPhone%2014%20(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
.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.
"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
Define
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.
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
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.
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.
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.
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.
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?"
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.
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.
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.
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.
.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
.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.
Metrics
Measuring Success
The Product is In Development
But I hope to continue to measure:
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
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. :)
.jpg)
.png)