Logo

Greenvines

Greenvines: A revolutionary life from genuine skincare

Greenvines is a unique lifestyle brand that builds both fresh and personal care products to reshape how we can live better, healthier in a more sustainable way. With the belief that 'innovation can be sprouted', the team extended its product lines into green personal care products customised for our bodies’ real and only needs. These are all small things we take for granted in daily life but have a significant impact on our health and environment.

Challenges

Harris, who is one of the founder of Greenvines, also a graduate student from MIT Sloan. He carries their culture while leading the brand to achieve more than 30 million dollars a year with 70 per cent through e-commerce. Being partnered with an experienced marketing expert, our challenge not only to translate the brand value into a delightful user experience while expressing the personality of it. The redesign aims to be more 'unified' and 'recognisable' while preventing it from feeling 'disjointed'. While designing solutions with inbound marketing strategy, there is a lot of negotiations and trade-off in the UX perspective. Nevertheless, advanced strategy and SEO was implanted as well as many other features that we both satisfied with the outcome.

Primary Research:
Discover phase

We began our engagement with an overhaul of their website. By communicates back and forward, we summed up the essential requirements that would need to be fulfilled. Started from sitemap rearrangement, we tried to recompose all the critical elements together in one canvas. I learned so much from this session, for a lot of times; people usually tend to give 'What to do' feedbacks instead of 'What is the problem'. Through conversations, experiments along with a series of discussions with wireframes, we can discover the pain points hence to suggest the best solution.

Sitemap
Sitemap
UI Flow
UI Flow
Wireframe
Wireframe

Followed by understanding the needs from Greenvines, the whole site was built to accommodate flexible ordering of different modules. Together with the in-house designers of Greenvines, we created some flexible product stories modules. Product pages can be constructed creatively with some pre-designed sections which give more freedom to the content managers. A tailored made review system is another highlight in our design, by requesting the skin and hair condition from users who write a review can help our clients manage more member information.

Product page modules proposal
Product page modules proposal
Colour direction proposal
Colour direction proposal

This is the first time for me to execute the principles and patterns what I've learned from 'Microinteractions' by Dan Saffer, by making UI animated transition to deliver delightful user experience. Through using Lottie by Airbnb as well as bodymovin, it gets effortless and efficient to render animations made by After Effect to a json file for front-end developers to implement. Every detail should be careful to give a better experience to users while visiting the site.

UI animation
UI animation
Lottie made by Airbnb and Bodymovin
Lottie made by Airbnb and Bodymovin

Closing

It's a precious experience to collaborate with local founded business. Taiwan has a unique environment in the e-commerce market that there are several gateways to different logistics and payments systems. Not only dealing with global credit card payments, but also Alipay and UnionPay from China. Furthermore, picking up parcels from convenient stores boost the complexity of the designing for user flow. While we've done this much at the research and design stage; unfortunately, after developing the front-end mock-up we came into a chaos of project managing and team members shifting, leads to an outsourcing back-end support. From this, I experience the extra cost of communicating, which thankfully we kept all records in documents that make things easier. While there are ways we could dig this project further, I'm happy with the outcome.

Tools: Adobe Photoshop, Adobe Illustrator, Adobe After Effect, Adobe Premiere, sketch2ae, Lottie, Adobe Acrobat, Invision, Zoom, G Suite, AxureRP, Jira, Confluence, Sketchapp.