MyLocal

MyLocal is the website to get more real & local information for every people who lives in or who wants to come to Vancouver.

Responsibility
UI design, UX design, Scrum development
Created with
Adobe Illustrator, Adobe XD, Figma
See the website

Why This Project Started

This project has been started by the vision to provide fun, joy, and useful information and content for every Japanese people (or people from outside of Vancouver). We guess every people who moved to new places must struggle about how to survive life with save money, make connections, get involved in the community as much as we can.

However most of the cases we also have to think about their language or culture difference. Also, even though we have a lot of web media sites or blogs to know about Vancouver, there weren't any websites to have to look at them briefly. We thought we can resolve the problem by combining content and specific information by making a kind of portal website for every international people.

The Key Challenge

Designed whole UI/UX for a portal web app that has a chatting feature and content writing feature from scratch. It was the first time to challenge creating service from 0.

Workflow

1. Research Potential User

Most of the Japanese people who are living in Vancouver or even Canada is having open work permit or student permit. Also, most of them are either the early 20s(21-25 years old) or late 20s(29-30 years old) who have work experience in 2~3 years in Japan.

According to the statistics from the study abroad agency, the highest population of consulting and going abroad as a fact is 23~25 years old. In addition, the gender ratio for the user of open work permits was dominated around 70% by the female. Also for students, it was dominated 60% around by the female.

Referral:


research report for mylocal

2. Create Persona

Based on research I did above, I created personas for this website as these two:


mylocal-persona-a
case A: 28 years old, female, Sales for the tech industry in Tokyo, considering about transitioning her career
mylocal-persona-b
case b: 24 years old from Osaka, male, Barista in Vancouver, undecided but wants to have job which has English environment

I interviewed people who are similar to the persona with questions about concerning, hope or goal of experience in Vancouver. We also brainstormed the same idea together with teammates, with the image of "If we're in Vancouver when we're 24~26 years old" by using mindmaps. *most of the team member was 27~30 years old

mylocal mindmap
MyLocal Mindmap – click to enlarge

3. Create Customer Journey

I created the customer journey based on the result of persona and brainstormed ideas and product owner's strategy.

The key feature is:
- User can see articles with map to know the spot information even without signing up
- User can inquire couple of schools at the same time with real-time chat
- The limited coupon which is for only the user who signed up is available
- User can purchase tickets online without going to the other website


Customer journey for Erina


Customer journey for Hiroki

4. Wireframing

Based on customer journey, I created a wireframe as well. The key was the visual in the hero section. Because we wanted users to visit categories immediately which was already made when created mindmaps, we tried applying 5 categories in the hero section.

MyLocaluser flow

5. Prototyping and Mockup

I sought out proper color & typography based on persona. Because we need to reach for both female and male in 20s, I researched potential target on Instagram to consider colors and categories which they prefer to use or see. As a result, we got to the overall images below.


MyLocal mockup web overview
Click image to open Figma file
MyLocal mockup category and detail page for each genres

Considering Flow for Conversion

Article is the first touchpoint with the users. User will get into the article, and dive into details. Signup is required in case of user wants to add spot as his/her/their favourite, or in case of user wants to reserve ticket for any event introducing in MyLocal.




MyLocal mockup web spot page
Flow goes from left side to right side. if user was from search engine, first touchpoint may start from 2nd screen.

Service name and Logo

In this project, the logo and the service name was also key.
Our school has a symbolic dog. Dogs are having a strong ability to smelling something (even good or bad), and also they give us positive energy with friendly, warm and kind emotions. From our dog name "Mylo", we named our service as "MyLocal" with slogan "create service to be on their local".

I created a logo with some pattern by combining pin which is used on Map apps, and dog.

mylocal brand logo

mylocal color

mylocal typography

Result and Reflections

It was really pleasure of working with an internationally oriented team to create a huge product even in a very short time.

I noticed the recognition in between developer and designer was slightly different during working with the actual workflow. I tried to discuss to adjust the design as much as I can even if it was collapsing because of different expectation, however, I thought we'd better discuss more UI and UX flow when I shared the actual prototype rather than when the issue has come out.

Next Steps

We're still trying to improve by doing user testing together with advertisement sponsors for this service. I want to improve this website not only for just content but the actual "portal" website for every international or even Japanese people in Vancouver.

Other Projects

Z magazine

Liber

Clipboxes teaser website