Daniel Chew
Gen I on Ipad.jpg

Copy of Gen I

UX DESIGN

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.

GEN I

ROLE: UX Designer YEAR: 2018/2019

 

OVERVIEW & RESEARCH

The first step was to identify the problem and conduct the preliminary research to understand if there was really a need for this platform. 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

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

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

 

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.

GOAL

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.

 

PLANNING

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

From our research, I 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.

IMG_5243.JPG
IMG_5242.JPG
 
USER PERSONA 1: MENTOR/ EXPERIENCED WORKING IN SOCIAL ENTERPRISES

USER PERSONA 1: MENTOR/ EXPERIENCED WORKING IN SOCIAL ENTERPRISES

USER PERSONA 2: YOUNG PROFESSIONAL INTERESTED IN SOCIAL ENTERPRISES

USER PERSONA 2: YOUNG PROFESSIONAL INTERESTED IN SOCIAL ENTERPRISES

 

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.

Journey Flow.jpg

Based on the purpose of the website, we understood that there were a few key elements that were necessary for our users. 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)

  • Vision (Users need to know the organization’s values and their long-term goals and objectives)

  • Sign up with email (to keep users updated with events and to have them join the Gen I community)

We decided that for the time being, the website would only need a single page, as the main objective was to get users to sign up for events. Any additional pages we felt would have been unnecessary to include at this point of time.

 

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.

WIREFRAMES

Low-fidelity 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. 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 1/2

Pre hi-fi wireframe 1/2

Pre hi-fi wireframe 2/2

Pre hi-fi wireframe 2/2

 

Hi-Fidelity Wireframes

We made a couple of iterations and revisions as we tested the page with users again. We collectively came to the decision that our first design of the landing page was too structured and lacked creativity.

Keeping the same elements and structure of our original wireframe, we designed a completely new user interface and tested our landing page again with our team and users. The design was well received and the response was positive.

 

Hi Fi Design 1

Hi Fi Design 2

 

FINAL DESIGN

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.

Hi-fi Landing page 1/2

Hi-fi Landing page 1/2

Hi-fi Landing page 2/2

Hi-fi Landing page 2/2

Gen I on Ipad.jpg