As majority of apps out there have a website alternative which people are also able to use. I created a mock up of what this would look like as I thought that it was important to consider what the target user could use if their phone wasn’t available. On this webpage mockup I have tried to kept the same layout as the app, however, with the side menu being permanently accessed. I have also included a logout button in the top right hand corner to allow the user to simply logout of the app if required.
Web version of DOG GO
It was important to me that I was able to show the app in context when talking about it. I personally thought that it would allow the user to visualise what the app would look like better, rather than just having screenshot of the app. I completed this by downloading free to use photoshop product mockups then taking the screenshots of the app into photoshop and editing them into the mockups.
Due to Adobe XD not allowing video or gifs to exported into the software currently I have had to use Adobe After Effects to show how certain aspects of the app would be able to animate. There were only certain elements of the app that needed to be animated including the route being walked and the drawing the route when adding to the system.
One of the good things about using Adobe XD is you can easily export selected art boards straight into after effects. It transports all images, type and paths that were created in XD and allows you to edit them in after effects. For these two animated art boards I decided to select the path that I had drawn in XD that highlights the walk route. Once they were selected then I added a trim paths to allow the end and start percentage to change making the line move as though it was being drawn or walked.
I will present these alongside the video screen recording of the app prototype to allow the user to understand how it would look in the final outcome.
Following the tutorial and the feedback I went back into Adobe XD to develop the prototype further. Up to this point I had been using the iPhone 8 template to design my prototype, however, it was suggested that I try and develop the app so that it could be used on the iPhone X (Apples latest phone). I have does this to allow me the opportunity to present the prototype in both formats.
iPhone X DesignAdobe XD prototype
After the tutorial it was decided that I should change the icons on the side menu to be photographs because the rest of the apps aesthetic used photos. I decided to keep it in sequence with the rest of app by using circles to display these. I have tried to make sure the icons linked in some way to dog walking and dogs in general. For the user profile I thought that using an image of a dog walking would be good. For ‘Adding a route’ I thought about initially using a lead coiled up in a ball, however, this didn’t look the best so I decided to photograph the different sections of the lead. I settled on the clip as you add this to the collar of tour dog for the walk so in some ways it’s like a metaphor for adding a route. As for the setting icon I used a dog tag which is attached to a dogs collar. I decided on this because if a dog got lost this is where important information would be, much like what you’d find in the settings of an app.
Aside from the icons I have also changed so that the colour of the type is either blue or white. Prior to this I had the type set in black white and blue which seemed to be too much variation and wasn’t as clean as I would have liked. I have also kept the typeface the same so the entire app is following the brand lead. Furthermore, I have developed the rating system as this was something that we also discussed further in the tutorial. We talked about allowing all users to rate the walk rather than just individuals rating there walks.
In this development I also wanted to show the app icon on the home screen of an iPhone so using a template from the ISO 12 Adobe XD I was able to take in the app icon design and show how the app would open from the home screen. I think that this is important because it gives a realistic approach to the prototype.
In terms of the app sending you notification during your walk this was something that I haven’t developed until now but it was something that I was suggested in the previous user testing I undertook. The app will send notifications when the user is out on the route and walked at least 1 mile of your walk so that you know. This will help the user to know how far they have walked but also help them if they are under any time constraints but needs to walk a certain distance.
I have also developed another area of the settings which allows you to add DOG GO friends to the app. This was something that I have thought about previously but I wasn’t’t sure how I was going to implement it into the app. Looking at apps like facebook, snapchat and instagram they tend to have a search bar where you can search peoples names, while snapchat has both a search bar and a way of scanning a code. I liked the idea of scanning a code as this uses the technological capabilities of the phone to extend the possibilities for the app.
During this tutorial I showed my prototype working with all the developments that I have done up to this date. This tutorial was really useful to me as I was able to get confirmation on some queries that I had while gaining feedback to aid me to develop the app further.
Majority of the feedback that I received was positive and the app seemed to work the best that it could consider the software has some limitations (no video or gifs can be added in XD). These I will present during the presentation to allow the individuals to visual what it will look like.
Side Menu – Development
One piece of feedback that I did receive was regarding these icons on the slide menu. Compared to the rest of the app these seemed clunky as they give the impression of being hand drawn whereas I have used photography everywhere else in the prototype. Thinking about this I am thinking about changing these to photographs maybe linking them to dogs. For example, the add route icon could be a lead or the settings icon could be a dog tag. I also received feedback to just refine the prototype to make sure that its working as smoothly as possible.
Following the feedback gained from the user testing exercise I undertook I started to develop the app prototype further. I have tried to develop on all the areas that the feedback pointed to because it is really important to consider the users thoughts.
I have started by changing the layout on the chosen route screen as the user thought that it could be easier to read and some of the elements would be better place elsewhere on the screen. I thought that moving the rating to the bottom of the screen would be best because it allows it to have the space that it requires. Also aesthetically I feel that it looks better at the bottom and having the weather and sunrise/sunset time next to each other. By having these to elements next to each other also makes more sense for the user as majority of people read left to right therefore they would receive linked information together with this layout.
I have also developed the adding route system on the prototype following the feedback about safety. I have added an option to make the route private (can be shared with friends) or public because I thought that this was the best way for the app to consider the safety of individuals. These private routes would then be saved under your favourites and cannot be viewed by anybody without your permission.
Public or Private Feature
There were also some elements which I felt where missing from previous developments including a disclosure agreement. As I’d had previous discussion around safety I thought that through adding this disclosure agreement at the start of the app (this would only be for the first opening of the app) would ensure that the users were aware that the app cannot be held accountable for injuries etc. On the disclosure po I have added a tick section for the user to tick, this will then allow the user to continue and sign up/login to the app. This should ensure the user reads these conditions and looks out for their safety.
Disclosure agreement
In this prototype development I have also included art boards which all the user to experience what it would like to be given serval options to view and go into. I felt that this gave the prototype the ability to be as realistic for the user to experience as possible.
A new element which I have added is the ability for the background of the app customisable to the user as this is key. This can then be accessed in settings part of the app prototype as from my analysis of most apps this is where information like that can be accessed. This needs accessed to the camera roll to allow the user to chose and there is an option for this to be allowed. Once the image is selected it will allow the user to add this as the background.
Following the developments that I have made to the prototype of the app I decided to undergo some further user testing to try ensure that the prototype was meeting the needs of the audience for the app. Using the user profiles that I had created I asked a few individuals to act as these personas and give me feedback on the app when I showed it to them. As this had worked effectively before I thought that I would be a good way to continue. The feedback was as followed:
Adding a route page needs to be consider more on the safety aspects of the route.
Likes the filters section, thought it was really good to give options.
While on the route could consider sending an alert to phone to say you’ve walked a certain amount of miles.
Consider the layout of the screen with chose route on it maybe think about putting rating at the bottom to make more sense.
Overall the feedback was really positive on the app and it felt as though compared to the last user testing that the users were pleased with the current features on the app prototype. There were some areas from improvement on the app and these are feature that I will review and start to adapt to meet the users thoughts.
Consider the feedback regarding the alert idea for the distance being walked, I think this might require me to consider walking app that are already on there and do some more research into these apps to help me ensure that this feature would work well within the app.
After considering my thoughts surround the last development I thought I would do some user testing again to see if my initial thoughts about those certain areas of the app were correct. User the user profiles that I had created, I asked a few individuals to act as one of the characters then give me feedback from the app that they saw. The feedback was as followed:
The filters page wasn’t clear on what to do, wording of categories didn’t suit the app
The user page was easy to use but aesthetically didn’t appeal to them.
The use of sliders works well within the filter page but wouldn’t work for all the categories.
The idea of inviting a friend is really good but thinks it could be more easily done.
The way of login seems over complicated – suggested having the login page at the start of the app.
From this feedback it was clear that there were elements the user wouldn’t be happy with, things I had picked up and elements that I hadn’t. I felt that it was best to complete another wireframe to incorporate these developments, especially since a few were about the navigation of the app.
This third wireframe includes a new opening system so the app opens, once logo is clicked it takes you straight to the login page (as suggested). The wireframe is the very basics of the app. I have then conducted more wireframes for the different areas of the app where I wanted to go into more depth and the larger wireframe didn’t give me the space to do so. These small wireframes consider the filter page navigation, add a route feature and messaging a friend to join.
Adobe XD
Once these were completed I decided to go into Adobe XD and start creating the new prototype for the app. When creating this new development I thought that it would be best to use the previous prototype as a basis for the design.
I had also started to taking my own imagery to use in this prototype, using photoshop I edited them and added them into this version. I was trying to build the prototype by constantly thinking about the users experience; would they find this easy to understand? can this be clearly seen on a phone screen? How can I make this flow better? All these questions I found were useful to consider because they were helping me to create the best version of this outcome.
Adobe XD – Development
In this development I have used more of the apple icons that were free for me to use from the ISO-12 Adobe XD file. I thought that by using these would be easier for the user as they would be used to it. However I have also creates some new icons that would only be relevant to the app for example the add route icon, user profile and settings are all icons which I drew in illustrator that took into Adobe XD. In the app I have include a map, which I used google maps, in the satellite mode. I thought that this way to show how the app would use satellite maps if produce commercially but for the purpose of the prototype I have used screenshots of these maps.
I have included a way for the user to sign up to the app as this was something that I thought was missing from the first development. Through doing this as well it create links to other apps out there which people might be more familiar with. I decided to use the icons which were free to download from the social media brand guidelines page online. I feel that this adds a level of sophistication to the app that wasn’t in the first developments.
Sign up screen
The filter screen I have also changed hugely compared to the last development. Using the switch style buttons to select certain filters I thought was a better way of allowing the fitters to be used. I decided to keep the slider in the filter screen but for defining the distance only because this seemed to work for the filter option and it brings some variety to the screen.
Filter screens
In terms of the user home page as mentioned before I thought that it was best to scrap this and use a side menu to allow the user to access these features because the aesthetics weren’t looking correct. I think that this side menu is better and it can be accessed more easily, it simple slides onto the screen when the three lines are tapped. I think that simplicity is more in this case as I am trying to create an app which is supposed to make a dog walker life easier.
Side Menu – User Main Menu
Furthermore, from the side menu the ability to add a route can be done and as this is how the app with collect the data on the best walking routes it was something I wanted to try and get right. When adding a route to the system you add the name and location then using the GPS in your phone it will track your walking route. Once the route is complete you can then add this to the system and chose what filter option you think that this route would fall under and you have the ability to rate the route our of five stars.
Adding a route
Another aspect of the app which is new in this development is the settings menu. This was something that from my first user testing that they thought was key to the app, including the feature of being able to add an emergency contact to the app incase you are out for longer than expected and you might be lost.
This is a feature that I am keen to try out in another user testing session because I think that it still needs improvement at the moment and I think that maybe some people wouldn’t feel it works. However currently the app lets you add an emergency contact from your phone contacts and set a time. if you are out longer than this time then the app will send a message to the emergency contact to ask them to contact you to check. This feature is concerning the safety of the user.
Setting menu/Emergency ContactEmergency Contact
As mentioned in the user testing feedback the way of inviting a friend to join your walk was complex and could be simpler. I decided to think about this and came up with the solution of a menu popping up from the bottom of the screen with the DOG-GO contacts on them. Simply select and then type message to ask them to join. I think that this is a simpler way of navigating to invite a friend.
Inviting Friend
I think there is still major improvement for this app currently in some areas however, I will now take this developed version and complete a user testing activity to gain feedback on what they think works and what could be improved. Personally I feel that this is the best way in order to create an app that works well for the user.
As this brief requires us to us our own imagery within the app design, I decided to go out to several of the different location that would be included within the prototype and photograph some of the places along the walk. Also, as the app would be personalised by the user I wanted to show this in the prototype to so I also shot some image of my own dog to be used on the app.
Dog Photographs
I decided to take images of my own dog to used on the prototype as the background for the app, as mentioned earlier in the process I feel that it is important for the user to personalise the app as that to me is the aesthetic of the dog owner. For these images I used my Canon 1300 D then took the images into photoshop to edit.
Below are a few of the images that I took:
I thought that these would be good images for the background of the screens on the app. When there is major text on the screen there will be filter over the top of the images to darken them slightly. I am also considering blurring the images slightly to make sure that they won’t over power the type. This filter and blurring would be applied in the app if it was to be produced, to the individuals images.
Location Photography
For the location images that would need to be used within the app I decided to go and visit these location. I knew that the app would be portrait therefore I tried to ensure that majority of the images were taken in portrait. However, some weren’t taken in in this mode they were taken in landscape as I couldn’t get the level of detail I wanted.
In terms of editing the photo in photoshop I actually did very little. I only cropped and edited the levels. Through doing this I didn’t think that the images looked as though they had be edited because if the app was to be produced professionally then the images would be uploaded by the user so they might not be professionally edited. All these images I have used within the prototype to help show what the app would look like. Below are the images:
After the user testing I decided to start creating a prototype for the app in XD. I wanted to do this to help me gain a better understanding on the visual look of the app and how it would function all together.
First Wireframe
Looking at the first wireframe that I had completed I wanted this one to be easier to follow and understand in comparison. As this wireframe formed I noticed that even without the various elements that I had removed there is still a lot of screens and detailing that is required. However, overall in comparison to the previous one this wireframe contained less screens which I thought might be easier to navigate.
Second Wireframe
Using the wireframe I went in to Adobe XD and decided to create an initial starting point for the app. I decided to download the Apple icons from Adobe as I felt that this would be easier than trying to create all new icons, plus thinking about user experiences majority of individuals know the Apple Icons and are familiar with them meaning that it would make my app seem easier to use.
Adobe XD – Initial Prototype
In this development I haven’t added any imagery of walks or the map as I just wanted to get a sense of aesthetics and usability. I think that the idea of have the personalised image of the dog in the background works really well as it allows the user to feel as tho the app is tailored to them specifically.
In this specific prototype I have included sliders for the filter menu, the sliders I think are a good edition to the app, and make the app easier to use as there are only three levels to chose from rather than several. However, in this prototype version of the app I think that there are some elements that could be improved; firstly looking at aesthetics.
The home page go the app doesn’t feel that it uses the space the best that it can and it seems little bit all over the place. I also feel that the user home page isn’t aesthetically pleasing and feels very bland. I think that this could be eliminated and maybe use a slide in menu from the slide to allow people to quickly access the areas rather than having to go through to the home page all the time.
In terms of navigation of this app areas of it are two complex and I think that they need to be develop. As an example the idea of inviting a friend to join you for a walk is very complex and doesn’t make much sense at the moment. This is something that I will need to look at in the wireframe to see if I can make this easier. Also, the filter page I feel need to be easier to navigate because currently it feels very clumsy to use.
In the lecture we were giving I learnt how important it is to consider the user of the app and how important user testing is. We were given the task to go away to create three different personas for our app users, we were asked to think about name age what they looked like, hobbies etc. In my sketchbook I created these three personas for my app, I specifically talk about the dogs needs as well as owners.
Sketchbook – Three Persona Task
Persona 1
Name: Sara Age: 35
Daily Tasks: After a busy day in work as a teaching assistant, Sara comes home to her family (2 children aged 10 and 13, husband Hugo and family dog) After coming all the chores of being a mother, Sara loves nothing more than to take their dog for a nice work in the evening.
Home Life: Living in a small town outside of major city in South Wales. The location isn’t to far from shops and not to far away from the coast or countryside. Sara likes to walk the dog furthest of the weekend when she has a little more time.
Dog Type: The family dog is a chocolate coloured Labrador called Simba, aged 5. Very energetic with needs lots of walking in different areas to keep him simulated. Very friendly loves other dogs and people.
Goals: Sara finds hard to find quickest routes to walk sometimes when she needs a quick walk in the evening with Simba. Spends more time check weather and sunset times that actually out walking.
Persona 2
Name: Daniel Age: 21
Daily Tasks: Dan is a young engineer at a firm based in the city. Lives in a small house in countryside with girlfriend Ash and their two dogs. Likes the outdoors, mountain bike and rock climbing. But enjoys relaxing at home too.
Home Life: Living the countryside 20 minute drive outside of the city. Small rural village with a few cottages surrounded by fields and 10 minute walk from the beach. Spends many summer evenings chilling out on the beach with girlfriend and dogs. Has a passion for driving so like to explore new places that may require driving too.
Dog Type: Daniel has two dogs, one a Collie called Hallie, aged 7 and another called Chester who is a Beagle, aged 4. Both dogs love the outdoors but Hallie loves fields and grass while Chester prefers to walk along the paths rather than get muddy at times.
Goals: Has previously had trouble getting caught in high tides when walking on coastal routes and has been caught out with routes changing due to weather conditions.
Persona 3
Name: Esme Age: 50
Daily Tasks: Esme is a officer worker. Married to husband Peter for 20 years has 3 children aged18+. Esme has the family dog, Pepper to keep her company.
Home Life: Lives in the city outskirts and commutes to work on her bike everyday. As her husband Peter works away a lot leaving her home alone, Esme spends a lot of time with their dog Pepper. As Esme had grown up in the valleys she sometimes will go visit her home village and take pepper up with her.
Dog Type: Pepper is a sausage dog aged 9. Even for older age he still loves a good walk but struggles to go far.
Goals: Has trouble finding routes suitable for her and dog especially ones that aren’t to far or uphill.
User Testing
In the lecture we also talked about the user testing and how this can be done either through people actually physically using the digital prototype, paper prototyping or just purely conversation. The second task was to under take some user testing using the personas we had created. We completed using testing in a group of three, two people were given a persona to be and then ask questions to the designer about their app. As a group we had decided to do this purely conversational to allow everybody to be at the same stage. Personally I found it extremely useful to do because it allowed me to see things that I had considered before about how a user might react or ask for within the app.
Some of the feedback that I received was useful making me thing about elements I hadn’t thought about before. Including how many different filters (time limit, ease to walk etc.) do I need to include to ensure people can find the perfect routes? Could there be a way of inviting dog walker friends to join you on a route on a certain day? Could there be a GPS tracker in case of an emergency for somebody to find you?
This was some of the questions I was asked during the task, which got me thinking more about the development stage of this app. I started to consider maybe how these things would make the users experience of the app better. This is something that I am considering using throughout the development of the app to make sure that I am making the app to the best that I can.
Abbie Louise Williams 