Smart is Strong Website Re-Design: Building a User-Friendly and Dynamic Website

DURATION

Nov. 2018 - Dec. 2018

ROLE/SKILLS

Designer / User Research, Responsive Web Design, HTML & CSS

PLATFORM

Web

TOOLS

Atom, GitHub, Sketch

Founded in August 2017, Smart is Strong (SiS) is a non-profit organization run by an interdisciplinary group of women at Cornell University. This foundation is dedicated to empowering young women through education, and aims to make education accessible and affordable for all female students, especially those from disadvantaged backgrounds.

SiS was our client, and we completely redesigned their website. The aim of the redesign was to help in the organization’s goal to expand their presence on Cornell’s campus, promote their cause in a way that attracts viewers, and build a sustainable platform for more consistent content updates and audience engagement. I primarily worked closely with our client on the design side. Below you’ll find my design process and my key contributions.

After meeting with members of the organization, we discovered that our client’s goal was to widen their reach in the Cornell community, and promote their cause more effectively to garner interest.

Through the analysis of our client’s website with user testing, we discovered a few main issues with the old website:

• Lack of brand clarity: As a new organization, SiS lacks not only a presence on campus but also an online presence; much of the organization’s content and information was not organized in the most ideal way. Many students didn’t know exactly who they are, what they do and what they stand for. In other words, we wanted to design and organize the website, both visually and in terms of content, to create a strong brand identity.

• Not a dynamic design: As the club’s activity continues to pick up, they needed a more change-friendly website in order to update it consistently with informational content for their audience. In other words, we wanted to make it easy to maintain and support continuous content updates.

As an organization, they are aiming to become more than just a volunteering non-profit student group--the members are looking to spread awareness and offer a new perspective about their cause to Cornell students. We wanted our redesign to accommodate that.

First, I had to define the target audience of the organization to develop the information architecture and overall organization of the website. We found that the audience of this club:

• are interested in community service.

• are interested/would like to learn more about causes such as women empowerment, equality, and education.

• are busy college students looking for fulfilling ways to get more involved on campus.

• primarily use email to stay updated.

Because we defined our target audience to be students who are looking for meaningful ways to use their spare time, we decided to emphasize content about the club’s past and upcoming work, such as newsletters, blog posts, and past events.

However, because we discovered that students like to receive regular updates about a club through email rather than having to visit the website itself, we decided to emphasize the “Subscribe” feature, where users will be able subscribe to receive weekly, informative emails about updates from the club.

Finally, because the target audience is primarily looking to participate in opportunities for a good cause on campus, we wanted to emphasize the content that informed students about how they could become an active member of the organization.

Layout of Website

My team and I used our newly defined objectives to develop the organization of the redesigned website. We first jotted down the website’s key requirements:

We then used the card sorting method to start to develop the information architecture and overall flow of the website:

We ended up having three major categories of information on the pages we developed:

• Home, About, and Executive Board pages are general information about the organization's goals and members.

• Projects, Events, and News are under a category called What We Do. It includes what the organization has been “saying and doing” for their cause. News encompasses all consistently updated information (blog posts and newsletters).

• Subscribe, Apply, and Donate are calls to action/ways for people to help and get involved in the organization or learn about its cause.

  
  

Design Aspects of Website

After sketching low-fidelity and iterating medium fidelity mockups of the initial layout of the website, it was time to design the visual characteristics of the website.

I developed some of the key brand attributes for the website that I wanted to incorporate into the visual design, and created a moodboard for the design:

• Feminine

• Ambitious

• Rewarding

• Aspirational

• Empowering
  

Other Visual Characteristics: Use of Hero Images

A picture can speak a thousand words! As this club is still working to gather attention from students, I found that the use of hero images attracts viewers the most, as it drives visitors further into the site by giving them a peek beneath the surface, and gives it an immediate personal touch.

Other Visual Characteristics: Organization’s Logo in Nav Bar

As a way to strengthen the organization’s brand, we wanted to emphasize on the organization’s logo. We decided to incorporate the logo by placing it at the top center (in the middle of the nav bar) to attract the attention of viewers and ingrain this visual representation in the minds of viewers.

We proceeded to develop high-fidelity prototype of the website. I wanted to ensure that our design is informative, dynamic, and memorable. Here are the key attributes of the final product:

Branded Nav Bar

Logo is centered and at the top of the page in nav bar to emphasize the brand of the organization. The nav bar is fixed at the top (even when scrolling) to make navigating through the website as accessible and efficient as possible.

Users can get a sense of the organization without a single scroll. With the click of accessible buttons, users can check out the organization’s work right on the home page, as well as subscribe/apply to get more involved.

All About SiS

The entire foundation of SiS is built upon its mission statement. We wanted to emphasize the different aspects of what makes SiS so special in one comprehensive and informative About page.

Dynamic Design

We created a more dynamic design by incorporating a sidebar on the News page so that their audience can easily look and click through SiS’s current and past posts, and to make it easier for content creators to consistently update the website.

Never miss a story

Consistent engagement is important to grow an audience. Their audience can now easily subscribe to SiS’s content in 2 easy steps.