Everything You Need to Build an App with E-Commerce and Appointment Booking in Adobe XD
Creating a strong e-commerce experience has gone from ‘nice-to-have’ to ‘need-to-have’ for businesses across industries. If you sell a product or service, your website and app need to make it easy and enjoyable for customers to buy. Adobe XD is the all-in-one design and prototyping tool to help you achieve that for your users, especially with a little help from ‘man’s best friend.’
UX designer Meagan Fisher has created the Pawtastic UI kit for Adobe XD specifically to help designers create the e-commerce experience of their dreams (and if you love animals, there are lots of great pet-themed elements in there too). You can download Pawtastic for free here. This weekend, try designing your own e-commerce web app.
Getting started with the Pawtastic UI Kit in Adobe XD
Here are the quick steps you should follow to get started with Adobe XD and the Pawtastic UI Kit:
- Step 1: Download the latest version of XD and the UI kit. Download the latest version of Adobe XD.
- Step 2: Download the Pawtastic UI Kit. Click here to download Pawtastic. It includes dozens of customizable screens and everything you need to design an e-commerce web app.
- Step 3: Explore the UI kit and everything it offers. Pawtastic is a UI kit and web app prototype with dozens of e-commerce elements, artboards, symbols and icons, and more. Originally designed as a website for a pet-sitting service, it includes a fun and informative marketing one pager along with a multi-step booking/onboarding process that will be useful if you’re creating an app or website with a strong e-commerce focus.
- Step 4: Start designing. Use the UI kit as a starting point to create your own web app and combine it with the main screens of your app, such as a login screen, onboarding and booking process, payment information, and more.
- Step 5: Simply wire screens together to create an interactive prototype you can share.
- Step 6: #MadeWithAdobeXD.
Meagan’s top tips for building an e-commerce app with the Pawtastic UI Kit
Designing the dashboard UI
In general, when designing a dashboard UI, it’s vital to consider all use cases, and prototype for various scenarios. Designing for the best case scenarios, such as users with short names, perfect images, and an ideal amount of content looks great for a portfolio piece, but when designing real-life dashboards always try to use real content and test your designs in a working prototype. This way you catch pitfalls before getting to the development and testing stage.
Designing a marketing one-pager
When creating a marketing one-pager, make it memorable. If you’re going to focus the majority of your marketing efforts on one page, it needs to be pretty impactful. Striking visuals, bold statements, and even animations can be a great way to increase brand awareness and conversion with one simple page.
Designing a multi-step booking/onboarding experience
With any signup or purchase flow, your main concern is conversion. Make the progression through the process simple, intuitive, and–ideally–fun.
An element of fun can be accomplished with imagery (think the funny pet photos at the bottom of the sidebar) or copy (see the warm and personal language throughout Pawtastic). This comes with one big caveat though: the delight should never conflict with capturing the necessary data and moving the user through the process. Keep forms simple and clear, with one prominent call to action for each stage.
Design considerations for connecting with your users
To connect with your users, remember that they are people and not data points with money and design accordingly. Use friendly language. If you know their name, repeat it back to them (as in, “thank you for signing up, Bob”). Avoid dark UX patterns that frustrate, confuse, or trick users. Be accessible; design and build for users with a range of abilities. Test (and ideally, create) your designs with a diverse group of people, so you’re not just considering users with your exact same perspective.
About Meagan Fisher and the Pawtastic UI Kit
Meagan Fisher has been a designer and front-end developer for more than a decade, working with big brands and agencies and also with a variety of different startups in New York. She knows how to iterate quickly, and has lots of experience creating effective and flexible e-commerce experiences. She’s also a huge animal lover (owls are her favorite), which led her to create Pawtastic and put an extra cute spin on e-commerce web apps.
“I wanted Pawtastic to be usable and beautiful, which is why I started with the wireframe. UX is hugely important in e-commerce, as one wrongly placed element or confusing interaction can cost lots of cash. I wanted to build in good practices to the experience so that designers modeling their work on this kit would have a great base to start from,” said Fisher.
Channeling her love of pets, Fisher created the fake pet-sitting service used in Pawtastic to illustrate an important point: effective branding is essential.
“Brand presence is important to e-commerce; the best online purchasing experiences make you excited to support and identify with the company you’re purchasing from. Even though this is for a fake service, I wanted there to be a strong brand presence, while keeping in mind that the kit needed to be customizable.”
More UI Kits, more ways to design with Adobe XD
For more ways to design, prototype, and share in Adobe XD, download these additional free UI kits to build travel, gaming, smartwatch, and dashboard experiences for apps and websites. Learn how to build a navigation app with Aurélien Salomon’s Navigo UI Kit, check out Nimasha Perera’s latest e-commerce UI kit, and read our full resource post, featuring more information about getting started with Adobe XD. Lastly, for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.