![](https://static.wixstatic.com/media/7c757e_90745de2f4f1413f85d07d70f84171c4~mv2_d_2500_1400_s_2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_90745de2f4f1413f85d07d70f84171c4~mv2_d_2500_1400_s_2.png)
UX / Visual Design
Case Study -Redesigning VIRTA EV Charging app
The project is a self initiated case study project to understand the process of re-designing an app. Other goal is to showcase my design skills to give a clearer view how I can learn and perform with mobile design as well as understanding the specifications related to visual design.
The inspiration for this project emerges from the desire to learn and improve as a designer. In this case my role is to understand the current app information architecture along with user flow and improve the usability aspects along with designing the wireframes and screen layout for ios platform.
The project is done in 2 week time with end deliverables as a working prototype made in sketch and invision.
![](https://static.wixstatic.com/media/7c757e_ca9d15695177480b8dce6845cd8ea689~mv2.png/v1/crop/x_46,y_33,w_1020,h_393/fill/w_60,h_23,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_ca9d15695177480b8dce6845cd8ea689~mv2.png)
Company /
My Role /
Research / Concept/ UX / UI
Case study /
2 week short project
Year /
2018
![](https://static.wixstatic.com/media/7c757e_cb867dff6f7140ad831af3e04a556d28~mv2.png/v1/crop/x_0,y_111,w_1160,h_1088/fill/w_49,h_46,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_cb867dff6f7140ad831af3e04a556d28~mv2.png)
Background
Virta is a EV charging company based in Finland. The company provides platform as a service (PaaS) and one of their services - VIRTA Mobility helps to connect EV drivers to nearby charging stations.
The mobile and web application allow users to
-
Find available charging station
-
Reserve a charging point
-
Start charging and pay automatically
![](https://static.wixstatic.com/media/7c757e_d8962f1d951e44d7b401c9cb0284ebdf~mv2_d_2980_1473_s_2.png/v1/crop/x_104,y_0,w_2781,h_1473/fill/w_48,h_26,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_d8962f1d951e44d7b401c9cb0284ebdf~mv2_d_2980_1473_s_2.png)
Original App Screenshots
Process
Changes made related to addition of Filter, Reminder, Invision prototype and comparative view
1.Research
Understanding the task flow
![](https://static.wixstatic.com/media/7c757e_a16de544ce4146678b7839337c6c7d23~mv2_d_2988_3896_s_4_2.jpg/v1/crop/x_120,y_87,w_2714,h_3782/fill/w_141,h_196,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_a16de544ce4146678b7839337c6c7d23~mv2_d_2988_3896_s_4_2.jpg)
User Journey and Touchpoints
![](https://static.wixstatic.com/media/7c757e_55b97d20c7e04c3f86eec133d46316e5~mv2_d_9600_4068_s_4_2.png/v1/fill/w_49,h_21,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_55b97d20c7e04c3f86eec133d46316e5~mv2_d_9600_4068_s_4_2.png)
Bench-marking (competing apps)
![](https://static.wixstatic.com/media/7c757e_33977b85a9714affba9a5bc3f765e349~mv2.png/v1/crop/x_53,y_0,w_4299,h_980/fill/w_49,h_11,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_33977b85a9714affba9a5bc3f765e349~mv2.png)
2.Design Opportunities
Key problems
Bad information architecture. Slack interaction flow. Repeat of information. No presence of Filter to reduce the un-necessary information that might not be relevant for certain users while making a selection.
​
The overall architecture is unbalanced. Interactive experience is not smooth. Visual design is not supporting the brand guidelines.
​
Mobile app and website style (for registration) looks completely different.
Usability & Visual issues
![](https://static.wixstatic.com/media/7c757e_a587c9c6dbae465094ff1edb6beb2b04~mv2.png/v1/crop/x_25,y_17,w_1221,h_292/fill/w_48,h_11,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_a587c9c6dbae465094ff1edb6beb2b04~mv2.png)
Consistent locations of the buttons on the MAP screen and List Screen.
Less visibility of stations indicated on the select station screen
Repeat of information on the socket available / maximum power output and cluttered looks
![](https://static.wixstatic.com/media/7c757e_a587c9c6dbae465094ff1edb6beb2b04~mv2.png/v1/crop/x_25,y_361,w_1221,h_263/fill/w_49,h_10,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_a587c9c6dbae465094ff1edb6beb2b04~mv2.png)
rating goes for each Machine (1042, 1043…or for ONE Fixed location
Under Settings- Icons there is repeat about the PLUG TYPES and SOCKET TYPES?
The website link used for registration looks very different to the app look and feel.
3. Concept Design
Proposed changes
Users be able to charge at home and/or at work (referred to as private or semi-public charging) and to manage the chargers they use. The users are expected to be able to:
​
-
Select location
-
Reserve charging point
-
Start and Stop charging
-
Get charging status
-
Get charging summary
​
​
Additional changes
​
Use of Filter as a function to help users to see only relevant informations.
Reducing un-necessary step and repeated information
More consistency related to brand colours
​
​
![](https://static.wixstatic.com/media/7c757e_f75f24b25c2e4828a02a977434cbf532~mv2_d_5960_2946_s_4_2.jpg/v1/crop/x_18,y_476,w_5912,h_2012/fill/w_147,h_50,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_f75f24b25c2e4828a02a977434cbf532~mv2_d_5960_2946_s_4_2.jpg)
<white boarding>
< Rough Wire-frames>
Initial concept / wire frame
![](https://static.wixstatic.com/media/7c757e_843de0a1d932408eaa3b83b0f1c4e08f~mv2_d_2988_2556_s_4_2.png/v1/crop/x_185,y_223,w_2580,h_2137/fill/w_88,h_73,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_843de0a1d932408eaa3b83b0f1c4e08f~mv2_d_2988_2556_s_4_2.png)
4.Final Concept
![](https://static.wixstatic.com/media/7c757e_3d0f6a8336a445e0a2d73379c8eee37a~mv2.png/v1/fill/w_78,h_159,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_3d0f6a8336a445e0a2d73379c8eee37a~mv2.png)
![](https://static.wixstatic.com/media/7c757e_7a544de9efed4278a11f72cbf81ee520~mv2.png/v1/crop/x_8,y_0,w_842,h_1766/fill/w_75,h_157,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_7a544de9efed4278a11f72cbf81ee520~mv2.png)
![](https://static.wixstatic.com/media/7c757e_a135118f13c34168867dad0541eb4967~mv2.png/v1/crop/x_0,y_0,w_864,h_1763/fill/w_79,h_161,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_a135118f13c34168867dad0541eb4967~mv2.png)
![](https://static.wixstatic.com/media/7c757e_fbf5e9befc3e46ceb4bf24f602950fd9~mv2_d_1740_3272_s_2.png/v1/crop/x_24,y_86,w_1690,h_3178/fill/w_48,h_91,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_fbf5e9befc3e46ceb4bf24f602950fd9~mv2_d_1740_3272_s_2.png)
Comparative views
Current version
Re-designed version
![](https://static.wixstatic.com/media/7c757e_e2189e114a2c40fe8b7c9287f180e6c0~mv2_d_3480_4514_s_4_2.png/v1/crop/x_529,y_356,w_2864,h_4051/fill/w_86,h_122,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_e2189e114a2c40fe8b7c9287f180e6c0~mv2_d_3480_4514_s_4_2.png)
![](https://static.wixstatic.com/media/7c757e_f0a73dcebaa9414795a95e4423ee3154~mv2_d_5960_2946_s_4_2.jpg/v1/crop/x_342,y_69,w_5276,h_2809/fill/w_190,h_101,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/7c757e_f0a73dcebaa9414795a95e4423ee3154~mv2_d_5960_2946_s_4_2.jpg)