I have developed the app in the most considered way I can, which will increase user experience and efficiency of the way it solves the problem of congestion and pollution in the city centre. Hoping it will encourage all users to strive for a greener city and also a more healthy-active lifestyles through doing so!
The design is consistent throughout, displaying the Logotype across the top bar at almost all times (apart from navigating through the menu and its features). The type used, as discussed previously, is just variations from the type family Open Sans. I make use predominantly of the weights standard for main body texts and then bold for the headings and main pieces of information. It is a very legible and clean typeface whose consistent and rounded form fits the vectorised design style perfectly.
Throughout the app the top bar and a lot of objects make use of the schemes pastel orange - making this as consistent and recognisable for users as possible. It features on objects such as the pin-marker for the Bike Stations, also featuring on the smaller buttons throughout the app, as well as on the messaging bars within the live messaging service on the Help Tab. The complimentary green from the colour palette also provides the perfect contrast throughout the app, providing little accents on sliding tabs and within my icon design.
As you are setting up your route, you come into contact with a consistently placed white information box which pops up at the bottom, fitting into the bottom section of the screen comfortably, not covering any essential information on the map and also still appearing consistent with the similar white box at the top of the map which acts as the search bar / direction prompter whilst navigating. Notice how I have approached these windows within the app with a solid, contrasting white background to stand out against the map; and also how all corners of these windows are smoothly rounded off adding to this clean, vectorised feel which takes away any harsh/sharpness - fitting into its context within the app in a more approachable way.
First, I'm going to summarise the slide-out menu and show features hidden away in there. To get there you simply tap the universally recognised hamburger icon top left...
'Your Account' includes everything about you - necessary editable contact details for the scheme to work properly, favourite shortcuts allowing you to set your most travelled to places so it provides a shortcut for you when setting up a route.Payment methods are displayed, also alongside where your free rides are stored and stacked up for your next rides.
The information on this page is broken up very nicely with the use of the light grey as a background colour between sections. I should have made use of this more in the other app tabs that have a lot of writing, as it effectively breaks it up for the user and makes it more digestable.
I was also going to create an interface to be at each docking station alongside the app. This was going to be for the people who are new to the scheme and may not have access to the app - the interface would offer an instant payment option allowing them to pay with a credit/debit card at the machine and receive there cycle hire release code that way and then get charged once docked at the other end of their journey. But due to poor time management and the overflow of certain areas of my project I have not been left with enough time to complete this function - it would definitely play a vital roll in the scheme but I am going to have to submit the project being entirely focused on use in conjunction with the app.
Here is the simple breakdown to how to go about using the scheme in conjunction with the app. This page in-particular does feel like a whole lot of writing, which can be very daunting for users and result in them skipping past it and not engaging properly. If I had more time to re-visit this page and adjust it, I would definitely try and make the instructions with more interesting visual aids, and break the three sections up with the imagery and light grey backgrounds seen on the 'Your Account' page previously.
As discussed in research I wanted to include a section on the app which encourages promotion and sharing with friends but also resulting in a reward scheme for riders. Similar to other apps, riders can send out invitations to their friends to come and join the community; if they accept both the friend and yourself receive a free ride which you can stack up for your next rides (displayed in the 'Your Account' section).
Leeds tours was introduced just as a consideration mockup of how I can better cater for tourists and people who just wanted to explore the city more and use the scheme for leisure. In the real app, the links would lead to pre-set routes with different focuses - letting you explore different aspects of the city also informing how long each route should take, thus how much it will cost and also the distance and calories burnt - making it feel like more of an informative workout!
The 'Help & Safety' section includes a very useful live messaging service, allowing you to get in touch with the OnYerBike help team and report issues with bikes, etc, quickly and effectively.
On the next tab of this section I have included the necessary safety information required for when cycling in busy city centres, also informing users of cycle courses for new riders ensuring everyone is considered.
So to begin hiring a bike and then planning your route, the map centraliser (bottom right) will automatically open to your current location zoomed in. This shows you all the nearest bike pick-up stations to you..
By tapping through them notice how the selected station now has a green outline. Also it automatically sets this as your starting point, also showing you live information about the station including - address and how far a walk it is from you, the amount of bikes available and amount of spaces to drop-off available. This is represented through the little bike and unlock icons. To refresh the information you use the refresher icon top right. And to re-centralise the map if you stay away you always use the icon bottom right.
The next step involves obtaining your free cycle hire release code, this is easily done and is only valid for 10 minutes at your selected pick-up point. It prompts you to make a note of the six digit code, as you will need it to unlock your bike.
Next, you search for your wanted destination. Here you can make use of the microphone icon and use your voice to search. It brings up your nearest most appropriate search results as you type, making searching easy. It would be here that you can easily start typing 'Home' or 'Uni' or 'Work' dependant on the user and it will shortcut you to that address on the map without having to type it out every time.
Once you have specified your destination, I have developed the concepts from the wireframes in the sense that it now shows you this location zoomed in first, so you can better flick through the nearest bike drop-off points to your destination. The final destination is displayed on the map as the downward arrow, so it is not to be confused with the drop-off points.
Again, you can flick through the drop-off points and have access to live valuable information regarding the amount of spaces available at that station. It also gives you the address and gives a written summary of how long the cycle will take, how far the distance is, if there is any added walking time afterwards to complete the journey to get to your destination, and then the calories burnt from the trip overall.
Using the small right facing arrow in the top right of the info box, it slides you over to the transport comparison section of the app. Where you can put OnYerBike to the test against other transport methods in the city, giving regards to time, calories burnt, emissions emitted and overall price. This feature is especially useful if on peak times the scheme is completely busy at your desired locations it gives you the next best option of transport for you.
From the previous page, when ready, hit the route button at the bottom and your map will zoom out to display your different route options (shown beneath). It will give you the varied information of each route as you click on it, again with regards to calories that will be burnt from the route, the bike drop-off station you are going via to get to your destination and then amount of time the route will take and distance in bold.
Tap start to begin the navigation. Now your directions will appear as you go at the top of the screen, with direction icons for prompt and efficiency whilst cycling (want there to be a connector on the handle bars of all bikes to safely allow navigation through the city in conjunction with the app).
The bar at the bottom includes all necessary travel info, such as time remaining of the journey, distance, ETA and then the running stopwatch of how long you've been cycling (keeping track for payment at the end).
The blue arrow in the circle still represents your current location and will progress through the route with you as you go.
By clicking the 'follow full directions' at the bottom of the bottom tab on the previous page, a slide up of all written directions becomes available so you can plan ahead or choose this option to navigate with instead.
By pressing the three dots on either of the last two screens it gives you some extra options for your travels. You can share your live ETA with friends and also select the directions to be verbally spoken to you through headphones as you go. This does raise questions of health and safety but most cyclist do cycle with headphones in anyway - so aslong as they are alert!
A feature that needed incorporating was to actually show how the app will automatically alert you with push notifications when bike stations become unavailable/available whilst cycling along the way. As this would be problematic whilst cycling if you arrived and only then found out there is no space - and you are stuck with the problem of having to find a new station. By introducing a notification which will automatically do it for you it will make it much more efficient and a better experience for users, and I can also include how if it does happen towards the end of your route you will be granted extra free time to find a new station so your price is not increased.
By tapping through them notice how the selected station now has a green outline. Also it automatically sets this as your starting point, also showing you live information about the station including - address and how far a walk it is from you, the amount of bikes available and amount of spaces to drop-off available. This is represented through the little bike and unlock icons. To refresh the information you use the refresher icon top right. And to re-centralise the map if you stay away you always use the icon bottom right.
From the previous page, when ready, hit the route button at the bottom and your map will zoom out to display your different route options (shown beneath). It will give you the varied information of each route as you click on it, again with regards to calories that will be burnt from the route, the bike drop-off station you are going via to get to your destination and then amount of time the route will take and distance in bold.
The bar at the bottom includes all necessary travel info, such as time remaining of the journey, distance, ETA and then the running stopwatch of how long you've been cycling (keeping track for payment at the end).
The blue arrow in the circle still represents your current location and will progress through the route with you as you go.
As you can see from this screenshot, the current location has changed and all the details too with regards to progressing through the route, also how the app has automatically moved you to the bike station at the bottom of the Headrow instead, adding the extra walking time onto your ETA.
Here is a zoomed out view in XD, in prototype mode, showing how all the layers are linked to eachother.
Beneath also shows are clearer, more zoomed version of this for the menu bar, showing just how easy it is to mockup apps on this software!
Beneath also shows are clearer, more zoomed version of this for the menu bar, showing just how easy it is to mockup apps on this software!
No comments:
Post a Comment