By sketching the site maps first it enables you to get a rough idea of how it will fit together and flow, then from this point I can start developing it from there.
Visualising the flow of how I want the app to work really helped me to start developing the wireframes. I began with addressing how I wanted the initial opening home screen to appear - taking inspiration from the researched apps I have looked at and how efficiently they display that initial information you want to be met with upon opening an app.
The first option shows how it could be very minimal and un-cluttered, opening to the map and showing you your current location. The menu icon is clearly visible in the top left (definitely the most appropriate and go-to place for users to look for it); but this option simply only asks where you want to go to, as oppose to the starting point - as it assumes that you start at where your current location is.
The second option has more of a recognisable app feel, with a strip across the top with sections for searching wanted destinations and then displaying the nearest bike points in terms of a list at the bottom of the screen summarising the information for you. From considering this I am able to conclude that actually you do not necessarily need a full list of all the nearby stations as you can see on the map where they are in relation to your location so why clutter the opening screen with this information. I think it will be much easier to simply click on each nearby station to you to have the required information about that station pop up - giving you the address and information regarding its availability to pick up a bike from.
The third option shows how I can apply widget design across the bottom perhaps, have the information about the pick-up station neatly on top of the top hub, then with the hub containing the necessary icons for quick easy use. However, from first hand experience I have found that having loads of widgets becomes impractical and confusing for the user - only have the most important visible to aid the user on this particular page because my app relies mainly on working through set up step by step, each page having different purposes. For example, having the timer visible at the bottom at the beginning is not practical as it is not needed until you're actually riding your route!
Having these different options helped me narrow down on what is most important for the first page of the app and how I need to keep it concise for the simplest and most effective user experience. So I began visualising the Site Map I developed before hand...
1. Displays how you're welcomed to the app by an animated loading screen - you see the cyclist (male or female dependant on your account set up) come across the screen, partnered with the logotype above and then a personalised welcome message - I want this to be responsive to the current weather giving warning for windy and wet conditions (snowy doesn't need to be considered as the scheme would be temporarily closed)
2. The app loads and opens to the live map centralising your current location and displaying the nearest bike pick-up stations around you.
- Menu icon top left
- Refresher top right to keep station info up to date
- Search bars at the top, with a voice search feature included
- Need to develop an icon for each bike station
- Bottom right is the button to re-centre the map to your location if you stray away
3. Click on nearby bike pick-up stations for a pop up to come up at the bottom giving the necessary info - address, bikes & spaces available, and also the HIRE cycle access code button
- Need to have the selected station icon visibly different
- Upon pressing each one it automatically fills the Starting point on the search bar with the name of the station
4. Once bike code is taken note of, carry on by searching your final wanted destination. This gives you a list of nearest suggestions as you type, then select one...
5. This then displays your route to that destination on the map and then enables you to select the nearest bike drop-off stations to your destination on the map and adds it into your route.
- Icons for pick-up stations and drop-off stations need to be visibly different
6. Upon selecting different drop-off stations, same applies with the information of that station appearing at the bottom of the screen now displaying your various routes you could take and the time/distance differences.
You then confirm this by hitting the button at the bottom to see the route information.
7. Route is shown on the map but also all the information is now visible at the bottom of the screen. Details include..
- trip time
- distance
- ETA
- Calories burnt
Here there are further options to view a full list of written directions, aswell as a route settings icon and also an icon allowing you to compare your route with other available transport methods aswell (inspired by my other early concept)
8. Shows how the full list of directions slides up the screen
- very easy to follow, includes distance in-between each instruction
9. From pressing the settings icon on the previous two pages it brings up a list of customisation options as well as allowing you to share route info and ETA with friends.
10. This is the page allowing you to compare your route to other available transport methods - walk, bus & taxi
This is very efficient for the user if they find that peak usage time results in there being no available bikes or spaces to park nearby where they are going, so it compares time, distance, calories or price differences and references emissions emitted by taxi/bus routes - meaning users visibly can see and are encouraged to lead more of a healthy active lifestyle and cut down contributing to polluting the city!
11. Upon starting the navigation each systematic direction appears along your route at the top of the screen, you can see your route displayed on the map.
A stopwatch is also on-screen allowing you to keep track of exactly how long you've been riding for so you know which time slot you will fit into resulting in final payment.
At the bottom is live route info of how long is left, etc - you can also show live ETA's with friends and also select voice navigation through headphones whilst cycling
12. This page displays how the menu bar slides out from the side upon selection..
Finally a few quick mockups of a couple of these pages from the menu will appear.
The account page giving general editable information - shortcuts for home and work/place of study, and also payment options linked within the app
Recent Journeys shows how a snippet of your route on the map is visible then with detailing beneath, including - date, time slot, calories burnt from the trip and then price of time slot.
I will now take my brand identity and current wireframe mockups to a big crit session to receive feedback regarding whether it will effectively solve the problem:
"The city centre of Leeds is congested with vehicles and it doesn't provide an easy and efficient method of accurate travel. With more specific regards to pedestrian safety, pollution and the promotion of a healthy active lifestyle develop a concept for the introduction of a public bike scheme, which is introduced via a purely on-screen approach including a partnering app to aid the experience overall."
Then I need to complete the animation of the cyclist on After Effects and start applying that and the wireframes to my app design in Adobe Experience Design!
No comments:
Post a Comment