System design
After I had finally thought of an idea and concept I started designing how the application system would work. From the research I did on other applications I was able to get a general feel of how successful apps were designed to be navigated.
There is a set of steps you have to design before your skip is advertise or you find an advertised skip; because I am only designing the aesthetics I am not fully informed if my system would be viable to be developed. I would need to speak to a developer if I wanted to get this system produced.
After I established how the system would work and in what steps the user would encounter in order, I started designing what would need graphically displaying. Examples are drop down boxes, input fields, buttons, icons and headings.
Design
I started designing the identity of the application along with the actual system layout.
Logo Development
I began working on a possible logo. These were initial ideas based on the pirate theme. Straight away I knew that the pirate theme was cheesy. I carried on trying to make something that was balanced. Something that represented the skip, acquire hidden treasure and also the sea.
User Experience - Start page
All the pages Below I designed were originally mocked up from the design sheets I did. I had already thought about the options and sequences of pages.
I began designing the application opening page. This would be the page that shows up while the application is loading. This is what most apps have, basically a loading page. This is common in the context of mobile/tablet applications and contains logos, developers names and application version numbers.
This was the next page I designed which is super simple. There were originally two options. One option for the user to find a skip and one option for the user who wants to advertise a skip.
The yellow colour scheme wasn't really thought about but just a starting point. I did think it was linked to construction and was the typical colour of skips.
A more neutral background colour which I preferred.
It became apparent that I hadn't thought about what feature would allow the skipper who was returning to check the status/edit an existing skip advert. I needed something from the homepage which would allow them to quickly navigate to that page.
I added the icon in the left bottom corner. I am using existing icons that I downloaded. Its possible that if I increased the length of the brief I would design my own icons.
Here you can see the icon in the left from a view that it has been clicked. You can view current active skips, rate the application and find out about commercial skips.
A few adjustments to the colour scheme. I added this navy blue and also the orange. Orange is an industrial colour and also the navy blue.
Details page
The first page that requires the user to enter the details necessary to find a skip. The first field was the distance the user is willing to travel to find a skip from there current location. This would need the user to allow the application to use GPS.
The second field asks the user to input the material they are looking for. This leaves the search term open. I was thinking about how I could possibly enhance the way the user search for terms. I like predictive search terms based on the availability of the material. So for example if the user started typing 'Plaster b' the field would automatically suggest Plaster board based on the resource being available within the application boundaries.
You also have the back and forward buttons at the top which is just simple navigation that most apps utilise.
Again I started using the grey background colour with the darker grey. you can see what grid i'm using as well.
I added the explanation to the distance field because of the nature of how people interpret data input. I was trying to make it as universal as possible.
Changes: back.forward buttons and applied the new colour scheme.
Results page
The second page allows the user to look through the results and find the materials they want. The user simply has to touch one of the results to navigate to the next page. If there are no results they can change the search boundaries instead of going back a page.
Colour change
I had to change the layout slightly. I reduced the size of the result headings and also removed the instructions for the distance input. After the user understands the previous page and how the distance field works I honestly believe they can remember how and what it does. Why clutter the page with unnecessary information.
Colour scheme change. I started adopting a method to the colour scheme. Orange being a functional button with the blue as sign to input data.
After the user clicks on the previous results from the search, the application allows them to view the result in more details with the function of navigating to the source using Google maps or Apple maps.
You can see the photos that skip users have uploaded and also the address. You have the distance from your current location along with the date posted/date ending.
All I did here was changer the colour again to the grey.
I changed the layout of the images because they were taking up to much space. I found by arranging them horizontally it allowed me to get the space I needed. I reduced the size of the result titles and also changed the colour of the bar. The navigational arrows also changed to the thinner ones I was I began applying to all of the pages – I feel they look cleaner and less apparent.
I only changed the colour scheme here
Maps
I thought that in built or linked maps were essential as I find the effort of inputting an address manually can be tedious. The idea was to allow the user to simply click on the navigate button forwarding them to a screen with either Google maps or Apple maps.
This feature allows the GPS to send a push notification based upon the location of the user. I wanted to be able to ask the user if they found their material once they arrive at the chosen skip, maybe after a five or ten minutes of the user being at the directed location. I think its good to make the application as interactive as possible.
The first screen shows the first full screen map.
I decided that the map would run within my application. This would allow me to make changes to the layout and size of the map, which I couldn’t do if I simply opened the external map application using an internal link. I added the feedback option, which allows other users to potentially access the same skip without having to navigate to it.
Skipper Details
I started to design the skip owner’s side of the application, which would be originally accessed from the start page. It was easier to start designing the layout of the skipper owner’s pages because I had already experimented with the design choices on the skipper user designs. I was able to quickly mock up the user interface.
Here you can see the similarities to the user input pages but with different input values.
Skipper Details Next
The second page asks the skip owner to specify the expiry date of the skip, the address of the skip and the terms of service. The terms of service is important for the skip owner because they need to specify the permissions which people would agree to follow.
I added an explanation to the skip expiry field. I thought it would be a good feature for people to leave this field blank and inform the application at a later date if the skip had expired, this communication could be established via push notification.
The next screen shot shows the reduction of size of the fields, which allowed me to include the upload buttons for images of the skip. I found this hard to fit, but in the end I think it doesn’t look cluttered or busy.
The last screen shot shows the colour scheme changes.
Existing skips
This page allows the skip owner to view the skip ad they have posted. This would be available through the homepage pop up box in the bottom left corner.
Leave your comment