SPRING

REDESIGN

 
 

COMPLETELY REDESIGN THE USER EXPERIENCE OF THE WEBSITE SPRING.IS, AND CONSOLIDATED 5 AFFILIATED WEBSITES INCLUDING SPRING ORIGINAL WEBSITE ITSELF INTO 1 IMPACTFUL DESIGN

Roles: UX + UI Design // Project Management 


ABOUT

-

[Project Length] 3 weeks

[Group Members] Matthew Bernard // Casey Lam // Jessica Mallett // Myself

[Deliverables] Mobile // Tablet // Desktop verisions

[Tools] Sketch // Invision // Photoshop // Keynote // Mapbox Plugin // Gif Generator Plugin

[Skills] Project Management // Time Management // Client Point-of-Communication // Presentation // Research Methodology // Competitive Comparative Analysis // Interviews Technique // Sketch // Wireframe // Prototype // User Interface // Information Architect // Sitemap // Usability Test // AB Test // Collabration with Web Developers

 


 

PROJECT BRIEF

-

Opportunity

Our client, Spring, is an organization that provides education for entrepreneurs. Spring offers courses that are made for entrepreneurs at any stage of their business from startup ideation, launching and growing the business to impacting the world. 

 

project goals

  • Redesign a responsive website for Spring, in mobile, tablet and desktop versions,
  • Increase conversation and awareness of Spring
  • Increase student enrolment and applications to programs
  • Clarify call-to-action (CTA)
  • Attract partners globally
  • Create student feedback form
  • Student account creation backend
  • Course material backend integration 

 


 

DISCOVERY

-

www.spring.is 
&
www.springu.is

Spring currently has 2 separate websites: Spring.is and SpringU.is. Our client planned to merge the 2 websites together in 2 years and asked our team to redesign SpringU.is alone. However in our research, we found many gaps and inconsistencies between the 2 websites. Information on both sites are either too scattered or repetitive in a way that neither Spring.is nor SpringU.is could hardly function properly without one another.

We suggested to our client that it would be most beneficial to Spring if we began to merge the 2 websites sooner than later. Our client agreed our suggestion and accepted our proposal.

After talking more in depth with our client, we discovered there are more websites that Spring is affiliated with: lunarmobiscuit.com, kickincubator.com and vanimpact.com.

 
 

In the end, my team and I consolidated 5 separate websites into 1 impactful design!

 


 

DOMAIN RESEARCH

-

“Entrepreneurship in Canada ranks the 2nd highest in the world. 13% of Canadians are entrepreneurs.” CBC News May 2015
“In 2014, BC ranked 1st in the country in terms of small businesses. There were approximately 382,600 small businesses operating in BC in 2014, representing about 98% of all businesses in the province." Ministry of Small Businesses Report 2015
 

Domain Research

 

We looked into different websites, reports and statistics to learn about the entrepreneurship market. We found that entrepreneurship is the No.1 choice for Canadians who want more out of their careers. However the Canadian education systems, from the earliest levels, are lacking in specific basic economic education and introduction to entrepreneurship itself. Our research directed us to think globally and build a website to attract students and partners coming from any part of the world.

 


 

COMPETITIVE COMPARATIVE ANALYSIS

-

Competitors

We have investigated different competitors. 

Globally:

 Nationally:

Locally:

We compared the similarities, differences, unique selling points and pain points across these competitors. Next, our team had a group discussion on how to make Spring stand out in the market. We wrote down different types of pain point needed to be avoided and ways to optimize good UX experiences that we both learned from our competitors.

 

Competitive / Comparative Analysis

Summarizing CC

 
 

 

INTERVIEWS SURVEYS

-

Interview Targets

We've conducted face-to-face interviews, contextual analyses and online surveys. They were completed by current students and alumni from Spring, as well as business owners from different industries. These feedbacks confirmed, also reinforced the direction and goal for our team to leap forward.

 
 

Interview Result

 

 

PLANNING

-

 

Primary Persona

Persona

After combining all the data from interviews and surveys, our primary persona Monnah Lisah has been created.

 

 
 

Site Audit

We've done a site audit of Spring.is, SpringU.is, lunarmobiscuit and kickincubator. We wanted to examine the current sites and identify any usability problems. And the major problems that we found across the sites were:

  • Broken links that didn't bring users anywhere or brought users where they weren't expected
  • Too much information on one page and missing pagination
  • Redundancy of links
  • Fragmented information 
 

Current Sitemaps of SpringU.is and Spring.is

 

Sitemap

In our new updated sitemap, we aimed for clear pagination and information consistency. A new Login page was also created for students to access online course material, student profile and student feedback. 

 
 

Updated Sitemap of SpringU.is

 
 

 

DESIGN

-

Mood Board

We created a mood board and theme by using Spring's provided branding guidelines. We aimed to strategically apply colours and text to enhance the usability, interaction enjoyment, and at the same time clarifying Call-To-Action buttons on Apply (for programs) and Request Syllabus to increase conversations and applications submitting rate.

Mood Board

 

About Spring

Awards that Spring has received, alumni and their success stories, cooperate partners, instructors as well as team members are all important informations to our users. These informations, however were presented inconsistently across the current websites. We put together a page of About Spring. Each section builds the character of who Spring is, gives a personal voice to Spring, and also helps user gains confidence in joining Spring.

All About Spring

 

Programs

In the existing program section, the 4 different programs are represented by 4 inconsistent colour boxes without descriptions of each program. The colours are lime green, neon purple, sunrise orange and cobalt blue. 

In our redesign, we updated the entire section with new iconographies, a brief summary of each program, using the primary colour from Spring and a matching orange for colour affordance.

 

Program Page

 

Program Applications

One of the project goals was to generate higher application submitting rate. Our client told us that many prospective students dropped off in the middle of the application. We ran our usability testings to found out the major pain points were that the length of the application was too long, and some questions are too intimidating, for example, "have you spoken to 30 people about your project?"

In our redesign, we had taken out the intimidating questions, divided the application into 3  pages with a progress bar for completion encouragement, and added a thank you page for sent confirmation. The successful rate of completing the application went up to 100% in our usability testings.

 

Programs Application

 
 
 

Loading Screen

To keep user engaged in case of long loading times, we created a loading screen using Spring's logo. It builds up the awareness of the brand while the four green blocks can also remind user of the four different programs Spring offers.

Loading Screen

Loading Screen

 
 

Location Map

During contextual analysis, user found the pins on the existing location map confusing. The pins are not showing any contact information or school address. Only two locations out of all the cities and countries that listed below the map have an actual hyperlink. And because it was a generic map plugin, its colour does not match with the brand.

To maintain the colour scheme, we integrated another map plugin called Mapbox. Our idea was to indicate the locations of all the schools across the world on the map, providing detail address and contact information when user clicks on specific pins, as well as highlighting the current location of user based on geo-tracking function. More importantly, with some technical help from our developers, user can scroll up/down the page without causing the map to enlarge and fill up the whole screen.

 

Location with Mapbox Plugin

 
 

INFOGRAPHIC

Users wanted to read more on the data that was presented on the website, however it was only shown in text format (300+ Alumni, 30+ Campuses and 200+ mentors) and without any links for further details.

To make data easy to read and visually appealing, we created new infographics along with actual numbers to add credibility to Spring. For future opportunities, we also recommended our client to add a link that can describe the data in detail when user clicks on the graphics.

Data was Presented with Infographics


 

ANYMORE?

-

Yes, of course there are much more about this project behind the scene. If you like to know more what I have contributed to make this project fun and successful, we can chat about it over matcha latte.