DATE
April - July 2022
![passenger%20mockup%20without%20background_edited.png](https://static.wixstatic.com/media/86cd5f_2ad776fc0cc14d36b399947f8ce8257f~mv2.png/v1/fill/w_678,h_581,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_2ad776fc0cc14d36b399947f8ce8257f~mv2.png)
Passenger One
Carpooling app - UX design Internship
DATE
Jun - Aug 2019
TEAM
Project lead
UX/UI Internship (Me)
Front-end developer
Back-end developer
RESPONSIBILITY
UX research
Prototyping
User flow
User testing
Brand building
TOOLS
Adobe XD
Miro
inVison
INTRODUCTION
Passenger is a carpooling app that aims to drive the world towards more cost-effectiveness and environmentally friendly. With this platform, people can match each other as either drivers or passengers to share the same journey. As to encourage people to have a carpool, the users can collect "leaf points" so as to receive some discounts at the gas station or have a car repair in return.
Passenger is an award-winning startup that is funded by the Swedish Energy Agency and is also funded by the EU through the European Institute of Innovation & Technology.
PROJECT GOAL
-
To enhance the existing app to achieve a better level
-
To prototype new functions for the app
-
To redesign the app so as the app could reach the real market in two months' time
TARGET USER
Drivers and passengers in Sweden
THE CHALLENGES
Passenger One is a small team based at MINC, a start-up house located in Malmö Central. There are 3 team members working on the project, CEO, a front-end developer and a back-end developer. When I joined them in June 2019, I was the only person who was responsible for the UX design role as well as digital marketing. According to their project schedule, the app would be presented to their sponsors by the end of Aug 2019. Therefore after I joined the team, I started immediately working on redefining the app with very limited time.
REFINED THE APP FROM THE LOGO
Passenger One is a start-up founded in 2016, they decided to rebrand their app by start changing the logo and the colour. As blue is the theme colour, so I have tried two versions.
![passenger old logo.png](https://static.wixstatic.com/media/86cd5f_0c79755322964aa28ae38cc967b49e13~mv2.png/v1/fill/w_384,h_139,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/passenger%20old%20logo.png)
The original logotype
Colour: #16BAED with gradient
The edges are round which makes the logo seems not trendy enough and the icon cannot present clearly the theme
![Passenger-logotyp-liggande-rgb-blue#2361](https://static.wixstatic.com/media/86cd5f_f1d5f984fafc494085ad4f177dbc2083~mv2.png/v1/fill/w_341,h_68,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Passenger-logotyp-liggande-rgb-blue%232361.png)
New logotype - Version 1
Colour: #2361FF
The Icon combines Passenger + Place + Communication together. The whole logo changes the round edges into sharp cut angles. I tried this colour which gives a trendier feeling to the brand.
![Passenger-logotyp-liggande-rgb-old blue-](https://static.wixstatic.com/media/86cd5f_e527eb89490c47708848fa0670c84e3b~mv2.png/v1/fill/w_341,h_68,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Passenger-logotyp-liggande-rgb-old%20blue-.png)
New logotype - Final Version
Colour: #16BAED with gradient
The same concept from version 1, but the colour has changed back to light blue which our CEO thinks is better to keep the original colour.
![advert1.png](https://static.wixstatic.com/media/86cd5f_db9b244b7e62477a9912ebce6458a086~mv2.png/v1/fill/w_196,h_196,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_db9b244b7e62477a9912ebce6458a086~mv2.png)
![advert2.png](https://static.wixstatic.com/media/86cd5f_3f2b2800a88a437495c970873585a02b~mv2.png/v1/fill/w_196,h_196,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_3f2b2800a88a437495c970873585a02b~mv2.png)
![advert3.png](https://static.wixstatic.com/media/86cd5f_1f0b4f40a1844d38a0831d49193d8603~mv2.png/v1/fill/w_196,h_196,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_1f0b4f40a1844d38a0831d49193d8603~mv2.png)
![advert4.png](https://static.wixstatic.com/media/86cd5f_1c05b871af684d94af053265fe61daf6~mv2.png/v1/fill/w_196,h_196,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_1c05b871af684d94af053265fe61daf6~mv2.png)
![advert1.png](https://static.wixstatic.com/media/86cd5f_65c8619c527c421aa01286245527b5d6~mv2.png/v1/fill/w_196,h_196,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_65c8619c527c421aa01286245527b5d6~mv2.png)
TWO ROLES IN A SMALL TEAM
When working in a small team, it is common that people usually have more roles than expected, during my internship, I worked even in digital marketing such as making Facebook ads, Google ads, and banners that are shown above.
THE FIRST EXPECTATION FOR THE APP
The boarding screen is very important to all of the applications as they usually will give the very first impression to the users. The first task that the CEO asked me to do, is to redesign the onboarding screen, which he wanted to have more graphics and more consistency for the brand.
The previous design:
![Onboarding (Splash Screen).png](https://static.wixstatic.com/media/86cd5f_4c6ced1042b64c02b3e06b1d26e57a45~mv2.png/v1/fill/w_300,h_534,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Onboarding%20(Splash%20Screen).png)
![podcast Walkthrough 1.png](https://static.wixstatic.com/media/86cd5f_c05d5ba1c9f04d90aeb107905f8ed288~mv2.png/v1/fill/w_235,h_509,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/podcast%20Walkthrough%201.png)
![podcast Walkthrough 2.png](https://static.wixstatic.com/media/86cd5f_700fcef475cd485a8509afee68315a8e~mv2.png/v1/fill/w_235,h_509,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/podcast%20Walkthrough%202.png)
![Onboarding #1.png](https://static.wixstatic.com/media/86cd5f_5a7747b65d9e4b0a884ff0671384e59d~mv2.png/v1/fill/w_300,h_534,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Onboarding%20%231.png)
![podcast Walkthrough 3.png](https://static.wixstatic.com/media/86cd5f_0cfb96edb24e49c8968edaf634f4bd39~mv2.png/v1/fill/w_235,h_509,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/podcast%20Walkthrough%203.png)
![podcast Walkthrough 4.png](https://static.wixstatic.com/media/86cd5f_cd9135d37b734887bb8e729c67007955~mv2.png/v1/fill/w_235,h_509,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/podcast%20Walkthrough%204.png)
TALKING TO POTENTIAL USERS
In order to tackle the problems and search for instant comments, we have done a small user testing with our neighbour tech companies and they have provided some feedback for the consistency and the unidentical brand style.
It is not easy to identify the brand.
It is a lack of feature.
The font size can be larger.
FIND OUT THE PROBLEMS
After collecting valuable feedback from our users, we realised that most of the users think that the design was fine, but it felt a lack of identification and the users can hardly remember the app as their style is so alike to the others.
So based on the feedback and have set some targets for refining.
-
To have a consistent style for the brand
-
Enhance the integration between the steps
-
Try to give an overview picture of the app
-
Reduce the clicks
![Onboarding screen sketch](https://static.wixstatic.com/media/86cd5f_7a47fbe5057f43aba8fbd43f4bb676fa~mv2_d_1422_1892_s_2.png/v1/fill/w_472,h_628,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202019-07-07%20at%208_22_42%20PM.png)
REDESIGN THE ONBOARDING PAGES
To be able to redesign the UI and Visual part of the onboarding page, I tried to focus on the main colour of the app and the contents/functions that "Passenger" would present when the app first greets its users.
I illustrated the onboarding journey by drawing graphics instead of using photos, and with my graphic background, I have drawn four illustrations to feature the functions of the app.
-
Point-to-point destination
-
Easy Ride
-
Environmentally friendly
-
Money and Time Saving
![Onboarding screen 1.png](https://static.wixstatic.com/media/86cd5f_c991a61b54ab4a27813455279efd10da~mv2.png/v1/fill/w_230,h_497,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Onboarding%20screen%201.png)
![Onboarding screen 2.png](https://static.wixstatic.com/media/86cd5f_5f1d444727874bac8eecd9cdfd65e9d5~mv2.png/v1/fill/w_230,h_497,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Onboarding%20screen%202.png)
![Onboarding screen 3.png](https://static.wixstatic.com/media/86cd5f_cbc44ab2e9884211b1c7d33e50c55bae~mv2.png/v1/fill/w_230,h_497,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Onboarding%20screen%203.png)
![Onboarding screen 4.png](https://static.wixstatic.com/media/86cd5f_44a4f3669c0a410a9d0b6af693c601b4~mv2.png/v1/fill/w_230,h_497,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Onboarding%20screen%204.png)
SECOND TASK AFTER THE UI/VISUAL REDESIGN
After the features are redesigned, the CEO asked me to redesign the LOGIN/SIGN UP process for them.
The previous design:
![Favourites_-_Home_Address_â_1.png](https://static.wixstatic.com/media/86cd5f_669e3f53c95541659b33a632b5486af2~mv2.png/v1/fill/w_270,h_584,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Favourites_-_Home_Address_%C3%A2%C2%80%C2%93_1.png)
![Favourites_-_Home_Address_â_2.png](https://static.wixstatic.com/media/86cd5f_706e963e677e4c7c9f63eec87b4d7118~mv2.png/v1/fill/w_270,h_584,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Favourites_-_Home_Address_%C3%A2%C2%80%C2%93_2.png)
![Profil – 1.png](https://static.wixstatic.com/media/86cd5f_7b0d8fb7ad7f40f9bf05ad939c485228~mv2.png/v1/fill/w_270,h_584,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Profil%20%E2%80%93%201.png)
![Bil – 3.png](https://static.wixstatic.com/media/86cd5f_67f05f94e9724ca29f38a74d6d9d2332~mv2.png/v1/fill/w_270,h_584,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Bil%20%E2%80%93%203.png)
![Bil – 2.png](https://static.wixstatic.com/media/86cd5f_47dff6a570dd4dadaa0a401ad3d1c7e6~mv2.png/v1/fill/w_270,h_584,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Bil%20%E2%80%93%202.png)
The feeling of the original design is quite low-fi and incomplete. The whole experience and impression give people an insecure feeling. In order to redesign that, I tried to reconsider the order of the LOGIN/SIGN UP process as well as to refine some details like the size of the buttons.
![Sign up- Login page.png](https://static.wixstatic.com/media/86cd5f_a42baa96102e404a938254311e23ec4f~mv2.png/v1/fill/w_204,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Sign%20up-%20Login%20page.png)
![Sign up page-Driver vs passenger.png](https://static.wixstatic.com/media/86cd5f_178da464f4554a1cacd3166ffebb440c~mv2.png/v1/fill/w_204,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Sign%20up%20page-Driver%20vs%20passenger.png)
![Driver sign up.png](https://static.wixstatic.com/media/86cd5f_c87aef8c102a488a85a2065871b632ce~mv2.png/v1/fill/w_204,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Driver%20sign%20up.png)
![Driver sign up-personal information.png](https://static.wixstatic.com/media/86cd5f_7f1fcb63d2b64031a5e1ebc5141481b6~mv2.png/v1/fill/w_195,h_422,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Driver%20sign%20up-personal%20information.png)
![Driver sign up-car information.png](https://static.wixstatic.com/media/86cd5f_3cce01cb81ed40ddbe1ec035283b2e80~mv2.png/v1/fill/w_204,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Driver%20sign%20up-car%20information.png)
![Driver sign up-driving license verificat](https://static.wixstatic.com/media/86cd5f_e7a81d252c324977b16d829e02bf8692~mv2.png/v1/fill/w_204,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Driver%20sign%20up-driving%20license%20verificat.png)
![Driver sign up-account verification.png](https://static.wixstatic.com/media/86cd5f_1dda35e6a9bc47338a66c139af57c646~mv2.png/v1/fill/w_204,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Driver%20sign%20up-account%20verification.png)
![Driver sign up-congratulation.png](https://static.wixstatic.com/media/86cd5f_16f3724f38764d52b22cb3c583de8466~mv2.png/v1/fill/w_204,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Driver%20sign%20up-congratulation.png)
RESPONSIVE AND SECURITY DESIGN
During the SIGNUP process, users need to choose their role as passenger or driver. So as to give them a few minutes to consider or in case they are unsure, there is a slide button for them to choose their role.
There is a process bar showing the progress which can also give a clear picture and a more secure feeling to the users.
As the app has to be connected to the users' phones for security's sake, there will be a verification step which can secure the account with the right phone number.
ONBOARDING SCREEN AND
THE LOGIN/SIGNUP PAGE
I used the theme colour to connect the whole process of login, users can reach the login/signup process with only 2 clicks.
When reaching the login/signup page, the page will either slide up for the sign-up or slide down for login.
GOT INSPIRATION FOR AN ADDITIONAL FUNCTION
Although we work as a small team, we have regular meetings every Tuesday so everyone can report on the working process and bring up some new ideas to the table.
As an intern, I join every discussion actively and when I work more on the app, there are more ideas come up that has the possibility to enhance the app. And in my week 3, I got the inspiration for having a community page for the organizations/ companies so that the app would have more regular users and the users could also have a bigger connection platform.
Here are some sketches when I presented the new idea to my team.
![Community page sketch](https://static.wixstatic.com/media/86cd5f_6195736a45944883a7c82b592d32dec9~mv2_d_3024_3931_s_4_2.jpg/v1/fill/w_475,h_618,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_4418.jpg)
![Community page sketch](https://static.wixstatic.com/media/86cd5f_3065f014aba14d5d8332e874de242656~mv2_d_3024_3488_s_4_2.jpg/v1/crop/x_181,y_0,w_2539,h_3488/fill/w_450,h_618,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_4417.jpg)
![Screenshot 2019-07-21 at 11.08.54 PM.png](https://static.wixstatic.com/media/86cd5f_30ba28d2d830406dbeb4fde4586d9b4d~mv2_d_2110_1872_s_2.png/v1/fill/w_980,h_869,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_30ba28d2d830406dbeb4fde4586d9b4d~mv2_d_2110_1872_s_2.png)
![Community page prototypes](https://static.wixstatic.com/media/86cd5f_543f02230f5d4803a5766c924a810926~mv2_d_2112_1908_s_2.png/v1/fill/w_976,h_882,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202019-07-21%20at%2011_09_58%20PM.png)
USER CAN BUILD THEIR CONNECTION EASILY
This function aims to connect users from the same organisation/company together. The app could cooperate with big companies as some of the companies might have transportation compensation/subsidies for their employees.
COMMUNITY PAGE
Allow users to build travel groups
through the app, including
private or company use
REFLECTION
This was a valuable experience that allows me to work on a solid project. I have learnt a lot during the process, especially in this small team, everyone works closely together, and shares ideas and thoughts. Although it was stressful catching up on the schedule, it was a really fun experience.
And thanks to this internship opportunity, I met a lot of people who are also working in tech and perhaps it would help to develop my future career in the UX designer field.
Want to know more? Contact me!
![Screenshot 2019-07-21 at 11.08.54 PM.png](https://static.wixstatic.com/media/86cd5f_30ba28d2d830406dbeb4fde4586d9b4d~mv2_d_2110_1872_s_2.png/v1/fill/w_6,h_5,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202019-07-21%20at%2011_08_54%20PM.png)