Cross Device Cover

Cross-Device Design Workshop

Client: a 6 day cross-device design training workshop — Akiani & Digital Campus Bordeaux
My Role: Solo Project/ Research and Design

Brief

Design a bike rental/sharing self-service product with a seamless experience across 3 devices: desktop, smartphone and a device of your choice.

01. Overview

In our connected everyday world, how can we integrate new tools — connected watch, connected car, connected home — to the ones we are already familiar with — without adding more confusion and in-usability?

The challenge of the exercise was to create a global user experience using the characteristics of each device to improve upon the entire experience, while making sure we kept coherence, consistency, continuity and clarity.

The 6 day project planning was divided as follows:
– 1 day on benchmark / analysis / user flow / features
– 4 days on paper sketches and wireframes (lo-fi prototypes)
– 1 day presentation to the group

02. User Research — Explore & Define

Understanding Bike Rentals and Their Users

Bike rental is a subject I was not at all familiar with, so I spent quite a bit of time exploring all the websites and apps I could find. The two main bike rentals that I knew of were the Paris bike rental service « Vélib' » and the Bordeaux one « V3 ». For the project I did not venture into investigating vacation bike rentals or tour bikes, or even specific types of bikes for fun or adventurous experiences.

The Service/Product I Chose For the Project

As I started researching on the subject of bike rentals, it was clear that I was already going in one direction : City Bike Rentals. Since I would not have access to many users, and I had not used any rental system myself, I chose a subject I had seen close friends use, and that I knew my classmates used too.

When benchmarking online, I was quite surprised to see how noncontinuous the user experience for Bordeaux’s bike rental service was. There was a website under the name « TBM », and 3 different apps, with different names, which I thought were not easy to find. Finally, adding a new device to the experience was an opportunity to make suggestions to improve the desktop and app experience as well.

Benchmark of Apps and Websites

Inspirational Apps and Websites:

– TBM/ V3 website
– V3 App
– La Bonne Station (V3)
– Vélib’ website and app
– JUMP (scooters) / UBER website
– ofo app
– oBike website
– mobike website
– Vêlo Toulouse website
– Toulouse Vêlo Toulouse app (not related to website)
– AllBikesNow website and app
– Capital BikeShare app
– Lime website

A Selection of Features

Capital BikeShare — app

– Bottom right corner easy access to settings, favorites and refresh map.
– Notification feedback when the bike is docked.

Lime — website

– Reassurance with instructions on how to rent a scooter and safety information.

AllBikesNow — app

– Invitation to localize when first starting the app.
– Option to set up notifications and fine tune settings (number of bikes left or spots available).
– Display of both bikes and parking spots on the map at the same time.

Toulouse Vêlo Toulouse — app

– In notification settings, possibility to set a number of bikes left at a station to launch a warning message.

Users comments on Google Play Store and Apple App Store

“It is not always shown when one bike or no bike are left at the station”

“Impossible to locate which bike is selected when chosen from the station”

“There are no notification feedback when the bike is docked or undocked”

Identifying cross-device problems

Since I had not enough time for Primary User Research and collecting quality data about users to create Personas, I used the information I had collected in Secondary Research (indirect) to create an hypothetical user profile.

Profiles are made-up hypothetical persons created to help empathize with. Here it allowed me to imagine a person with a story, making the user less of an abstraction, and it would help me design the User Journey and User Flow.

User Profile (ad-hoc Personas)

I imagined the profile of a typical city bike rental user. She would be between 30 to 35 years old, living in the city, wanting to ride to work everyday, or using the bike to go out at night. The bike for her is a very convenient way to get around the city.

Diving into the user experience of Bordeaux V3 Bike Rentals, I let myself go quite far in questioning the subject. Some questions I thought might not fit exactly with the exercise, but I thought they would be a great answer in solving my chosen subject. I felt that before integrating an Amazon Echo Skill to Bordeaux Bike Rental service, I had to make sure that the website and app offered consistency and continuity, otherwise I would only be adding confusion.

03. Ideation & Design — Coming up with Solutions

Defining a User Story

The journey I imagined for my user – Emma – was as follows:

It is Spring now and it isn’t raining much anymore. Emma would like to ride to work these days. She knows there is a city bike rental station near her home, as she’s already rented bikes with friends once or twice before. She feels she is now ready to seriously go to work by bike and so one evening she looks up online to get a Bike rental subscription and activate the Bike Skill on her Amazon Echo — a device she uses all the time at home now that she is a mom with 2 busy little boys, it makes her life so easier! She feels a little nervous about riding a bicycle to work because there is quite a bit of traffic in the city, but all the information on the website regarding safety instructions is very reassuring and it makes her feel much more confident. Also, it seems very easy to find a station, and check that bikes and docking spots are available. Even setting up a ride home or to the gym as her favorites can be set quickly. She sets up an account, clicks the link to download the Amazon Echo Skill for her home and sets it up as well. She downloads the app on her smartphone and connects her newly created account.


The next morning as she is busy getting everyone ready, she asks Alexa for available bikes at her defined « home » station. Alexa replies with the information and offers to activate notifications for the ride to work — the ride that Emma had set up the night before — and to which Emma agrees.


At the bike station, with her smartphone Emma scans a bike to undock it. She chooses to leave the notification active as she has read on the onboarding that her phone will buzz with a notification if there is only 1 docking spot left at the station near her office. As she rides to work, she receives a buzzing notification. She knows she might have to stop to look at her phone for another station with available spots but since she’s so close to work, she decides to keep going. Luckily there is one spot left when she arrives. She stops and docks the bike, and leaves a bike rating for a future user. She is pleased that it all went so smoothly and carries on with her day.

A Device for Each Moment of the Day

3 moments of day, 3 experiences and their associated features.

User Flows

I drew the user flows for each moment/device, in order to define the sets of actions the user would go through.
This visual representation shows the steps needed for the user to accomplish the task successfully.

Moment #1: The Day Before — Desktop
Moment #2: Before Leaving the House — Alexa Skill
Moment #3: Just Before Riding the Bike, On and After — Smartphone

User Experience Suggestions

Sketches & Lo-Fi Prototypes

I drew sketches of all the screens to quickly iterate ideas and make sure they were working well. Sketching is very convenient in that it forces you to go straight to the key elements and focus on creating a logical path towards a goal. It makes Prototyping much easier afterwards because it helps get rid of unnecessary elements, or make missing elements obvious. It is also very convenient to show to people and it makes testing screens easier.

Experience #1: The Day Before — Desktop
Experience #2: Before Leaving the House — Amazon Echo Skill
Experience #3: Just Before Riding the Bike, On and After — Smartphone

Personal Reflection & Key Takeaway

I am happy I finalized the project on time and was able to present it to the group on day #6. I managed to associate the chosen features for each device and integrate them in the user journey in a consistent way. I thought it was a real challenge to present 3 lo-fi prototypes in such a short time, but it forced me to focus on key elements for a global user experience. I really would have liked to have at least a few days of observation and guerilla interviews of users. For me, not having time for primary User Research really emphasized how important it is for a project and makes all the difference. I also feel that during the ideation sketching time, co-creation workshops would have been a great plus.