We soon have to develop a e-commerce platform in Flutter for one of our customers. We decided to do a small case study. Below are the pictures, some details and of course like always, the source files which you can download for free.

Please press "L" and leave your positive feedback so we can improve our design.

Don't forget to follow us, we will always follow you back! Spread the Love!

Provide your users on the web and mobile platforms with the best possible experience. High quality websites, web shops, apps, designs and other digital products. Feel free to contact me personally at: angelo@digitalforge.nl

Work Inquiries - info@digitalforge.nl

Check My LinkedIn | Facebook

Digital Forge Instagram | Facebook | Behance | Linkedin | Pinterest | Twitter

The home page

For the index page we choose to have the menu icon, shopping cart icon and logo to be prominent visible.

We have a "highlight" which rotates on each page refresh. It consists of the most popular items in the store. It shows a "sale" button to get the user his attention and hopefully a click to go to the product's details page.

We added a heart icon so people can keep track of favorite products. This way they can never lose track of a product they are interested in.

Below that we decided to add a simple slider which shows a x-amount of products per brand. The user can easily swipe from right to left. The product is displayed as a small image, the prices is displayed and we again added the heart icon to add the product to one's favorites.

Product page

For the product page we again added the "header" in a prominent way so it will always be within reach for the user.

We showcase the chosen product in a large view, again we show that this item is on sale by adding the sale icon to the top left.

On the top right we have the "add to my favorites" icon again.

Below that we have the product specifications. It shows the product name and series and a short product description. The description is very important for SEO.

Below that we have the size picker. Users can easily see what sizes are available and click on the size they want to order. The chosen size will be highlighted with a blue background and orange letters.

Below that we have the add to basket button and on the right side the price. We placed the price on the bottom so the user will first see the image(s) and read the description. Even if the price would be a bit to high, after seeing the beautiful image(s) they most likely will still add the item to their shopping basket.

Shopping basket

For the shopping basket we decided to use a simple table layout. Display the product (image), the product name and the amount to buy. Plain, simple and straight forward.

To make things a little bit less boring, we decided to add a overlapping menu with a small shadow below it to give everything a little bit more depth.

In there the usual stuff like shipping costs, vat and total costs.

To give customers a safe feeling, and to pull in the customers who still have a little bit of doubt whether to buy it or not, we decided to add a "100% cashback guarantee" banner.

If a customer is not happy, they can simply return the product (if not damaged) and they will be refunded.

Below that a button which will, on being pressed, go to the next screen.

Payment screen

Again, less is more, so we kept it simple. If you are a returning customer and you have an account, your saved cards will be displayed to save you some time. You also have the option to add a new card.

If you want to pay with a different method, we added a section "Payment methods" below the "Saved cards" section which is optional visible depending if you have any cards stored.

If you press any of the payment methods they will be highlighted so you know you selected one.

Proceed to the next page by clicking the Payment method.

Order placed screen

After the payment is successfully processed, the customer is taken to the last page.

We start off with a large icon clearly showing that the purchase was a success. The icon is accompanied by a little bit of text explaining to the user what to expect next i.e. they will receive an email with a track & trace code immediately after the package is send.

Below that we designed a truck, because we are about to ship their package! Oh, and it just looks nice to have something to fill the screen with...

Below that, obviously, a return to the home page button.

Contact page

Obviously, a web shop needs a way for their customers to contact them. Besides a FAQ, people generally just want to get the help they need instead of going through loads and loads of pages or talking with a chat bot that 9/10 times cannot help you anyways.

So we decided to add a old school contact form. Plain and simple and very quick to fill in.

Fill in your name, e-mail address, telephone number and a message and that's all.

Press the large blue button to... well... you guessed it! Send the message to the shop owner.

Accessibility

We chose to keep a lot of white space and colors to improve the overall accessibility. Blind and visually impaired people would really appreciate websites and apps that offer a proper accessibility. Think about contrast, tabs and stuff like that.

FYI What we personally did (going to do) is add a switch to the app i.e. darkmode. It will offer a mode special for blind or visually impaired people. In the above screenshots not every is 100% perfect if you are visually impaired since this is the regular template.

Last but not least

We chose not to use any "real black" colors in our design. Instead we used a very dark grey color.

We wanted to go with blue tones but also needed a color to highlight things. Our pick was the orange color because it would look nice for i.e. the "sale" icon and for highlighting text on various places.

We used Inter as our font, because it offers a high readability and it is, in general, just a very good looking font. You can download it for free from Google.