Hollingworth Center Redesign

___

html/css , javascript , graphic design , UI/UX design

As the web designer and lead web developer, I helped redesign and develop the Center site, Preschool site and the Science camp site of the Hollingworth Center.


Problem Analysis of the Previous Design

Not mobile-responsive;

Not using energetic and vibrant colors to attract users;

Information is plainly stacked on the page, i.e. the design doesn't contribute to enhancing the readability and enforcing the hierarchical structure of the sites;

Sub-menus do not stay on the page when the user moves to the inner pages, making it difficult for the users to navigate the whole site.

Previous Design


Screenshots of the Redesigned Sites:

When the nav bar collapses, it will be evenly divided into three columns.

See Launched Site

The menu sublist in the left column is styled under the same design principles.

See Launched Site


Google font 'Lato' has a very soothing and fresh look.

See Launched Site

The feature picture cards demonstrate information clearly and attracts users' attention.

See Launched Site


Modal cards display all different themes neatly.

See Launched Site

Paper fabric-like background attracts users' eyes. Featured cards have stylish icons that appeal to the younger audience.

See Launched Site


Last work

___

TC Web Redesign

Web design

Redevelop mobile-responsive websites for TC Columbia


front-end , UI/UX design

PopularMovies

Android

A tablet-optimized app that helps users discover popular movies


content provider , tablet , api

Hollingworth Redesign

Web design

A fresh-looking responsive design targeting younger audience


responsive , graphic design

Stock Hawk

Android

Functionality implementation and UI/UX improvement on an existing app


improvement , accessibility , locale , library

BestNote

Android

A simple cloud-sync note-taking Android app


Parse SDK , cloud-sync , note-taking

WeStory

Web design

An online collaborative storytelling platform


casual learning , storytelling , Parse SDK , responsive design

Edtech Summit 2015

Web design

A simple yet informative mobile-responsive conference site


responsive , bootstrap , vibrant colors

Scroll top