1 of 19

KSCC

Website Redesign

9.5.2020

Haejin Suh - haejinsuhh@gmail.com

Sam Lee

Sunny Lee

2 of 19

Content

01 Context & Goals

02 Pre-Research

03 Key Insights

04 Current Practices

05 Website Analysis

06 Key Features

07 Website Builder Comparison

08 Next Steps

3 of 19

The Set Up

01

4 of 19

Context & Goals

OMCFC / KSCC Website Redesign/ Context & Goals

Context

The KSCC is an organization that provides elderly citizens all over Southern California community by hosting different classes.

Due to COVID, all of these classes have been cancelled, leaving many of our elderly citizens isolated.

Link here | Link here

Goals

  • Redesign current website with an easy to navigate online learning experience

  • Improve overall web navigation & visuals

  • Help elders feel connected through learning

5 of 19

Pre-Research

Context

With a specific age range of our target demographics, we researched topics on UI/UX(User Interface & User Experience) for older audiences.

OMCFC / KSCC Website Redesign/ Pre-Research

Resources

  • Toptal - Age Before Beauty – A Guide to Interface Design for Older Adults

  • Medium - UxDesign.CC - What designing for seniors has taught me

6 of 19

Key insights

OMCFC / KSCC Website Redesign/ Key Insights

1. Visually contrasting UI/UX.

Similar variations of color may go unnoticed for older users. Increasing overall font sizes to a minimum of 16 px and color contrasts will help elderly users who may have visual impairments.

2. Do not use slangs or jargons.

Clear UI language is key because certain slangs, “phonetics, and wordplay can create challenges to certain age groups”

3. Easy and short sitemaps.

“Ui navigation system needs to be even more straightforward to facilitate the user journey.”

4. Everyone loves beautiful products.

Don’t underestimate senior users and focus too much on utility without creating visually captivating design. Everyone loves a good design!

5. Less experiments.

Similar to the concept of “Don’t make me think,” the UI/UX must be clear enough that users don’t have to keep experimenting to find the page they want

7 of 19

The Now

02

8 of 19

Current Practices

Context

To observe our current challenges, narrow down feature additions, and remap the site navigation, our team analyzed the current website practices.

OMCFC / KSCC Website Redesign/ Current Practices

Current Sitemap

Current Website Review

Heuristic Evaluation

  • Top logo takes up too much space
  • Ineffective navigation bar - placement & visual
  • Inconsistent language options
  • Ineffective use of site navigation
  • Ambiguous buttons/images
  • Random empty content pages
  • Lack of font hierarchy
  • No clear page layout
  • No cohesive calendar for classes
  • No functional footer

9 of 19

Website Analysis

Context

Our team also analyzed website analytics provided by IONOS(current website provider) to adjust our plan for the website redesign.

OMCFC / KSCC Website Redesign/ Website Analysis

10 of 19

Most Frequently Visited Pages

OMCFC / KSCC Website Redesign/ Website Analysis-01

Do not use slags or jargons.

Clear UI language is key because certain slangs, “phonetics, and wordplay can create challenges to certain age groups”

Key Insight

  • “Contact Us” should be accessible easily (currently a subpage under about us)

11 of 19

Highest Bounce Rate

OMCFC / KSCC Website Redesign/ Website Analysis-02

Do not use slags or jargons.

Clear UI language is key because certain slangs, “phonetics, and wordplay can create challenges to certain age groups”

Key Insight

  • Many users’ last page before leaving the website is “Contact Us.” This reinforces the previous insight on the page’s need for easy access

12 of 19

Browsers

OMCFC / KSCC Website Redesign/ Website Analysis-03

Do not use slags or jargons.

Clear UI language is key because certain slangs, “phonetics, and wordplay can create challenges to certain age groups”

Key Insight

  • 2 out of 3 most commonly used browsers are mobile
  • New website redesign should also be catered towards mobile users

13 of 19

Key Features

Objective

In order to proceed with the new sitemap and possible switch of the website provider, our team decided to narrow down the key features needed for the redesigned website.

Except the 4 narrowed down listed key features, everything else the website needs seemed to fit the criteria of every website provider (ex: simple introduction page, buttons, etc.).

OMCFC / KSCC Website Redesign/ Key Features

Key Features

  • Calendar & Event system

  • Big storage

  • Easy to navigate Navigation Bars

  • Good translation between desktop to mobile

  • Easy switch between languages

14 of 19

Website Builder Comparison

Website Provider

15 of 19

OMCFC / KSCC Website Redesign/ Website Builder Comparison-01

IONOS

SQUARESPACE

WEBFLOW

WIX

Ease of Use

4

4

3

4

Editor

3

4.5

5

4

Mobile Editor

X

Core Features

3

4.5

4

5

Storage

Unlimited

Unlimited

Unlimited

2GB

Pricing

$179/year

$144/year

$144/year

$156/year

Final Review

Chromebook of website builders - restrictive, lacking core elements

Apple of website builders - easy edit, clean, restrictive

Linux of website builders - big learning curve, very customizable

Android of website builders - customizable

16 of 19

Pros:

  1. Clean & cohesive visuals
  2. Intuitive editor that’s hard to fail
  3. Core features in basic plan

Cons:

  1. Limitations with customizations
  2. 2 week trial - no upgrade, lose all content

Final Recommendation:

Squarespace

OMCFC / KSCC Website Redesign/ Website Builder Comparison-02

** We recommend WIX if:

  • The current web designer for KSCCLA needs the ability to customize every aspect of the website
  • Willing to upgrade to either Unlimited $204/year or Pro 264/year

17 of 19

The Future

03

18 of 19

Next Steps

1. Sitemap

We are working on creating a new sitemap for a simpler, clear, and concise navigation through the website

2. Wireframe

After creating our sitemap, we will create a wireframe (bare bones of the website) to lay out content and functionality on a page which takes into account user needs and user journeys. This step will involve KSCC for their feedback on our recommendation.

OMCFC / KSCC Website Redesign/ Next Steps

3. User Interface

With the wireframe in place, we will create a visual language for the website that will be cohesive and simple. This include choosing fonts, website colors, button shapes, and etc. This step will involve KSCC for their feedback on our recommendation.

4. User Testing

With few members, we will be testing the usability of the website for iterations.

5. Final Website Redesign

After receiving feedback, we will make iterations and create our final website redesign for approval.

19 of 19

Thank you!

9.5.2020

Haejin Suh - haejinsuhh@gmail.com

Sam Lee

Sunny Lee