Making a Mockup


Woof Sign In Page
Woof Adoption Website Log In Page Mockup in Adobe XD.

This week, my focus was on developing the overall design and user experience (UX) of the pet adoption website. In our earlier group meetings, we laid out the core aspects of the website, including the feature set, different pages, and customization options that the adopters and shelters would have. Armed with this knowledge, I was confident that I could create an acceptable mockup of what the website would look like.

I started by using Figma, an app that I was tasked with using in my Usability Engineering class which I am currently enrolled in. I found the experience to be clunky and unintuitive, with mediocre options for creating deign elements for the site. I decided that, since I currently have and Adobe Creative Suite license, I should give Adobe XD a try instead. I had assumed that the experience would be leaps and bounds above what Figma offered, so I was very surprised to learn that they are both essentially the same. There are a few more bells and whistles: connectivity to Adobe Fonts, some layers styles even, but nothing that made the work any easier.

I used an iterative process, starting with a landing page, then moving to information pages, and then the login/signup pages for both adopters and shelters. From there I needed to make account pages, pet profiles, and a browsing page for filtering pets based on the various breeds, age, etc. Once the pages were made, I needed to connect them together. It was at this point that I realized that I needed to make some changes to several pages, as they would require navigation back to home screens, accounts, and to sign-out again.

After some revisions and a bit too much time spent on the graphic design of the project, I had done at least eight hours worth of work on the mock up. I decided that that would have to be enough as the course is more than designing. I was disappointed that I did not get to the level of completion that I wanted, and that there were still more changes that I would like to implement. I shared my work with my team and they really liked some of the pages that I made, but we all agreed that some changes still needed to happen. I am still confident that those changes will be seen in the final version of the site, and I believe my design work will make for a great jumping off point.

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *