top of page

Inclusive: the First Impression

How I redesigned the landing page for a startup to meet user needs & business goals.


Inclusive is a startup using AI + Machine Learning to connect individuals with intellectual/ developmental disabilities to community classes & resources to improve their quality of life.

The Problem

The initial landing page design overwhelmed users with too much text & colors. It was difficult to use with an unclear CTA.

The Solution

I designed a landing page that put users' needs first and also kept business growth in mind.

My Role

UX Research

UX/ UI Design 





August 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


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

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.

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


Needs & Insights

Presenting & Advocating for the User

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:


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


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


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



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


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


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


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:


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


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


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

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.

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

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


Measuring Success

The Product is In Development


But I hope 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.



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:

Stay Creative

App Design for venture idea

Screen Shot 2021-10-25 at 12.48.02 PM.png
Read More

Designing the landing & about pages

device=iPad mini, style=black.png
Read More
bottom of page