Bike Sampa

App redesign

The project

Bike sampa, is a bike rent app focused on São Paulo city. This is a study concept that I did based on a job position challenge that Itau send me. This idea was not implemented, but I choose to follow working on it to improve my Ux/Ui process skills.

The process

My process on this study was the following:

Understand

Ideate

Analysis

Research

UI design

Old app analysis, using the heuristic mode

Pain points mapping and understanding of the analysis informations

 

 

Personas and user journey study

Sketches, wireframing and prototypes

Visual design and prototype of it

Analysis

I analyzed, the old app and mapped some problems:

1

2

3

4

Information camps with tips that disappear when you start to type, is very bad for usability since the user can be lost in what camp he is typing

Remember my password tip, is something that I don't want to check, every time I log in on the app. Is something that could be automatic, since I typed my pass one time,  bringing more facility to the user

In this register area, the facebook, google or linkedin connect, could be a better way to catch the first user data and before this social media login, the user can be taken for a new area that he can complete his register

The same colors of different buttons is a very serious usability  problem, because the user could take a time to understand "what is what" and be confused

4

3

2

1

1

2

3

This way of  stations validate is no user friendly and don't Improve usability. The user have to type the station he is, at the moment, this is a negative usability point and this part of the app crashes 76% of the time people tried to use

This is important menu, but it is very badly organized and it have the same color than the top bar,  this can confuse the user

The exit button, is in a very bad position and don't make sense a exit button in this place, because is in a "dead end" visualization point, making visualization and understanding of this button very difficult

1

2

3

1

2

The tabs are confusing, colors , layout and typography are polluting the visual and confusing the use

The map markers are very small and is difficult to touch on it

1

2

Understand and Research

Here I talked with some friends and people that use the app actively, I used  information got on the analysis and I had the follow hypothesis:

65% of the people had problems with crashes on the most important screens(login, dropping a bike, returning a bike)  and this happened more than one time with them

The app don't have a friendly visuals or navigation. Menus are confusing and very difficult to use

Stations are scarcely scattered by the city, so there is a difficult in getting a bike near

App's system makes users, type and mark informations all the time, making  navigability very difficult

 

There is a lot of difficult on getting back a bike, because the app crash in this point all the time,  people stay with the bike stuck in their digital tickets, the system does not validate that they already returned the bike, so the user stays like, if he is still using it, but he is not

Personas

I did a personas study, to map hypothesis more specifically about who could be the people are using this app

User Journey

After mapping who is using, now I did a study to understand a little more, how they are using the app:

App Map

In this phase I did a app map, to start seeing more visually how this new idea will work

Ideate

In this phase  I start the "visual" layout time, because here I will transform all Information I got on the other process, in visual design

UI design

After getting all the info about this app particularities, I did the visual layout with all my ideas in practice

The final prototype with everything going live

UI elements

Here are some elements and icons that I created to improve the user friendly navigations, usability and to add a concept on it

Thank you :)

If you want to talk more about this or other projects, let's talk :)

you can reach me on email or skype

back to the top

Back to projects

Wireframing

Wireframe is a very important process phase, because now, ideas get more clear and we have a material more visual, blended with all the information caught until this point of the process

Prototype

Bike Sampa - Itau Bike rent App

The project

Bike sampa, is a bike rent app focused on São Paulo city. This is a study concept that I did based on a job position challenge that Itau send me. This idea was not implemented, but I choose to follow working on it to improve my Ux/Ui process skills.

The process

My process on this study was the following:

Analysis

Old app analysis, using the heuristic mode

Understand

Pain points mapping and understanding of the problems

Research

Personas and user journey study

Ideate

Sketches, wireframing and prototypes

UI design

Visual design and prototypes

Analysis

It's time to analyze people problems on this app and understand why all this is happening.  Here I analyzed, the old app and mapped some problems:

3

In this register area, the facebook, google or linkedin connect, could be a better way to catch the first user data and before this social media login, the user can be taken for a new area that he can complete his register.

4

The same colors of different buttons is a very serious usability  problem, because the user could take a time to understand "what is what" and be confused

1

2

3

This way of  stations validate is no user friendly and don't Improve usability. The user have to type the station he is, at the moment, this is a negative usability point and this part of the app crashes 76% of the time people tried to use

This is important menu, but it is very badly organized and it have the same color than the top bar,  this can confuse the user

The exit button, is in a very bad position and don't make sense a exit button in this place, because is in a "dead end" visualization point, making visualization and understanding of this button very difficult

1

2

3

1

2

The tabs are confusing, colors , layout and typography are polluting the visual and confusing the use

The map markers are very small and is difficult to touch on it

1

2

Understand and Research

Here I talked with some friends and people that use the app actively, I used  information got on the analysis and I had the follow hypothesis:

65% of the people had problems with crashes on the most important screens(login, dropping a bike, returning a bike)  and this happened more than one time with them

The app don't have a friendly visuals or navigation. Menus are confusing and very difficult to use

Stations are scarcely scattered by the city, so there is a difficult in getting a bike near

App's system makes users, type and mark informations all the time, making  navigability very difficult

 

There is a lot of difficult on getting back a bike, because the app crash in this point all the time,  people stay with the bike stuck in their digital tickets, the system does not validate that they already returned the bike, so the user stays like, if he is still using it, but he is not

Personas

I did a personas study, to map hypothesis more specifically about who could be the people are using this app

Ideate

In this phase  I start the "visual" layout time, because here I will transform all Information I got on the other process, in visual design

UI design

After getting all the info about this app particularities, I did the visual layout with all my ideas in practice

UI elements

Here are some elements and icons that I created to improve the user friendly navigations, usability and to add a concept on it

Thank you :)

If you want to talk more about this or other projects, let's talk :)

you can reach me on email or skype

Wireframing

Wireframe is a very important process phase, because now, ideas get more clear and we have a material more visual, blended with all the information caught until this point of the process

Information camps with tips that disappear when you start to type, is very bad for usability since the user can be lost in what camp he is typing

Remember my password tip, is something that I don't want to check, every time I log in on the app. Is something that could be automatic, since I typed my pass one time,  bringing more facility to the user

1

2

2

3

4

1