Daniel Chew
Gen I art.png

Gen I

Responsive web design

UX / UI DESIGN

Gen I art.png
 
 
Gen I logo.png
 
 

Generation Innovation (Gen I) is a social startup community, resource hub, and mentorship network. The aim is to connect people with world changing ideas to the mentors and resources that will help turn their passion projects into reality. The organization was founded by Maggie Cheung and Cheryl Ng. I worked together with them, along with a team I put together to fully design a responsive website. My role specifically was to help craft the visual design, including working on the user experience and prototyping.

TIMEFRAME: 13 WEEKS

TOOLS: SKETCH, ILLUSTRATOR, PHOTOSHOP, PRINCIPLE, HTML, CSS

 
 

CHALLENGE

The first step was to identify the problem and conduct the preliminary research to understand if there was really a need for this platform.

PROBLEM

Based on our research, we established that the main problem within the social enterprise sector was:

Lack of physical resources, support and community for social entrepreneurs in North Toronto

We also found that:

  • 80% of social entrepreneurs identify access to capital as the major barrier to success.

  • Of the 22 programs offered through the Ontario Centres of Excellence (OCE), only one supports social enterprises.

  • Of the 151 government funding opportunities listed on the Canada business network, only 8 include support for non-profits.

 

MARKET

What’s driving Social Entrepreneurship?

Youth Entrepreneurship is Changing.

  • The social enterprise movement is led by a new wave of entrepreneurs who want to balance earning a profit with making a positive social impact.

    Consumer Demand is Changing.

  • The number of socially conscious consumers has risen by 170 per cent in the last 20 years

 
Screen Shot 2019-01-08 at 5.46.12 PM.png

SOLUTION

To form a community of social entrepreneurs, and co-design an accelerator program with current social enterprises, industry professionals and the government. This will:

  1. Equip social enterprises with solid business fundamentals. Build a strong foundation to serve the communities of today and tomorrow.

  2. Connect social enterprises to markets and capital to grow and scale. This will unlock new markets and capital to help maximize their potential.

  3. Demonstrate the value of social enterprise and social finance. Promoting their potential to investors, government, and communities.

 

Building an organic social entrepreneur community is the first priority. The goal of the website is to educate upcoming social entrepreneurs with resources, bringing attention to key stakeholders in the community, and most of all co-designing the social accelerator program. Workshops, networking events, and information sessions for the community will be organized and promoted through the website in order to start bringing purpose to profit in business.

GOAL

 

PLANNING

SKETCHES

My partner and I went through a series of sketches and iterations to understand what content and features would be necessary for the website.

 

USER PERSONAS

From our research, we constructed 2 user personas to represent our target users:

Persona 1 represents an experienced Executive Director who has been working with social enterprises for many years. She represents users who are looking to mentor young professionals interested in social innovation.

Persona 2 represents a young, ambitious worker who is intrigued about social causes, who also wants to make a difference in the world.

 

USER PERSONA 1

USER PERSONA 2

 

USER JOURNEY MAP

A journey map was also constructed from the point of view of a social innovator to identify pain points in the user flow that would enable us to understand which areas of the website were the most crucial to design.

 
 

Click to view larger

 
 

From our user journey map, we were able to pinpoint the features absolutely needed for our webpage.

These were:

  • Call to action - Register for events and buy tickets. This also needs to include upcoming event dates and information

  • About - Essential for users to know what services we provide and what the organization is about

  • Event Page - To allow users to sign up and look for upcoming events

  • Mission Statement - Users need to know the organization’s values and their long-term goals and objectives

  • Contact Us - To keep users updated with events and to have them join the Gen I community

 

DESIGN

Before we started with any designs, we had to come up with Gen I’s branding. We had a couple of meetings with the team to come up with a colour palette and to figure out how we wanted the overall website to look.

We tested out a number of different colour combinations, fonts and button layouts. We examined colour theory and researched different meanings of colours and how they are perceived. We then came up with a few different style tiles to present to our team.

 
 

LO-FI WIREFRAMES

Once we had a final style tile approved, we then started designing low fidelity wireframes on Sketch. We tested a few variations of the design and played around with the layout.

Test of various headers:

 

We made some annotations on what needed to be improved and continued to test it with our team and users.

The testing process helped refine our progressive disclosure, making sure that users had the information they needed before proceeding. Because the site was targeting several types of users, each with their own needs, it was essential to thoughtfully plan out the information architecture.

 
Lo-fi wireframe

Lo-fi wireframe

 
 

Pre hi-fi wireframe

 

HI-FI WIREFRAMES

We made a couple of iterations and revisions as we tested the page with users again.

Feedback from Users:

1.     “Lack of consistency in the design”
First iteration of the wireframe had a very formal and and rigid look that didn’t think fit with the friendly concept that we were going for. Receiving this feedback early on in the design process allowed us to pivot.

The next iteration included more geometric shapes and banners to create more cohesiveness to the design and more white space to allow the content to be taken in.

2.     “Not enough white space used”

To help with the amount of information being presented, we utilized a combination of a Z and F shaped reading pattern to improve legibility.

The Z pattern was used so the user could scan from top left to top right creating a lead for where the eyes are directed. An F pattern was utilized for heavier text sections, as eyes tend to scan better with this pattern.

3.     “Event banner was very forgettable”

The event banner was very important as this was where our users would be redirected to get tickets to our client’s events. However, the event banner did not stand out to users as they would often scroll past this section.

For our final design, we used a simpler 2 block calendars as it would allow the client to interchange the text and information easily without the need to create new banners for every new event.

 
 

Iterations of Hi-fi home page

 

Hi-Fi Design 1

Hi-Fi Design 2

Final Design

 
 

FINAL PRODUCT

Once we had the final design approved by our team, we made some small final changes and had our team’s web developer code the website.

gen-i-fixed-3.gif