dr.vegan
dr.vegan
vegan supplements tailored to you
OVERVIEW
Dr.Vegan’s mission is to bring clarity, simplicity and ethics to nutrition and supplements. They believe everyone should be able to access high-quality, environmentally friendly, ethically sourced, natural, plant based ingredients, but also to understand their own nutritional needs. That’s why they also provide a free, online Diet Profile that helps anyone learn more about their diet and deficiencies, so that they can order the right products for them. I was the UX/UI designer working on the Shopify project, in collaboration with designer Thomas Cescousse for the diet profile.
⏤ 00 THE BRIEF
Dr.Vegan was looking to build a new, fully transactional website which enables the business to sell their products directly to consumers both as a one-off and with a recurring model. The new Shopify website was to carry across the brand’s strong visuals and allow a number of functionalities for both the management and the users. An ambitious and important functionality was the customisable diet profiling decision tree which would allow the client to collect customer data and flexibly improve the offering.
⏤ 01 THE DIET PROFILE
The logic and the questionnaire were built on SurveyJS – we had to design within the limits of that software’s customizations. After that, the results would display on the diet profile, completely tailored to each user, featuring their diet, their deficiencies and the suggested products to meet their nutritional needs. They were then able to save and share it. We thought about the best UX and UI to showcase the different categories of foods, specific nutrients, their benefits on the body and levels for each profile.
⏤ 02 HOMEPAGE
The brand features a lot of different bright colours and bold typography. The idea through the website was to make use of these colours to represent given things, or highlight specific words or elements. On the homepage, we wanted that bold type to highlight these specific elements, while also hinting at another version of Dr.Vegan’s logo. The coloured blocks behind the images match the buttons’ underlines and hovers.
⏤ 04 THE COLLECTION PAGE
We customised the collection page so the colours could be used to represent one part of the body ⏤ so if you are looking for something that would benefit the brain for example, the hover and the filter colour would be a specific blue from the brand. To easily show the benefits that goes with each product, the hover also reveals different key points about a given supplement. This mechanism is also found on the Homepage’s filtering system.
⏤ 05 THE PRODUCT PAGE
The product page needed a lot of customization as well to meet Dr.Vegan’s special requirements. We used metafields to include not only the relevant icons, but also the benefits that go with each supplement. The rest of the page is tailored to each product, going deeper into its ingredients and all of their positive effects on the body. Several sections have been added to explain more about the brand and its values.
⏤ 05 THE CUSTOMER PORTAL
For subscriptions, we use the ReCharge integration, which is one of Little Vitamin’s partner. We always work with them to build an experience that is suited for the client’s project. The customer portal is designed and developped through their ReCharge Theme Engine, and allows the user to easily skip, pause, edit or add a new product to their subscription. We evolved the basic portal to apply Dr.Vegan’s branding to it.
We’ve build all of the other pages of the website and designed the different ‘About’, ‘How it works’ and ‘Diet profile’ pages.