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.

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)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: