UX/UI – After Effects Work

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.

Screen Shot 2019-05-04 at 16.53.34.pngScreen Shot 2019-05-04 at 16.53.46.png

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.

UX/UI -Prototype Development Continued

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.

Screen Shot 2019-04-30 at 10.25.54
iPhone X Design
Screen Shot 2019-05-06 at 14.16.42.png
Adobe 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.

Screen Shot 2019-04-29 at 21.19.43.png

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. Screen Shot 2019-04-30 at 10.59.53.png

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.

Screen Shot 2019-04-30 at 19.39.10

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.

Screen Shot 2019-05-02 at 11.34.18.png

UX/UI – Tutorial

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.

Screen Shot 2019-04-17 at 15.07.46
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.

UX/UI – Further Development

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.

Screen Shot 2019-04-26 at 13.13.13
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.

Screen Shot 2019-04-27 at 14.02.37
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.

Screen Shot 2019-04-29 at 11.21.55
Customising the aesthetics 

UX/UI – User Experience/ User Testing 2

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.

 

UX/UI – Adobe XD Development

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.

Screen Shot 2019-04-17 at 14.07.42
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.

Screen Shot 2019-04-17 at 14.14.42
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.

Screen Shot 2019-04-17 at 14.40.58
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.

Screen Shot 2019-04-17 at 15.07.46
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.

Screen Shot 2019-04-17 at 15.13.31
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.

Screen Shot 2019-04-17 at 15.22.33
Setting menu/Emergency Contact
Screen Shot 2019-04-17 at 15.22.41
Emergency 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.

Screen Shot 2019-04-23 at 13.36.15
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.

References
Apple (2019) Apple Design Resources. Available at: https://developer.apple.com/design/resources/ (Accessed: 6 April 2019)
Facebook (2019) Facebook Brand Resource Center. Available at: https://en.facebookbrand.com (Accessed: 6 April 2019)
Twitter (2019) Brand Resources. Available at: https://about.twitter.com/en_gb/company/brand-resources.html (Accessed: 6 April 2019)  
Google (2019) Available at: https://gsuite.google.com/setup/resources/logos/ (Accessed: 6 April 2019)
Google (2019) Available at: https://www.google.co.uk/maps?hl=en&tab=wl&authuser=0 (Accessed 6 April 2019)

UX/UI – Imagery

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:

 

UX/UI – Wireframes and XD Experimentation

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.

IMG_4579
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.

IMG_4578
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.

Screen Shot 2019-04-09 at 10.55.26.png
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.

UX/UI – User Experience/ User Testing

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.

IMG_4495
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.

 

 

 

UX/UI – Developing Logo & Colour Scheme

In order to start developing the project further I needed to think about the aesthetics of the app, as this is something that I have only really touched upon so far. I decided that the app was now only going to be based around dog walking which meant that I need to find a name for the app that clearly showed this to the viewer. I decided to go with the name Dog-go because I feel that it shows the viewer exactly what the app is about; the word o indicating ‘going out for a walk’.

I started to think about things that relate to dogs and dog walkers, and in my sketchbook started to develop some keys ideas about what the logo and app icon might look like. I thought about having a dog include in the logo just to make it even more explicit that the app is for dog walkers.

IMG_4478
Sketchbook – Logo Sketching 

I then took this into Illustrator where I started to experiment further with concepts. I thought that the image of the dog was one of the strongest that I had come up with therefore I wanted to develop further. I didn’t want the logo to have to much detail so using a line drawing style to illustrate the dog I thought was the best way to do this. Using the pen tool I was able to illustrate the lines to resemble a dog form.

In terms of typography within the logo I had no ideas how this was going to look. From the research I had found that majority of app use a sans-serif typeface and there weren’t any that I could find that used serif typefaces. This was something that I followed suit with and decided that the typeface would be Sans-serif. I spent time typing out the name ‘Dog-go’ in different san-serif typefaces to try and see which one I thought was going to work best. In the end I felt that the typeface bubblyboddy Neus trial was the best typeface to move forwarding because it made the name look correct and I felt that it was a good balance between being too formal/corporate and being childish/ informal.

I was now able to start to experiment with the logo design in illustrator considering colour palette for the logo and app. From the research that I had conducted I found the colours schemes mainly used were greens and whites with a few using red, I wanted my app to stand out however, I wanted to ensure that I wasn’t using a colour scheme that people thought was completely new.  I experiment with a range of colour schemes to begin with, red, green and blue.

Screen Shot 2019-03-29 at 14.21.00
Adobe Illustrator – Experimentation

Starting off I used the dogs head to act as a hyphen between the two words, which I thought worked well and gave a clear sense of what the app was about. I then started to experiment with using the arrow to cross the two G’s, with the arrow acting a symbol to highlight the sense of going out somewhere. I felt that this design worked better on paper sketching rather than on the screen and as this is a design for a digital content I eventually ruled this out. Through considering was else related to dogs I thought about paws and paw prints, in turn leading to the idea about the using the o’s in the words to create paw prints. I felt that including these made the logo more apparent to the content of the app.

I also experimented with upper and lower case letters within the logo, I thought that the uppercase suited the name better as I didn’t think that the lowercase gave the name the right attention. After spending some time I thought about experimenting by combining different element of the ideas together which lead to the idea of removing the arrow, keeping the paw prints and using the dog within the logo. I feel as though this outcome was the strongest because it was clear and there wasn’t to much going on at once. I think that I will use this logo within the app.

Thoughts Behind the Colour Scheme

One thing that I knew needed to be consider throughout the course of the project was the audience for the app which is dog owners. Even when considering the the colour scheme it was important to keep them in mind. I thought was the relationship between a dog and owner, what does it look like? what best describes it? I thought about my own relationship with my dog, the idea of love, care, loyalty and trust. This got me thinking about the story of Greyfriers Bobby which I heard when I went to Edinburgh last December. The story talks about the fact that once his owner passed away bobby his dog would sit on his grave everyday and would only leave his masters grave for food at 1 o’clock. He became well known to the locals and when Bobby passed away after 14 years of guarding his owners grave, Bobby was given permission to be buried in the graveyard near his masters grave.

Images from my visit to Edinburgh December 2018

Using this idea of loyalty and trust being an everlasting bond between the owners and dogs, I felt that this was an important part to include in the dog walkers/owners aesthetics I decided to do some research onto colour theory and found that blue is associated with loyalty and trust. With this in mind I have decided that the colour scheme of the app, logo and icon will be blues and white (dark blue, light blue and white). I think that this was the strongest colour that I used throughout experimentation but also it means that my app will stand out on the market.

Screen Shot 2019-03-29 at 15.23.45
Final Logo and app icon concept.
References
Colour Wheel Pro (2015) Colour Meaning. Available at: http://www.color-wheel-pro.com/color-meaning.html. (Accessed: 27th March 2019)
Create your website with WordPress.com
Get started