I designed this ecommerce template to inspire other creative designers in-barking on a new project as they might need a little kick start with this UI Starter pack I’ve created using sketch. One of my goals is to open a fashion ecommerce shop (one day). The power of online shopping has always inspired me. I studied fashion design and later fashion merchandising and that's what really launched my career in product design.
When I graduated many years ago product design wasn't what it is today and online shopping wasn't as popular or hardly used. Fast forward to today and the online fashion sector is booming. Having the right site with the right features is a huge asset in todays competitive market.
Every project I work on is a slightly different work flow depending on what I am trying to achieve. With this UI template I started out by mapping out the user flow and what pages would be the most valuable in this template as my intentions were not to flesh out a whole site rather just some key pages to spark creativity on a designers project.
As I work, I think about the position of UI elements and the user’s visual hierarchy. I like to incorporate social influences such as a blog and a chance to sign up to our newsletter insuring returning customers and collecting data we can use to continually improve their experience and work on adding new features.
Design constantly evolves, and I strive to evolve with it. Staying current with the industry leads to increased sales, and the best part of creating an online shop is that you can craft new features that attract users, test those features and continuously improve.
For the templates landing page I designed with editorial inspirations, I wanted the imagery and sections to grab the attention of it's users. I layered the heading font to add extra texture to the page, all while staying true to the clean and minimal feel this template evokes.
In this template I aimed to create an almost white labeled branding approach that people could use as a template, the decision was to keep design and branding to a minimum and have a clear Messaging and CTA for users to follow.
I designed with future proofing in mind, and that it must allow tweaks to site optimisation. That way, users can better track conversions and problem solve how to get more customers through the sales funnel.
I included a promotional feature in the filters drop down section, this is to encourage customers to shop for new full priced items. From research it's always the best approach to increase the items in the customers basket. Every opportunity that I get to grab the customers attention I take insuring that even if the user is just browsing I might be able to to sway them into adding items to their wishlist improving conversions across the site.
While designing this template I wanted to include some pops of colour but also keep a good balance with a clean minimal look. The selected states are a pastel peach highlighting the categories filters. The cart drop down would show the first three items, and truncate's after the third. Click on the cart drop down which takes you to the cart (or what's in your basket) page where the user can edit items easily and continue onto checkout.
A major pain point for online shoppers is slow loading items pages. I designed a “quick shop” modal which loads quickly keeping the shopper on the page they are browsing lowering bounce rates for slower loading pages as this would allow the user to add to basket instantly. The feature loads a page on top of the one they’re shopping on, giving them a quick look at the merchandise’s key information. That way they can choose colour and size and quickly adding to basket. When finished, they just click out and continue shopping. I believe it‘s more efficient than loading an item page, especially if you're shopping on mobile.
On the mobile app this would not be required however as soon as you have tapped onto the items page the add to basket CTA would be clearly visible next to colour and sizing options across at bottom down from the image.
Within the ecommerce industry, the demand for mobile apps is booming. People spend more time than ever on their smartphones. Retailers need to adapt to accommodate the shift towards mobile preference. In the past, I’ve sketched out many app concepts. But I wanted to add a few screens into this template I designed. I included a landing page design for App commerce, with additional login screens and dashboard.
The right-hand side image shows the dashboard design for mobile. It manages the backend of the site. Any customer enquiries, such as shipping, returns, refunds, and orders can be easily managed on the go. It also tracks fast/ slow moving products so that you can push accordingly and loop in with marketing The landing page focuses on the collections and the whole collection is clickable encouraged by a simple underline leaving the focus on the products, a big CTA button would block this. Lastly working back to the first screen here I am showing the login screen design this would be for a returning customer who has already created an account.
“If you do build a great experience, customers tell each other about that. Word of mouth is very powerful”
Jeff Bezos, Founder of Amazon
I believe an ecommerce product is more valuable when it can maximize conversations and direct customers through the sales funnel. I designed the dashboard with business owners and employees in mind, essentially the dashboard is the backbone of the business so it needs to be functional but also aid in the overall design aesthetic, and experience of its users.
Through the dashboard they can efficiently track sales and other daily tasks. Flagging customer enquiries is simple and done from the main screen, so nothing gets lost in a pesky subpage. The stats are clear and easy to track. Plus, you can assign tasks to coworkers.
Additionally I included an option that lets the team forecast daily sales, encouraging them to hit their targets. Or they can pinpoint low-revenue items, and pivot to a marketing blast or create new content for sales.
Every aspect of my design is centred on vibrant fashion imagery and relaxed social aesthetics. My choice of typography, Northwell paired with San source pro, builds texture with layers of black and white, a hot trend right now in web design. Overlapping the font with images or description cards, adding additional contrast and texture to the page.
Achat (which means to purchase in french) comes from my love of fashion and visual design. A place where shoppers experience the latest tech, layered with an editorial sense of empathy. It’s everything I enjoy about ecommerce—my online shopping aspirations brought to life.