One Day Design Challenge: Wagtales

Screenshot from wagtales.com.ph

PROBLEM: Poor Usability

The mobile app had following problems with its UI:

  1. Slow loading times
  2. Hard to find features
  3. No proper navigation
  4. Poor use of space
  5. Poor color consistency
  6. Contrast and layering between elements was bad
  7. Transition animation is clunky
  8. Location services always have to be on
  9. Re-opening the app brings you back to the on-boarding screens
Screen shots from Google Play Store

Solution: Home screen redesign

Keeping in mind the limitation of the design challenge, I had to create a solution that could be done within a day and that would address most of the problems that I listed out.

Navigation

I found that the most painful experience in the app was navigation. Coupled with slow loading pages, it’s hard to get around and perform tasks.

Screen Shot of Wagtales App
  1. Find a playbud
  2. Services
  3. Adopt a dog
  4. Lost & Found
  5. My dogs
  6. My profile
  7. Breed of the day
  8. News & Articles
  9. Featured Services
  10. Burger Menu
  11. Search
  12. Add a new Dog
  13. Events (Burger Menu)
  14. Store (Burger Menu)
  15. Settings (Burger Menu)
New wagtales navigation bar
  1. Find a Playbud
    I gave this its own tab because I saw that it is one of the major features of the product, since the target market are dog owners. Also, this is a pretty big feature with a lot of functionalities tied into it.
  2. Services
    Found in the services tabs are, Pet shops, Pet grooming, Adopt a pet, Lost & Found, Events, Ecommerce. I grouped all features that were service oriented into the service tab to make them easier to find and that just makes sense. A card sorting activity could be done for this but I was working with my time and scope limit.
  3. Home
    The homepage is basically the feed showing the breed of the day, news and events, and some featured services. I basically took out the navigation buttons from the home screen and leaving out newsfeed items.
  4. Search
    The search tab contains the search bar and show search results. The application has a lot of content and search had to be a main feature to help the user find what he/she is looking for and potentially discover related content.
  5. My Dogs
    I gave this it’s own tab to act as the profile in the account, since Dogs are the main point of interest. This tab contains the account’s list of dogs and allow the user to add new dogs into the account.
  6. Miscellaneous
    I decided to still implement the burger menu which could be accessed through the home screen, it contains the User profile and settings. I decided to place it in a burger menu because these features won’t be accessed by the user frequently and it’s best be placed where it is not intrusive.

Final thoughts on the product

I think the product has a lot of value for its users and improving the UX and UI would help the product provide that value.

  1. What are the business goals of the product?
    There is an ecommerce feature but it was hidden, I didn’t test it in my heuristic analysis as I just stumbled upon it by accident.
  2. What other revenue streams does it have?
    Advertising but it does not have ads and the featured services were not very explicit in any part of the product.
  3. It has a lot of value offerings, but what is the focus?
    It seems looks like social is the biggest focus but it’s very diluted
  4. What is the growth strategy?
    If social is the biggest focus and it wants to grow users, what is the growth strategy?

Reflections from the challenge

Design challenges are sort of a reflective tool for designers and I found out a few things about myself in this challenge.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abel Maningas

Abel Maningas

42 Followers

Product Designer & Design Sprint Facilitator at Ten & Eleven Design