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 initial landing page design overwhelmed users with too much text & colors. It was difficult to use with an unclear CTA.
I designed a landing page that put users' needs first and also kept business growth in mind.
UX/ UI Design
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
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
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.
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
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.
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.
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.
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?"
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.
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.
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
"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
"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.
Hi Fi Wireframes & the Next Steps
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
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.
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. :)