pawpeds saas ux/ui case study
background:
PawPeds is a volunteer ran database that gives you any information you might be looking for about your pet. They mainly focus in cats, but are opening up to other animals. They offer education courses, educational articles, as well as pedigrees for thousands of animals. While having a lot of information and lots of people running the site, it can be hard to keep a consistent design, as well as navigation. I decided to re-design their website, while mainly focusing on making the database easier to use and understand.
software:
Figma, Adobe Illustrator, Adobe Photoshop
skills:
Personas, Sitemapping, Wireframing, Prototyping, UX Design, UI Design.
site inventory:
Before I could begin anything I went through the current website and took screenshots of everything I saw. Including, images, pictures of headings and body copy, buttons, icons, and anything else that would be considered unique to the site.
simple personas:
I came up with 3 different personas, people that would visit the site and their motivations behind it, as well as any possible struggles they may face from the site.
Sitemap:
I then went through PawPeds website and thought of how to organize it into a more informative, easy-to-read site map, while also trying to condense down some of their information.
wireframes:
Feeling confident, I moved onto creating my wireframes. While creating I wanted to make sure I still kept in mind my original 3 personas and how I could make their interactions easy and seamless.
style guide:
As it was time to start creating the visual design, I had to decide what I wanted my buttons and icons to look like, as well as what type to use and find illustrations and high-quality images.
schematic design:
After having my style guide done, I could then move onto adding those styles onto my wireframes and bringing the screens to life.
prototype:
Lastly, I went and prototyped through my frames in Figma, creating clickable links throughout while also having micro-interactions to feel even more real. Feel free to check it out for yourself!
