Skip to main content

User Experience Design- Christmas Break

  

Semester A: Week 1- 11
Student: Tai Ser Yeet (22064351)
Programme: BA(Hons) Digital Media Design
Task: Christmas Break


Project Progress

This Week's Inspiration




These are just a few images that have a very playful UI design that I can reference. 


Planning of UI Design

Profile

  • (Verified/Not Verified) Verified ID- show a physical card
  • Personal Details (List down all) then at the side, you can edit all the details
    • Title (Ms, Mrs etc)
    • First name & Surname
    • Date of birth
    • Address
    • Email
    • Phone Number
  • Sign out

Settings

  • About Us
    • Story about Poochi
  • Account Details
    • Username
    • Password
    • Delete account
  • Notifications
  • Privacy Policy
  • Support
    • (something similar to Ask Herts, where you have a search bar and FAQ)- refer to Pets4Homes)
  • Terms & Conditions
  • Help Center

Chat Section

  • Changes: I could make the chat section run on AI (Chatbot). The Chatbot will be the first responder to the user’s concerns but if that is not solved, the system will then direct the issue to an actual employer at customer service. This example can be found in Lloyds bank telephone line. For example, AI will ask you for your date of birth and member ID as well as what kind of concerns are you looking to solve. After that, they will direct you to customer service run by humans.
  • Objective: Saves time and manpower where instead, manpower can be directed towards updating the database with current information, shelters can be kept in good condition, setting up new dog profiles, and most importantly, managing the shelter on the front counter.
Reference Articles: 
https://www.tidio.com/blog/chatbot-ui/ 
https://blog.happyfox.com/10-chatbot-designs-for-inspiration/

    Application Form

    • Page 1
      • Explanation of why to get verified
      • Button: Start
      • Heads Up! It might take a while so grab a coffee
    • Page 2
      • Form


    Find Your Match Quiz





    This is a website that I came across that starts the user experience with a quiz to understand more of the user's lifestyle so that the system can recommend useful ways to fulfill their goals such as getting pregnant. This website is called Flo. I find this quiz rather satisfying to fill in so I aim to implement this type of UI design into my app itself.


    Dog Profile

    • I was inspired by the murder case files from crime investigations
    • I want the dog profile to resemble physical documents kept in the shelter, in brown folders
    • Has a paper texture and paper clips inserted too
    • Stickers can be pasted on the side of the records to indicate that the pet has been neutered and vaccinated
    • Use chops, inks, and typewriter font

    After getting this huge inspiration, I regained a new art direction and feel confident that my app will look excellent if I execute this concept. 


    Assets 

    These are the assets that I created in Adobe Illustrator. I made sure to round the harsh corners and use bright colors to give a creative and fun feel to the app.


    Issues with Drop-Down Menu Variant



    I tried creating a filter system whereby users could select multiple options at once. They were even able to choose any preferred combination of their choice but as I progressed further into the prototyping, I quickly realized that there was no way of doing this without confusing myself along the way. I was also running out of time as the deadline is already next week. Hence, I decided to sacrifice the ability to further customize the user experience and just stuck to the function of a single selection, ultimately saving myself from all the stress and time wasted on this section alone.

    In the end, I decided that I would not be using the dropdown menu because I was unable to fit all the necessary options that each filter had. This was devastating because I spent almost 7-8 hours trying to figure out the mechanics of the menu. All that effort was wasted and I was very tired too from the lack of sleep.


    The final outcome was too small in comparison to the proportions of the screen and I just knew deep down that no matter how hard I tried to make it work, it was never going to do so. Oh well, back to the drawing board.


    Overview of My Variants

    Discovering variants was the best thing that has happened to me because it saves me the hassle of modifying each and every element if I do decide that I don't like that specific functionality. With variants, if one is edited, all of it will be edited regardless of its placement in the app. So, I have created most of my animations with its help such as the Like button, Toggle Feature, Drop-down menu, Pop-out drawers, Bookmarks, and more. 


    Overview of My High-Fidelity Prototype

    Login Section



    Quiz Section




    Discovery, Favorites and Pet Advice Section 



    Settings Section




    Pet profile, Chats, and My Profile Section



    Creating Multiple Flows 


    Feedback from Dean
    • The navigation bar was not working for me because it was overlapping with other functions and Dean reinforced that I should have used the good ol' menu bar at the bottom of the phone. That would be more intuitive and convenient for users as the younger generation in this day in age use their thumbs to type.
    • Write a brief user persona and user journey for the presentation whereas the other things such as references will be in the appendix.
    • The color of the Chat screen looks good because it is unique
    • Add an appointment form for the adoption button and a button for scheduling a meeting
    • He thinks the pet advice section articles have too much text but in the end, he said that I justify that I must keep that in to explain that adopting a dog is a huge responsibility.
    • It is totally fine if you use "Lorem ipsum" as a text placeholder


    Figma Board

    References
    • https://www.notion.so/The-right-app-rewards-to-boost-motivation-7e99dec9f31e494bb551f45c1013a1ed?pvs=44
    • https://ullasghosh.medium.com/pet-adoption-process-an-understated-problem-ecb1f4ea4d18#:~:text=A%20lot%20of%20people%20are,an%20animal%20then%20and%20there.
    • https://www.itslinh.design/perfect-paws
    • https://bootcamp.uxdesign.cc/fur-care-an-app-for-pet-adoption-and-rehoming-ux-case-study-66dcfac09d9a
    • https://bootcamp.uxdesign.cc/fur-care-an-app-for-pet-adoption-and-rehoming-ux-case-study-66dcfac09d9a
    • https://bootcamp.uxdesign.cc/ui-ux-case-study-on-pet-adoption-app-pups-purrs-9615127519ba
    • https://www.figma.com/file/o9tD9Jg1WtOVsbRliHX2Aj/Fur-Care?type=design&node-id=181-1792&mode=design&t=b8LQ1uG5TcK5kqFU-0
    • https://dribbble.com/shots/18360922-Aderma-Donation-Mobile-App?utm_source=Clipboard_Shot&utm_campaign=mochamadhakim&utm_content=Aderma%20-%20Donation%20Mobile%20App&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=mochamadhakim&utm_content=Aderma%20-%20Donation%20Mobile%20App&utm_medium=Social_Share
    • https://www.dogstrust.org.uk/rehoming/dogs/b
    • https://www.figma.com/file/o9tD9Jg1WtOVsbRliHX2Aj/Fur-Care?type=design&node-id=157%3A1561&mode=design&t=p9TI2YjQYJyRFnME-1eagle/1268511
    • https://woodgreen.org.uk/pet-advice/dog/




    Labels: