BetterButter

User Interface and User Experience Intern.

• Live Preview
• project duration: June - July 2015.

About BetterButter

BetterButter is a social discovery platform for recipes. The New Delhi based startup allows users to share recipes from family classics to their own inventions and discover new recipes from households across India and also from celebrity chefs.

Idea

Through market research, the founders came to the conclusion that food and beverages is the second-most searched category by Indian women, with recipes topping the search. They also found that India is the world’s largest consumer of ‘recipe content’ on YouTube. Up until now, the recipe space in India has remained fragmented across a variety of blogs, Facebook groups, and YouTube channels. BetterButter intends to change that and wants to become the ‘home for recipes’ in India.

Recommendation

Prastut worked with BetterButter from 1 June 2015 to 31 July 2015. Prastut joined at a critical phase for us, five weeks before we were due to launch, at a time when our website was still under development. Whilst we had senior developers building our website, we lacked a dedicated UI/UX resource at the time of his joining. Initial feedback from early influencer’s and bloggers in the Indian food community has been very positive, and Prastut has played an important role in this despite his young age. A startup environment requires original thinking and a self-starter attitude, to produce quality work with little guidance. Prastut embodies these qualities, which made our experience with him highly rewarding.

My Role

My responsibilities included designing the current homepage of the website, a number of inner pages, as well as key launch marketing collaterals for social media and email distribution. The user experience (UX) was improved also.

• Initially easy design work was assigned to me in order for me to get accustomed to BetterButter’s design philosophy and the vision they are bringing through the product.
• Design work started with lo-fidelity mockups which were converted to high-fidelity in Photoshop.
• I was able to pick up frontend development while designing, so after approval the designers were HTML-ised. The Bootstrap framework was used to make the designs responsive.
• Repeated design iterations were done using the insights from beta testing.
• Finally most of my designs were accepted and merged into the actual product.

Design recommendations

I was asked to provide design recommendations for the beta. Recommendations covered overall viability and UX to even font selection. Since BetterButter lacked a UI/UX resource, the responsibility given me was enormous. Finally all these recommendations were accepted.

Redesigning the website

After successfully integrating with BetterButter team’s workflow, I was tasked to redesign the homepage. The team felt that UX felt clunky and had to simplified considering the major product user base was targeted at women aged between 25-45. I proposed to adopt mobile first design approach even in the website, which was accepted unanimously by the team. After a lot of discussion and debate, the team was able to group all the features into three categories to make the process of on-boarding as self explainable as possible.

Examples of redesign

Since I had to design keeping in mind the existing platform, my freedom and imagination was restricted. I spoke to the founders about this and they supported my vision of incorporating material/flat design into BetterButter. Combining my efforts with the developers, we worked 24*7 to convert the platform to adapt to material design guidelines: card based UI was introduced, a strict design guideline was established and parts of the website were optimized like fonts and icon-set.

Rejected Designs

I faced some setbacks related to the vision about design I was trying to bring to BetterButter. Since I was just joined college, my opinions were largely inspired from companies having crazy valuations. Through my mentor’s supervision I was able to learn to take feedback gracefully. I needed to realize that designing for the targeted user base should be my top priority. When my internship finished and I looked back at these designs, I realized the complexity from the user’s usability perspective.

Graphic design is part of web design, but if a web page doesn’t get traffic, it gets no conversions, and it fails. That means the design fails.
If a page gets traffic, looks cute, but doesn’t have any real measurable impact on the visitor, it fails. The design fails.

After repeated rejections, I was able to understand the fine line that the above quote conveys.

Finalized Homepage Design

After 20 days into the internship and repeated A/B testing we were able to finalize on the website’s landing page as well as implement the same into production. Graphic designs were used to make the website’s approach playful and approachable. We were also able to incorporate contextualized search thanks to the developer team so that the user friction in finding things gets reduced marginally. Tagging these recipes for search also lead to a better SEO.

Earlier the website showed various recipes being uploaded onto the platform. This lead to a poor engagement model: people left as quickly as they came in. Since we wanted the users to stick to the platform as much as possible, the team came up with the concept of “contests”: an engagement model tying new products of the sponsors to consumers. The consumers get validation by winning the contest and receiving goodies, thus strengthening the engagement loop. The sponsors were able to get crucial feedback of their products through this effective consumer channel. Through the simple use of a jumbotron we were able to catch the user’s attention, and I was able to realize the power of effective design in business.

Add Recipe User Interface

Contest Page

Marketing and Promotional design work

Posters for promoting BetterButter on hiring channels like LinkedIn, AngelList.

Posters for promoting BetterButter on social media.

Conclusion

Before I joined BetterButter, I thought about myself as a design amateur. After I left BetterButter, I thought about myself as a more aware design amateur. I thank BetterButter for providing me the crucial foundation and validation for my interests in design. With the experience I gained here, I was able to smoothly transition to projects with increased level of complexity. It also helped me cover broad areas that product designers are likely to encounter in their professional careers.