Redesign Kainos.

Refurbish a website to bring wonderful product experiences.

Background

Kainos was founded in 1974 by Dorothy Phillbrick. Kainos was inspired by the needs of her son, Jim, who has autism. Dorothy and her family dreamed of an environment that would help Jim live a full and joyful life with opportunities to contribute to his community. The mission of Kainos programs and services is to provide a wide variety of residential, vocational and related services, with the highest quality training and support, to adults with intellectual disabilities so that each individual may maximize his or her potential and become an active member of the community. Kainos is a non-profit organization, and users can contribute by donating through the website.

Challenge

Kainos is in need of a new website and brand that helps adults with developmental and intellectural disabilities while motivating audiences for donations and volunteers to sign up. How the design should look like so the website looks warm and inviting for a community like Kainos? How can I incorporate user interface to encourage individuals in need of support to let them feel welcomed? How can I help a website increase donations and number of volunteers?

Approach

These methodologies help my design decision and build a solid foundation in order for restructuring overall usabilities and user interface.

  1. User Interview
  2. User Needs
  3. Competitive Analysis
  4. User Persona
  5. Feature Prioritization
  6. Information Architecture

Solution

The new design is built for different viewports to make the website more user friendly. Create a distinct and compelling brand identity, yet introduce freindly and welcoming UI design theme. Users feel more secured donating by the sophisticated UI design. The page for volunteers includes detailed information to motivate users to sign up. There is a page to tell a story about the origin of Kainos and introduces purposes of the organization.

Role

Principle Product Designer (Aug 2020 - Ongoing) - Freelance
Design
UX Research, UX Design, Product Design, Logo Design, UI Design Kit
  1. Refurburished a brand identity.
  2. Improved usability across the platform.
  3. Designed a responsive website to be more user friendly.
Development
HTML / CSS, Bootsrap, WordPress, Stripe / Paypal Checkout Form
  1. Hand coded HTML/CSS using a bare minimum bootstrap framework that is essentical to use WordPress
  2. Made each page customizable directly in CMS for my client by handling the skaleton of HTML structures using WP snippets.
  3. Impremented a donation form with Stripe and Paypal transaction.
Tools
Sketch, illustrator, Photoshop, Microsoft Visual Studio, WordPress
Project Team
  1. Naomi Okubo (Principal Product Designer)
  2. Andrew Frisch (Executive Director)
  3. Stephanie Guinasso (Sr. Project Manager)
  4. Dave Golden (Business Advisor)

Design Process

I discover the purposes of redesigning the website, define the user persona and site requirements, design solutions in the form of low to high fidelities and develop a website by transforming the design into pixel perfect code structures.

Pixel Perfect Code Viewport Friendly Cross Compatible Develop 4 Design Interation Wireframe & Wireflow UI Kit Design 3 User Persona Feature Prioritization Information Architecture Define 2 Discovery Interview User Interview Competitive Analysis Discover 1

Research

Kainos’ main purpose of redesigning the website is passionately to deliver the support needed for adults with intellectual and developmental disabilities. I focused on discovering core issues such as the current Kainos’ pain points and what they are looking for in the new design. Each one of these researches determines my design decision and that help me work efficiently.

User Interview

  1. Who are the main competitors and how do they serve their users?
  2. What features do the competitors include?
  3. What UX practices do competitors approach in their websites?
  4. How do competitors accomplish the donation and volunteer pages?
  5. What are the current problems and pain points for Kainos?
  6. What are the goals for Kaninos in the new design?

User Needs

  1. Clarity. Bring into focus Kainos’ core value proposition.
  2. Consistency. A common language for how to speak about Kainos services
  3. Centralization. Provides a baseline of messaging for communication efforts.
  4. Connection. Educates internal constituents about what Kainos does.
  5. Community. Enables others to speak informatively about Kainos.

Key Findings

Pain Points
  1. The donation process isn't clear because users don't know if they can donate by one time or monthly. It makes users hegitate to donate.
  2. The landing page doesn’t convey any messages or contents for what the website is for.
  3. What UX practices do competitors approach in their websites?
  4. Lack of information motivating users to sign up for volunteers.
  5. The website is very dated and is hard to use and confusing overall.
Feedback
  1. Wnat a blog page and start posting activities and events in the post.
  2. Want a pages for detailed services.
  3. Want a page to introduce about Kainos.
  4. Want a subscription form.
  5. Want a partnership page to introduce who closely work with Kainos.

Competitive Analysis

The founder shared a list of competitors, five of which shortlisted as the strongest to analyze for the comparative research based on notoriety, visual design, and feature offering.

Key Findings
  1. Donation button is on the top right in the header.
  2. Featuring what they do in the landing page.
  3. Blog and News aggregation in the bottom of the landing page.
  4. All the competitors has their blogs in the landing page.
  5. he designs are humble yet bold and deliver very clear messages.

User Persona

I created a primary persona based on my research phase. Throughout the redesign of the website, I referred back to this persona to ensure that I’m staying aligned with the most important problems that need to be solved and to help inform my design decisions.

User Persona

Feature Prioritization

After I discovered what the users expect, what the organization needs, and what the competitors do, I went through ideas and discussed the implementation feasibility for each. I took the extra step of categorising these problems into broader epics with visibility into the key areas of the website that needed to be addressed from a usability standpoint. This process helped me prioritize usability issues in order of need and shaped the product prioritization.

Information Architecture

A sitemap was created based on the structure of competitor’s sites and Kainos’ goals. This helps me understand the interactions in order to restructure a whole website.

Information Architecture

Design Iteration

Low to Mid Fidelity Wireframes

With Kainos’ mission and pain points in mind, I began with a grayscale wireframe. This allowed me to focus on the hierarchy, overarching themes, and structure of the page without worrying about color schemes yet. I paid attention to how different content pieces would be arranged in each page. The challenge was to convey clear messages in each section while maintaining warm, welcoming and sophisticated design.

Kainos Wireframe
screen
Kainos Wireframe
screen

Problem Solving

Landing Page
Kainos Wireframe
screen
Problem 1

Donation process in the original design confused users by having two different donation buttons next each other.

Solution

Based on the key findings from competitive analysis, I placed the donation button at the top right on the header.

Problem 2

The original landing page was so cluttered that it was hard to know what to look at.

Solution

The main actions that Kainos expect by users are right under the hero (volunteer, partner and donation). Each section will navigate users to a detail page.

Community Connection Page
Kainos Wireframe
screen
Problem 1

Lack of information of the service.

Solution

Describing what Kainos does with a confident voice would help users take an action for volunteer and donate.

Problem 2

There was no specific information about Kainos' specialities.

Solution

Introduing detailed specialities with actual photos would welcome adults who need supports.

Branding

Since Kainos has been building their brand identity with the original logo and colors, I kept the logo design approach similar but made it more warm and impactful. The first iterations of colors were mostly light and muted. After this initial exploration, I realized the brand would be best served by a strong, confident voice, which would be reflected by dark, bold, high-contrast. colors.

branding

UI Kit

Having received a thumbs up on the logo branding and general approach to the page, I began experimenting with different color, typography, and imagery.

UI Kit

Final Design

The final design was made with the use of gradients, textures, and patterns to really emphasize the company’s unique branding and to give the visuals a lasting impact.

Results and Next Steps

Results

The Executive Director emailed me next day after launching the new design. He delighted to tell me that he had received a big amount of donation. I felt very content and confirmed that the design decision that I made was successful.

I also had a final meeting to hand off the design with the board of directors along with the team. The board of directors were very impressed with the new designs. These were the feedback I received from them.

  1. The design is very modern, warm and welcoming.
  2. The website conveys clear messages for all types of users.
  3. The donation button is very easy to spot.
  4. The donation process is very straight forward unlike how it used to be.

Next Steps

My job is to maintain and update the website accordingly as a Freelance Principle Product Designer for Kainos.

  1. Help posting blogs
  2. Update members of the leadership accordingly.
  3. Update partners and job openings when requested.
  4. Help sending emails to users who have been subscribed.
Let's work together