Be More
Project type:
E-commerce, Web
Services:
Web Design,
Mobile Design,
UI/UX Consultation
Client:
"Be More" is an online shop offering products in the field of health, nutrition and cosmetics. The team is proud that each of their products is with high quality and proven origin. This website is the new version of Vitaslim e-shop. The project was realized while working with Stenik Group
Project goals
Working with this client was easy and pleasant because they already had some ideas for the site appearance and they've send us lots of references. They also had eye for the details, typography and aesthetics. The main requirements were that the design should be very clean and minimalistic and with very simple navigation that doesn't distract browsing categories.
Another challenge was that the client has a lot of promotion packages combining more than one product and that product image had to be presented in a meaningful but also non obtrusive way. Also many products had different packing sizes so they had to be presented as a product options with separate price.
Last but not least the supplements description includes a lot of information like effects, intake, contraindications etc. and thus it had to be dissected in a readable and easy to scan chunks. The user should not be lost while reading all the content and to have an easy way to order the product once she decide that she had read enough.
Solutions
-
We started experimenting with some typefaces that included Bulgarian Cyrillic in order to have more legible texts and we've settled on "Gotham" because of it's bigger x-height plus the modern feeling it gives. The navigation was decided to be full width with no margin between separate buttons so that it looks cleaner and makes the whole design breathe more.
The nature of the products in the shops made us choose for backgrounds only white color alternating with light gray thus giving sense of trust and pureness. Product image for promotional packages were formed by using separate products combined with a red plus icon so that it indicates a promo but it's also consistent across the website.
Product description was separated in different blocks with distinctive title, and the intake and contraindications were marked with icons so that they pop up more as being very important.
Another cool feature is the floating tabs with a line for quick reminding of the product price and button to add to your basket. -
Going for the wider grid wrapper for the desktop version allowed us to have more products on each row and respectively on the whole screen. Buttons for buying and adding to wishlist are again in the same stylistic as navigation - no space between and having only a thin border thus reaching further that goal for clean design.
-
Adding tips for shipping discount using the same delivery icon from product details page is also very useful to get the users' attention. Having the system message in a fresh color close to the logo color palette is also important for keeping design consistency.
Mobile version
