Stuti Bhatt Graduation Project Document Cohort 2014 - 2018
School of Visual Communication G R A D UAT I O N P R O J E C T Project Title
:
UI/UX for Herbivore
Sponsor
:
Open Strategy & Design
Student Name
:
Stuti Bhatt
UID Id No.
:
UA1418128
KU Id No.
:
20170301830
Batch
:
2014-18
Programme
:
Visual Communication
Internal Guide
:
Titu Mili
Year
:
2018
UNITEDWORLD INSTITUTE OF DESIGN
The Evaluation Jury recommends for final project from the Unitedworld Institute of Design in the School of Visual Communication, herewith, for the project titled
on fullling
the further requirement by: Chairman: Name
Jury members
Associate Director
Comments
Signature
Organisation
Completion Letter from Sponsor Open Strategy & Design
All rights reserved. This Graduation Project is the work done in my five month internship at Open Strategy and Design, Mumbai, under the academic curriculum of Unitedworld Institute of Design, Gandhinagar. All the works that have been included in this report are copyright protected. All copyrights reserved with Open Strategy & Design. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including photography, recording, or other electronic or mechanical methods without prior permission of Open Strategy & Design, except in the case of brief quotations embodied in critical reviews and certain other non commercial used permitted by copyright law. Graduation Project, Year 2018 Unitedworld Institute of Design Visual Communication -- Batch 2014 -18 Design and Editing : Stuti Bhatt Published in 2018 Printed at Chhaap Digital Offset, Ahmedabad
Originality Statement
I hereby declare that this submission is my own work and it contains no full or substantial copy of previously published material, or it does not even contain proportions of material which have been accepted for the award of degree or diploma of any other educational institution, except where due acknowledgement is made in this graduation project. I further declare that the intellectual content of this graduation project is the product of my own work, except the extent of assistance in the project’s design or conception or in style, presentation and linguistic expression is acknowledged. This graduation project(or part of it) was not or will not be submitted as assessed work in any other academic course. Student Name in Full _____________ Signature _________ Date ___________
Graduation Project 2018 Unitedworld Institute of Design
Stuti Bhatt Visual Communication Batch 2014-2018
“Tetris taught me that once you fit in, you disappear.�
Contents Preface
017
Phase 2
Phase 3
Acknowledgement
019
Research of the Subject
Information Analysis
Phase 1
022
UI/UX
041
Stakeholder Study
092
Introduction
024
Case Studies
046
Stakeholder Map
094
026
About Herbivore
058
User Interviews
096
028
Current Website
068
Redefined Brief
099
031
User Interview
079
034
Mind - Mapping
086
About UID About Me Institute Guide About the Sponsor Industry Guide Project Brief
Phase 4
Phase 6
Ideation
Herbivore App
Grid
104
Brief
157
Conclusion
225
Typography
106
Mobile Application
159
Webliography
227
Wireframes
113
Case Studies
160
Concept I
114
Information Architecture
167
Concept II
122
App Logo
168
Concept III
127
Grid
169
Concept I
170
Phase 5
Concept II
175
Final Prototype
Wireframes
180
Final Prototype
195
Style Guide
212
Final Prototype
143
Preface
Preface This is the documentation of my graduation project done under the curriculum of Unitedworld Institue of Design, in the year 2018. The document covers my entire process of how I went about and grew through this project.
I would like to thank my supervisors for their excellent guidance and support during this process. I also wish to thank all of the respondents, without whose cooperation I would not have been able to conduct this analysis.
When I was offered this project, I was excited to take it up. The client’s brand seemed interesting and fun to work with. The client had design knowledge and understood the design process. While the entire experience was a great learning for me, it was also very exhausting. There was too many trial & errors and rejections. But the end product made me feel like it was all worth it.
017
Acknowledgement
Acknowledgement I deeply appreatiate the assistance, help support and guidance of numerous people. UID, for being the right place where I grew and learnt about design and so much more. For all the education the institute provided, and for all the exposure and the guidiance. All my faculties at UID, for always being kind enough to bare with us and help us reach success. For all their teachings, inputs and for letting us explore things whenever we wanted to. Titu Mili, for being the great mentor that he is. For being kind and supportive throughout my project, and for always motivating me to do the best I can. Sunil Gupte, for his valuable inputs through the past two years of my college life.
Lolita Dutta, for being this incredible new HOD that the department of Visual Communication is grateful to have. Also, for her efforts to help us all get through our projects in the best way possible. Open Strategy & Design, for giving me this opportunity to be part of their studio for five months, and of course, for this project. And for being extremely supportive and welcoming. Amit Joshi, for being the best mentor I could ever get. For being patient and taking interest in my ideas and help me take them forward. And for all the inspiring and thought provoking conversations. Bhakti, for guiding me through my journey of Herbivore and helping me with all the problems I came up with.
Janani, Madhvi, Sai, Arjun, Dhwani and Pravin for the constant support and keeping me motivated throughout my project. Puneet, for patiently answering all the questions I kept asking about Herbivore. Housemates in Bombay, for their warmth and great company. All my friends, for contributing to my growth with their stories and experiences. And also for their inputs for my survey. Shaunak, Vaidehi, Karishma, Maitreyi, Kairavi, Heer, Kuldeep, Shashank, Debojyoti and Chinmayee. Mom & Aaji, for all the love and support. For giving me the freedom to explore and grow, and for always being supportive of my descisions.
019
01 Introduction.
Stuti Bhatt | Graduation Project 2018
UID, as seen from the bird’s eye.
022
Unitedworld Institute of Design
Unitedworld Institute of Design Making rapid progress in a very short span of time, Unitedworld Institute of Design is now one of the top design institutes in India. I was amongst the third batch of the institute, and have seen the institute grow and make progress, taking us along with it. The institute has always helped us, from taking our first stepsinto the world of design, to now, working in the real world.
UID is a unique platform, with many problem solving capabilities. From my very frist day to the last, the college has been extremely supportive on our side. They have always helped us with their guidiance and teachings. The beautiful green campus adds up to the amazing four years spent on my college life.
The exposure it offers to students is unmatched by top design colleges in India. Precisely why its popularity grew among design institutes in India in a short span of time.
023
Stuti Bhatt | Graduation Project 2018
Stuti Bhatt
024
Student of Visual Communication
About Me
About Me I’m 22, currently in my final year of Visual Communication at Unitedworld Institute of Design, Gandhinagar.
My main interest in communication design revolves around brand identity and editorial design. So, this project was kind of a challenge for me to explore the field of UI & UX design.
I’ve always been a little confused or rather distracted towards what I really want to do. Design was my last option to pick from and who knew it would turn out to be the best. From learning about communication to being more mature towards life, I’ve grown through these beautiful four years spent in this institute. I am the kind of person who takes pleasure in the most odinary things.
025
Stuti Bhatt | Graduation Project 2018
Titu Mili
026
Faculty of Visual Communication
Institute Guide
Institute Guide Titu Mili has completed his Master of Design (M.Des) from National Institute of Design, Ahmedabad in Visual Communication with specialization in Graphic Design. He is from a small town called Sivasagar in Assam. He is currently working at Unitedworld Institute of Design as a faculty in the Visual Communication department. He believes design to be a tool to reduce chaos and bringing order into our life. He is ambitious to explore possibilities that draw upon logic, imagination, intuition, and systemic reasoning, to create desired outcome that benefits the end user. He has join Railway Design Center for his Graduation project, which took him to almost all the parts of India doing ethnographic research.
Before joining UID, he leaded design team for developing Amaravati Capital City Way-finding System under Integrated Design Service (IDS), NID. He has done a design intervention for NGO Aajeevika Bureau as Internship, which turn out to be an UI UX solution for Internal Migration Registration & Information system.
Photography is his passion, entered to the beautiful world of publication as a profession. He loves the tactile feeling of paper, weight of hot metal type, smell of ink and so Letterpress too. His design sense is incredible, especially when typography is involved in the picture.
He has conducted workshop on relief printing & Letterpress at PrintLabs, NID and another workshop for Product design students at NID, on Typography and Print Production. His area of interest is Typography, Way-finding & Signage Design, Illustration, Cartography, Packaging Design, Photography, Motion Graphic and Visual Effect, Developmental Communication, Tribal study and rural empowerment.
027
Stuti Bhatt | Graduation Project 2018
Open Strategy & Design Open Strategy & Design, started by Mangesh Rane, is a modern branding and advertising agency, with strong and creative design credentials. Open has a total of six partners, namely, Mangesh Rane, Rahul Kaloti, Ashutosh Karkhanis, Asparsh Sinha, Puneet Pandey and Amit Sharma. They are all highly skilled and experienced in their respective fields.
What they do: Business opportunity articulation Brand positioning & Identity design Product strategy Service design Digital experience Retail experience Internal culture design Creating brand narrative
Open has a brilliant team of multidisciplinary designers, strategists and copywriters, who altogether bring out valuable inputs for all kinds of projects.
028
Industry Guide
Industry Guide Amit Joshi is a highly experienced visual designer, currently working at Open Strategy & Design as a Creative Director. His vision and attitude towards design is something I looked up to everyday. He never settles and is always willing to solve the design problems in the finest way possible.
“Celebrate Design.” This is what he used to keep saying to us. For him, design was equal to a festival which should be celebrate everyday with joy and with fellow mates.
For him, design isn’t just a job, but is something he really looked forward to everyday. He strongly believes in problem solving and putting a great thought before any design.
031
Stuti Bhatt | Graduation Project 2018
Why stop dreaming when you wake up?
Work for money; Design for love.
032
Typo Cafe, a place for having meals and gatherings, or when you just want to work by yourself in the fresh air.
Casper, the biggest distraction at Open.
A little plant adding a sense of calmness to the studio.
033
Stuti Bhatt | Graduation Project 2018
Project Brief Herbivore is a gourmet vegetarian food service, launched to give vegetarians more options than the usual potato and paneer that they find on menus. The website needed to capture the proposition in an evocative manner. It was going to be a lifestyle brand - hence there was a need for an engaging brand personality and tone.
034
Project Brief
Solution - Current Website Vegetarianism is mostly presented in the framework of health and sustainability etc. Which often leads to a preachy tone. We wanted Herbivore to come across as a modern, friendly brand. From its core promise - ‘The infinite vegetarian’, right down to the nomenclature of its meal plans: ‘You had me at hello’, every little piece of conversation created this engaging, likeable lifestyle brand.
035
“Make new mistakes.”
02 Research of the subject.
About User Experience Design
User Experience Design User experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function. UX design covers a vast array of other areas, too. A UX designer is concerned with the entire process of acquiring and integrating a product, including aspects of branding, design, usability and function. It is a story that begins before the device is even in the user’s hands.
Typical Outputs Include: Persona, an archetypal user for whom the product or service is being designed. Wireframes, screen blueprints or storyboards. Prototypes, for interactive or in-the-mind simulation. Written specifications, describing the behavior
Experience design is a complex, versatile and time-consuming stage of the product development. The well-organized process takes the pressure off the team by reducing misunderstanding and making results predictable. In this article, I’d like to focus on mapping the mainstream method to real-life projects and putting together deliverables.
or design, e.g. user cases. Site audit, usability study of existing assets. Flows and navigation maps, User stories or scenarios, Sitemaps and content inventory, High-fidelity visual mockups, precise visual layout and design of the expected product or interface.
041
Stuti Bhatt | Graduation Project 2018
Stages of User Experience Design Stage 1. Ideation The goal of this stage is to figure out how the client’s business works and what are product objectives. A low-fidelity prototype is a tool which helps to confirm your mental model of the product with stakeholders and discuss general design approach. At this point, we are looking for an answer on “What are we building?� question.
Common pitfalls This stage is usually gets squeezed to an insufficient minimum or omitted entirely because of these things:
Low-fidelity prototype The sole purpose of this deliverable is to illustrate our approach to the design of the particular product. At this point, all we need is to clarify the navigation for the central scenario and define design patterns (e.g., wizard, set of cards, a WYSIWYG editor and so on).
One may think this step is going to be timeconsuming, especially the part where we make business process diagram, and it makes more sense just start drawing screens right away.
042
The false impression that everyone understands everything because they said they do.
Another problem is that designers sometimes get carried away with their ideas. They tend to dig too deep into details instead of focusing on a big picture, so the stage is fading away before designer has a chance to acknowledge that.
About User Experience Design
Stage 2. Prototyping At this stage, our goal is to think through every aspect of the interface and put together thorough documentation for visual design and development. Common principles Keep navigation obvious for users: make sure they grasp where they are at the moment and what is going to happen next. Don’t invent new controls and patterns if it’s not necessary, use most common ones when possible;
Project Documentation End users of a wireframe are your peers, software engineers, and managers. Make sure documentation is friendly to them. A wireframe itself is not a self-sufficient deliverable. Use text annotations, links to references and so on. Keep it structured: sequence pages meaningfully and make sure they reflect the business process.
Use real or real-like data, including names, texts, and pictures — keep it as neutral as possible; Consider different density of content on the screen and different states of the system.
043
Stuti Bhatt | Graduation Project 2018
User Interface Design User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. User interfaces are the access points where users interact with designs. Graphical user interfaces (GUIs) are designs’ control panels and faces; voice-controlled interfaces involve oral-auditory interaction, while gesturebased interfaces witness users engaging with 3D design spaces via bodily motions. User interface design is a craft that involves building an essential part of the user experience; users are very swift to judge designs on usability and likability. Designers focus on building interfaces users will find highly usable and efficient. Thus, a thorough understanding of the contexts users will find themselves in when making those judgments is crucial. You should create 044
the illusion that users aren’t interacting with a device so much as they’re trying to attain goals directly and as effortlessly as possible. This is in line with the intangible nature of software – instead of depositing icons on a screen, you should aim to make the interface effectively invisible, offering users portals through which they can interact directly with the reality of their tasks. Focus on sustaining this “magic” by letting users find their way about the interface intuitively – the less they notice they must use controls, the more they’ll immerse themselves. This dynamic applies to another dimension of UI design: Your design should have as many enjoyable features as are appropriate.
UI vs. UX Design Often confused with UX design, UI design is more concerned with the surface and overall feel of a design, whereas the latter covers the entire spectrum of the user experience. One analogy is to picture UX design as a vehicle with UI design as the driving console. In GUIs, you should create pleasing aesthetics and animations that convey your organization’s values and maximize usability.
About User Interface Design
User Interface Design Process User interface design requires a good understanding of user needs. There are several phases and processes in the user interface design, some of which are more demanded upon than others, depending on the project. Functionality requirements gathering – assembling a list of the functionality required by the system to accomplish the goals of the project and the potential needs of the users. User and task analysis – a form of field research, it’s the analysis of the potential users of the system by studying how they perform the tasks that the design must support, and conducting interviews to elucidate their goals. Information architecture – development of the process and/or information flow of the system.
Prototyping – development of wire-frames, either in the form of paper prototypes or simple interactive screens. These prototypes are stripped of all look & feel elements and most content in order to concentrate on the interface.
Graphical user interface design – actual look and feel design of the final graphical user interface (GUI). It may be based on the findings developed during the user research, and refined to fix any usability problems found through the results of testing.
Usability inspection – letting an evaluator inspect a user interface. This is generally considered to be cheaper to implement than usability testing, and can be used early on in the development process since it can be used to evaluate prototypes or specifications for the system, which usually cannot be tested on users. Usability testing – testing of the prototypes on an actual user. User interface design testing allows the designer to understand the reception of the design from the viewer’s standpoint, and thus facilitates creating successful applications. 045
Stuti Bhatt | Graduation Project 2018
Case Study I - Mixt Mixt Greens was founded in San Francisco in 2005 – to provide high quality salad options, and set the bar for sustainable business practices. They have restaurants throughout the Bay Area and Los Angeles; serving over two million pounds of locally-sourced organic ingredients per year. Brand Story The people behind Mixt have worked hard since day one to ensure that everything they serve is nutritious and of the highest quality. Character wanted to bring their story to life by not only showcasing the work that goes into creating and maintaining Mixt, but also the moments that got them to where they are today. After candid conversations about running a family business, the rewards and challenges of building an environmentally friendly brand and 046
the internal staffing and sourcing processes, they were able to craft a company narrative that was true to Mixt. From their roots to their philosophy and growing “movement,” they helped them define and articulate what Mixt stands for today and for years to come. Why Mixt? Mixt greens is a brand with similar qualities as Herbivore. The main similarity being both of them serving fresh healthy food. The brand tone and language was hence in the space where Herbivore aimed to be.
Case Study I - Mixt
Website Aimed at helping customers quickly find and order a Mixt meal, Character focused on three key themes — convenience, location, and seasonality. Since time plays a huge role in the lives of busy customers, they wanted to make ordering a stress-free experience — whether they’re ordering 1 or 100 meals. mixtgreens.com
Design Approach Tasked with evolving the beloved salad brand, Character started at the beginning — with the food. Not only did they eat Mixt on a regular basis, they learned about the Mixt process from the inside out. So they strategically focused our efforts on bringing that aspect to life through all touchpoints—from the logo, to the storefront, to the web (even down to the employee aprons).
Mixt Brand Illustrations
047
Mixt Website Home Page
Case Study I - Mixt
SWOT Analysis - Mixt
Strengths
Weakness
1. 2. 3. 4. 5.
High-quality, organic ingredients Recyclable packaging Seasonal meals available Catering service Have a third-party ordering and delivery partner 6. Menu changes four times an year
1. 2. 3. 4.
Opportunities
Threats
1. Home/office food delivery is a big market in every metro city 2. High quality, organic food delivery options are lacking in the market
1. Startups who onboard restaurants for food delivery will have far wider reach and higher scalability 2. Very small unorganized players who deliver for small and big orders both
Limited menu available Can’t choose specific meals Does not deliver small orders Takes more than an hour to deliver the food
049
Stuti Bhatt | Graduation Project 2018
Case Study II - Munchery Munchery is a San Francisco based service that provides premium prepared dinners from top local chefs, delivered to your door. Munchery is a conglomeration of chefs who offer continually changing menus to users. Chefs choose their dishes and source ingredients, and users rate the meals. Meals can be ordered up to 6 p.m. the same day, or a few days in advance. After trying the meals, diners can post reviews online, and they can also directly message chefs through the site.
050
Why Munchery? The Munchery and Herbivore brand offerings are same - premium prepared meals delivered to your doorstep. The Munchery brand language is very neat and hence becomes a nice example to get inspiration from.
Case Study II - Munchery
Munchery Website Home Page
051
Stuti Bhatt | Graduation Project 2018
Munchery Website Menu Page
052
Case Study II - Munchery
Strengths
Weakness
1. Healthy food options 2. Neat Packaging (hygine) 3. Reasonable and good quality food 4. Costs can be controlled greatly 5. Whole Value chain owned by company with no dependence on restaurants
1. Limited menu available 2. Variety of food is vast especially during festivities 3. Limited area of delivery 4. Scaling up the operations will be a challenge
Opportunities
Threats
1. Home/office food delivery is a big market in every metro city 2. Cost effective and good quality food delivery options are lacking
1. Startups like FoodPanda who onboard restaurants for food delivery will have far wider reach and higher scalablity
in the market
2. Very small unorganized players who provide tiffin services in offices 3. Logistics players like Mumbai Dabbawallas who are pioneers in supply chain networks
053
Stuti Bhatt | Graduation Project 2018
Case Study III - Sakara Sakara Life specializes in fresh, organic meals delivered weekly to your door. 100% plant-based, organic, ready-to-eat meals, delivered to you. Discovering The Power Of Food Founded in 2012, by Whitney Tingle and Danielle DuBoise, Sakara Life’s mission is to help transform people’s lives through the power of food. The founders turned their attention toward fresh, organic food to find answers to their own health struggles, and discovered the solution to healthy nourishment is in preparing and cooking plant-based meals. Soon this practice became their daily routine – and the rest is Sakara history.
054
Today, Sakara Life delivers to 48 states across the country and is a favorite among celebrities like Chrissy Teigen and Lily Aldridge. We worked with the Sakara team to redesign their Shopify website and order process, in addition to creating new assets for digital marketing. Why Sakara? Sakara Life provides premium quality ready-toeat food. The brand and it’s services are very limited to a certain range of people, just like Herbivore. The Sakara website’s look is very fresh and engaging. On the website, there are key pages to highlight the areas of the Sakara ecosystem that users are most interested in: the program itself, the founding story, and the science and nutrition.
Case Study III - Sakara
Sakara’s packaging and an essense of the brand.
055
Sakara Website & App Home Page 056
Case Study III - Sakara
Strengths
Weakness
1. 2. 3. 4. 5.
1. 2. 3. 4.
Nutrient rich food options High-quality ingredients Eco-friendly packaging Door step and on-time delivery Easy and convenient subscription plan
Limited menu available Can’t choose specific meals Limited meal plan options No system for refunds
Opportunities
Threats
1. Home/office food delivery is a big market in every metro city 2. High quality, organic food delivery options are lacking in
1. Startups who onboard restaurants for food delivery will have far wider reach and higher scalability
the market
2. Very small unorganized players who provide tiffin services in offices
057
Stuti Bhatt | Graduation Project 2018
About Herbivore Herbivore, a vegetarian lifestyle brand, is a rebellion. Against aaloo and paneer that greets us at every menu in every restaurant; leaving us no option but to choose from a handful of beloved but unimaginative dishes that bring no surprise. We are here to change all that, for the sake of your (and we admit, our) palate. At Herbivore they experiment, they discover, they dig up new recipes, they revamp beloved cuisines and then shake all these things up so that customers get exciting, adventurous food everyday. Brand’s promise – ‘The Infinite Vegetarian’.
058
Making vegetarian food unboring. The opposite of exciting, is vegetarian. For a country as hugely vegetarian as India, vegetarians surprisingly get a raw deal when eating out. The options boil down to choosing between aloo and paneer. Anubhav Ananda, a venture backed by the retail veteran and passionate vegetarian Bela Gupta, wanted to correct this. They were launching a food-tech brand of gourmet vegetarian meal like no other. The product proposition as the identity Herbivore came with a 15-day no repeat promise. Variety and imagination were the heart of the proposition. Open Strategy & Design created a dynamic identity which simply conveyed the idea of exciting meals.
Stuti Bhatt | Graduation Project 2018
Herbivore Color Swatches Primary
C20 M50 Y50 K00
C10 M20 Y60 K00
C15 M05 Y60 K00
C40 M25 Y60 K00
PANTONE 7607C
PANTONE 7403C
PANTONE 587C
PANTONE 5783C
C04 M03 Y06 K00
C00 M00 Y08 K04
C00 M03 Y15 K00
C03 M03 Y02 K00
Secondary
062
C10 M10 Y25 K00
C55 M50 Y60 K10
PANTONE 7527C
PANTONE 404C
About Herbivore
Herbivore Typefaces Logo - Sackers Gothic STD Sackers Gothic is a sans-serif typeface designed in 1994 by the Monotype Design Studio. It’s designed in the engravers style which means it has squat, wide proportions and is available in uppercase only.
Typeface 1 - Montserrat Montserrat is a geometric style of type that has subtle optical adjustments. The result is a sans serif family with multiple versions and multiple possibilities, both in the editorial and corporate realm.
Typeface 2 - Baskerville Baskerville is a serif typeface designed in the 1750s by John Baskerville. Baskerville is classified as a transitional typeface, intended as a refinement of what are now called old-style typefaces of the period.
ABCDEFGHIJKLM
ABCDEFGHIJKLM
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
NOPQRSTUVWXYZ
NOPQRSTUVWXYZ
abcdefghijklm
abcdefghijklm
abcdefghijklm
nopqrstuvwxyz
nopqrstuvwxyz
nopqrstuvwxyz
0123456789
0123456789
0123456789
)!@#$%^&*(
)!@#$%^&*(
)!@#$%^&*(
,./;’[<?”}
,./;’[<?”}
,./;’[<?”}
063
About Herbivore
Bela Gupta Herbivore is powered by passion and the discerning taste of Bela Gupta. Bela spent three decades in retail gathering experience in marketing but secretly harbouring a very different dream: to cook up a storm. In her extensive travels, she collected over 3000 recipes that she handwrote in diaries and occasionally dipped into, to try things for fun. Soon friends, family and complete strangers were calling upon her to cater their parties. And before you could say Bon Appetit, the idea of Herbivore had germinated and taken flight. Belaâ&#x20AC;&#x2122;s sharply honed insight mining abilities have helped craft the delightful and wholesome Herbivore menu. She remains committed to bringing her customers new, authentic and wholesome vegetarian experiences every day.
067
Stuti Bhatt | Graduation Project 2018
Herbivore’s Website Herbivore’s current website is designed by Open Strategy & Design, in 2016. During that time, the brand was very new and was just taking it’s first steps. The design studio did a wonderful photoshoot of all the healthy and delicious cuisines that Herbivore offers. The photographs have been used in the current website, and also in the design done by me, in both website and app.
068
So, the current website is highly photography oriented and has a very suttle look and feel of the brand. All the three services of Herbivore are equally in focus. The On Demand Menu is a highlight, as it is the only page where the menu can be viewed. Meal Subscriptions and Tailored Catering come next and are have been given equal importance.
About Herbivore
Current Home Page
069
Stuti Bhatt | Graduation Project 2018
Current About Page
070
About Herbivore
Current On Demand Menu Page
071
Stuti Bhatt | Graduation Project 2018
Current Meal Subscription Page
072
About Herbivore
Current Tailored Catering Page
073
Stuti Bhatt | Graduation Project 2018
Current Website - Site Maps To have a better understanding of the flow and navigation of Herbivoreâ&#x20AC;&#x2122;s current website, I went through it and figured out the site maps. On the right page, is the site map of Herbivoreâ&#x20AC;&#x2122;s current website.
074
After the site map are the maps for the On Demanu Menu, Meal Subscription, Taiored Catering and the hamburger menu.
About Herbivore
Site Map of Herbivoreâ&#x20AC;&#x2122;s current website
HOME PAGE - HEADER
ABOUT US
ON DEMAN U MENU
MEAL SUBSCRIPT ION
TAILORED CATERING
CAREER
JOURNAL
ORDER NO W
HAMBURGE R MENU
MENU ORDER NO W ABOUT THE CHEF
PARTNERS
VIEW FULL MENU
MENU
LET US KNO W IF YOU WANT TO CATER
CATEGORY MENU
MEAL SUBSCRIPTION DISH DETAILS
DETAILS PAGE
SUBSCRIPTIO N PLANS
ON DEMAND MENU
TAILORED CATERING ABOUT US
SUBMIT
JOURNAL PRESS
1 WEEK
4 WEEKS
CAREERS CONTACT US
SUBSCRIB E NOW
DETAILS PAGE
SUBMIT
075
Stuti Bhatt | Graduation Project 2018
On Demand Menu
MENU PAGE
HOME
ENTER LOCATION
SKIP TO SEE MENU
ORDER NO W
SEARCH
PROFILE
MENU
CHANG E PREFERENCES
VIEW DIS H
MENU
HI, STUTI
ADDRESSE SL
BACK TO ORDER ONLINE
CHANG E PASSWORD
ADD TO CART
EDIT ADDRES S
SAVE SAVE ADD ADDRES S PROCEED TO CHECKOUT
REVIEW CART
PAYMENT SELECT ADDRES S PLACE ORDER
076
REMOVE ADDRES S
OGOUT
About Herbivore
Meal Subscription & Tailored Catering
MEAL SUBSCRIPTIO N
SUBSCRIPTIO N PLANS
TAILORED CATERING
MENU FOR THIS WEEK
SUBSCRIBE 1 WEEK
VIEW FULL MENU
LET US KNO W IF YOU WANT TO CATER
DETAILS PAGE
4 WEEKS SUBMIT
SUBSCRIBE
DETAILS PAGE
SUBMIT
077
Stuti Bhatt | Graduation Project 2018
Hamburger Menu
MEAL SUBSCRIPTIO N
TAILORED CATERING
ABOUT U S
ABOUT TH E CHEF PARTNERS
JOURNA L
PRESS
CAREERS
BLOG
FEATURES & MEDIA PRESENCE
OPENING S DETAILS PAGE
APPLY NOW SUBMIT
DETAILS
SUBMIT
078
CONTACT US
User Interview
User Interview User interviews are typically performed with the potential users of a design, before the concept development. User interviews are one of the most commonly used methods in user research. They can cover almost all user-related topics and be used, for example, to gather information on usersâ&#x20AC;&#x2122; feelings, motivations, and daily routines, or how they use various products.
Interview for existing users
Interview for inexperienced users
First interview was for the existing users of Herbivore, who were familiar with the brand and itâ&#x20AC;&#x2122;s offerings.
The second interview was for the inexperienced users of Herbivore, for whom the brand was completely new.
Objectives. To understand if the website is friendly enough for them to get used to it after a while. To know the core problems of the website.
Objectives. To see if they understand what the brand is about from itâ&#x20AC;&#x2122;s website. To see if the current website is engaging enough to attract new customers.
I prepared questions for two types of user groups, one which is familiar with the brand and the other that is a stranger to it.
079
Stuti Bhatt | Graduation Project 2018
Interview Questions for Existing Users 1 A little about yourself, your age and profession.
2 How did you find out about Herbivore? 3 What led you to get a monthly subscription for Herbivore?
4 How is your experience with the current Herbivore website?
5 How do you cancel a meal? Since there is no cancellation facility provided on the website?
6 Will the service be easier to deal with if it brings a mobile application for it?
080
User Interview
User 1 Puneet Pandey, aged 45, works as a culture strategy head and managing partner at Open Strategy & Design. Puneet is the very first customer Herbivore has. He has been subscribing meals from Herbivore since almost 2 years now, which was right after Herbivore came into existence. Since he’s such an experienced customer, he has become quite friendly with the current website. He knows where to go for whatever he needs. One problem he comes across everyday is when he wants to check the “menu for the week”, he has make too many clicks to reach the page. He would like if this process would become faster.
Also, according to him, a mobile application would be better to use, for times when he wants to check the menu, skip a meal, or cancel one.
User 2 Jenny Sheth, aged 26, works as a visual designer at Open Strategy & Design. Jenny subscribes Herbivore on a weekly basis once in a month, when her mother is away. She doesn’t use the website very often, she directly goes to the subscription page, chooses her plan and does the rest of the procedure. Since she doesn’t use the service very frequently, it doesn’t matter to her if there’s an application for Herbivore or not. Although, she did suggest it would be useful for the regular customers.
081
Stuti Bhatt | Graduation Project 2018
Questions for Inexperienced Users 1 A little about yourself.
7 How did you find the navigation of the website?
2
Did you go through the entire website? If not, why?
8 What do you think the brand, Herbivore, is about?
3
At what point did you stop navigating through the website?
9 What do you prefer more, website or mobile application? Why?
4 Is there anything you didnâ&#x20AC;&#x2122;t understand about the website?
5 Did you find the website interesting? 6 What is it that you found the most engaging and unique about the website?
082
User Interview
Interview Insights Research Participants Age Group: 20-25 years, Students. Half of the participants go through the entire website as they didn’t find it engaging enough. Most of them stopped navigating through the website after having a rough idea on what the brand was about and it’s offerings. When asked about the most engaging thing they found about the website, I got a lot of different answers. For some, it was the dynamic brand identity, for some, the base concept of having a vegetarian food service was unique enough. The clean design of the website and the animating logo was also an attraction.
The navigation was one of the major problems that came up. The current header had too many options out of which some are unnecessary, like “career”, “journal” and the “about us” page. They took away the focus off the main services. There was a need for a categorized navigation, and should focus on the services of the brand.
The website overall, did make a clear impression on what the brand was about and it’s services.
Half of them preferred to have just the website and not the application since the main offering is meal subscription, and it is something which we don’t go checking for everyday. The other half were keen of having a mobile application since in today’s times, it is much faster and more reachable. An application would also provide a much more streamlined and efficient experience overall.
083
Stuti Bhatt | Graduation Project 2018
Overall User Research Insights 1. The text in the current website too long to read at one go. 2. The header has too much content out of which only Meal Subscriptions and Tailored Catering is important. Things like Careers and Journals need not be highlighted. 3. The information can be more simplified and put into categories. 4. Meal Subscription to be the main highlight of the brand now, followed by Tailored Catering. 5. Key points about the Meal Subscription service can be highlited on the home page itself as it is now the prime sevice of the brand.
084
Insights
One major change of service. The brand originally started off with Meal Subscription as it’s prime service and feature. However, over a period of time, customers demanded a seperate menu for ordering just one meal and not a weekly or monthly subscription. So, Herbivore came with the “On Demand Meals” service for it’s customers.
Since the brand is now well promoted, it had decided to get back to where it started from. So, the On Demand Menu service is off the table. The other two services remain as they are, Meal Subscriptions being the primary one.
085
Stuti Bhatt | Graduation Project 2018
Mind-mapping A mind map is a diagram used to visually organize information. It is hierarchical and shows relationships among pieces of the whole. It is often created around a single concept. Mind maps are considered to be a type of spider diagram. They can be used to generate, visualize, structure, and classify ideas, and as an aid to studying and organizing information, solving problems, making decisions, and writing.
086
The name of the brand has been explored and analyzed twice, first as a brand name, and then as the word “herbivore.” The third mind-map is around the term “healthy food”, which is the key feature on whcih the brand is based on.
Mind-Mapping
087
Stuti Bhatt | Graduation Project 2018
088
Mind-Mapping
089
03 Information Analysis.
Stuti Bhatt | Graduation Project 2018
Stakeholder Study A company doesnâ&#x20AC;&#x2122;t operate without the help and input of numerous people. Those people are called stakeholders, and they can be anyone from owners, creditors, suppliers, employees, and even the community in which business is conducted.
092
Identifying the Stakeholders for Herbivore: The owner Her partners Co-workers (chefs) Clients Customers Suppliers Lenders Property owner City (location/delivery area)
Stakeholder Study
Stakeholder Types Herbivore Primary stakeholders - those ultimately most affected, either positively or negatively by an organization’s actions.
Secondary stakeholders - the “intermediaries,” that is, persons or organizations who are indirectly affected by an organization’s actions.
Tertiary stakeholders - those who will be impacted the least.
The Owner
Property Owner
Clients
Suppliers
Lenders
Partners
Co-workers Customers
Partners Clients
City (location/delivery area)
093
Stuti Bhatt | Graduation Project 2018
Information Architecture - Website Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape. Typically, it involves a model or concept of information that is used and applied to activities which require explicit details of complex information systems. These activities include library systems and database development.
094
New Site Map
095
Stuti Bhatt | Graduation Project 2018
User Journey Maps The user journey is a timeline of user actions that describes the relationship between your brand and its customers. It’s all of a user’s interactions, from their point of view.
User 1 First time user. Not familiar with the navigation. Wants to explore the website.
Mapping the user journey creates a timeline of all touchpoints between a customer and the brand — and all channels they happen in.
User 2 Regular user. Familiar with the website. Goes through the website almost daily.
096
User 1
User 2
User Journeys
097
Redefined Brief Although the current website has a simple and minimal look, it did not entirely serve the purpose of making the website user friendly. The website needed to highlight the unique brand features Herbivore offers, and use them to attract more users. The need for a revised website was also because of the chnage in the offerings of the brand.
â&#x20AC;&#x153;Celebrate design. The idea remains memorable.â&#x20AC;?
04 Ideation.
Stuti Bhatt | Graduation Project 2018
Grid One of the chief uses for a grid is to keep your elements aligned and ordered, and your page design clean and neat. This is because grids encourage alignment. By establishing a grid system, you are creating a set structure for yourself to align elements against, and in doing this, you can create for yourself a neat, clean, and organized layout. Grids can greatly speed up and improve your design time, as they can act as a guide that signals where is best to place, position, and scale elements. If nothing else, grids and type are two design elements that very happily go hand in hand. A strong grid can help make type-heavy layouts appear neater, organized, and can help enhance the legibility and readability of body copy.
104
The beauty of grids is that they are consistent and even things, so when you divide your design up into a certain amount of columns, you will begin with a symmetrical layout. From here, it should be much easier to judge which side of your design is overpowering the other. Sticking to your newly formed grid will ensure you have a clean, organized, and beautifully aligned design on your hand, but occasionally and deliberately breaking that grid will give that clean design a unique, eye-catching effect. Grids encourage withe space, too. When youâ&#x20AC;&#x2122;ve divided your design up into your desired amount of columns, place your necessary elements, but keep some rows and columns empty, leave them to simply be filled by white space.
Here, I have used a 12 column grid for the website, with gutter size 20px and margin size 10px. The gird is same for all the concept explorations.
Working with a Grid
1440 px (Standard Desktop Size)
105
Stuti Bhatt | Graduation Project 2018
Typography for the Website Legibility Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. Naturally, this is one of the most essential factor. The most common problem is lack of distinction between capital I and lowercase l. You need to avoid this kind of fonts because people will have problems reading them on small displays. X-height 95% of the letters we read are lowercases. Larger letter proportions between uppercase and lowercase tend to result in a more legible typeface. Counters We also have white space within the letters. For example look at “o” “u” “d”. Those spaces are called counters and typographic professionals believes that more of it help us to easier recognize the letters. 106
Weight Lighter typefaces are usually more legible than heavier weights of type. It’s related to counters and allow for non modified character shapes. Wide proportion Width of a character in relation to its height is described as proportion. Generally you want wide letter over condensed one for better letter recognition and thanks to that for better legibility. Letter spacing There is no ultimate way to calculate letter spacing but most of the time the bigger text size you have the less letter spacing you will need. Readability Readability is about overall reading experience. How easy can we scan text layout, distinguish heading, subheading, paragraphs and blocks.
Serif vs Sans Serif History tells us that serifs are more legible. Serif allows eye to flow more easily over the text. The story is different on the web and mobile. There are several sans-serifs that are readable and current state of visual design prefer simpler letterforms. On the web and especially on mobile we see much more sans-serifs.
Typography for the Website
ASCENDER
COUNTER
X-HEIGHT
BASELINE DESCENDER
A Brief Letterform Anatomy
107
Stuti Bhatt | Graduation Project 2018
Work Sans Work Sans is a typeface family based loosely on early Grotesques, such as those by Stephenson Blake, Miller & Richard and Bauerschen Giesserei.
Thin.
The regular weight and others in the middle of the family are optimized for on-screen text usage at medium-sizes and can also be used in print design.
Regular.
Overall, features are simplified and optimized for screen resolutions; for example, diacritic marks are larger than how they would be in print. I didn’t move ahead with Work Sans as although it is a very legible font, it does not make the website look as appetizing as it should, since the brand is all about delicious meals. Used in Concept 1.
108
ExtraLight. Light. Medium. SemiBold. Bold. ExtraBold. Black.
Ahg
Large x-height making the font more legible
The typeface is very well readable.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 )!@#$%^&*( ,./;’[<?”}
Typography for the Website
Abril Display Abril Display is a serif, elegant typeface, conceived specifically for intensive editorial use, whether it is in newspapers, magazines or digital media, Abril is a font family of two worlds. The titling weights, based on a contemporary revamp of classic Didone styles, display both neutrality and strong presence on the page, attracting the reader’s attention with measured tension in its curves, good color and high contrast. I did not choose Abril Display as although it is a very legible and clean font, it gives a little too much of a delicate feel to the brand which is not true. Used in Concept 1.
Regular. Italic. SemiBold. SemiBold Italic. Bold. Bold Italic. Extra Bold. ExtraBold Italic. Black. Black Italic.
Ahg
Has a legible x-height
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 )!@#$%^&*( ,./;’[<?”}
109
Stuti Bhatt | Graduation Project 2018
Brandon Grotesque Brandon Grotesque is a sans serif type family of six weights plus matching italics. Influenced by the geometric-style sans serif faces that were popular during the 1920s and 30s, the fonts are based on geometric forms that have been optically corrected for better legibility. Brandon Grotesque has a functional look with a warm touch. While the thin and the black weights are great performers in display sizes the light, regular and medium weights are well suited to longer texts. The small x-height and the restrained forms lend it a distinctive elegance, but also decrease it’s readability after a point. Used in Concept 2.
Thin. Thin Italic. Light. Light Italic. Regular. Regular Italic. Medium.
Ahg
Medium Italic. Bold. Bold Italic. Black. Black Italic.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 )!@#$%^&*( ,./;’[<?”}
110
Has a very tiny x-height
Typography for the Website
HK Grotesk HK Grotesk is a sans serif typeface designed by Hanken Design Co. It is inspired from the classical grotesques. The goal in designing HK Grotesk is to create a more friendly and distinguishable typeface that is suitable for small text. HK Grotesk has a very fresh and modern feel to it. The readability in large as well as small font sizes is quite good, which made it perfect for the website and mobile application.
Light. Light Italic. Regular. Italic. Medium. Medium Italic. SemiBold.
Ahg
Has a legible x-height
SemiBold Italic. Bold. Bold Italic.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 )!@#$%^&*( ,./;â&#x20AC;&#x2122;[<?â&#x20AC;?}
111
Wireframes
Wireframes A wireframe is a visual representation of a user interface, stripped of any visual design or branding elements. It is used by UX Designers to define the heirachy of items on a screen and communicate what the items on that page should be based on user needs. Wireframes can stretch from a low fidelity pencil sketch to a high fidelity and fully annotated diagram and all that comes in-between.
They are useful for a number of reasons: Giving visual designers a basis to begin creating screens.
Most wireframes are essentially black and white diagrams with various UI elements and notes upon them. In most cases they should be devoid of imagery, branding and colour (aside from links/call outs).
Using as a reference point for functional specifications. Communicating the functionality you are going to build with stakeholders without muddying the waters with visual design elements or branding. Exploring ideas without the difficulty of change inherent in Photoshop mockups. Using as a basis for prototyping and for user testing ideas early on.
113
Stuti Bhatt | Graduation Project 2018
Wireframes - Concept I The first concept I came up with, is fairly simple and very easy to follow. It has a very clean and minimalistic approach.
This route is the one where you see one screen at a time. The very first look gives you a nice visual along with the brand tagline.
The wireframes have been kept as simple as they can get, with minimal information.
The “menu for the week” stays on the side of the screen and works as a pop-up.
Typeface used - Work Sans and Abril Display.
The meal subscription and tailored catering lead to their reapective screens.
114
The layout is fairly simple, but it’s loses the customer’s attention after a point. Chances are, that some customer’s might not be even able to get the whole point of Herbivore being a meal delivery brand.
Wireframes - Concept I
115
Stuti Bhatt | Graduation Project 2018
First block of the home page; has a appetizing food photograph in the background and then the brand promise. The header has features like SignIn/Register, the hamburger menu and the logo(with acts like the home button).
116
Wireframes - Concept I
Second block of the home page; gives a bried introduction about the brand. The â&#x20AC;&#x153;menu for the weekâ&#x20AC;? on the right acts as a pop-up.
117
Stuti Bhatt | Graduation Project 2018
Third block of the home page; introduces the concept of Meal Subscription along with a photograph. The “Know More” Button leads to the Meal Subscription page.
118
Wireframes - Concept I
Fourth block of the home page; explains how the Meal Subscription service works. The contect for “How It Works” has been modified later.
119
Stuti Bhatt | Graduation Project 2018
Fifth and the last block of the home page; introduces the Tailored Catering service, along with a photograph. The â&#x20AC;&#x153;Know Moreâ&#x20AC;? Button leads to the Tailored Catering page.
120
121
Stuti Bhatt | Graduation Project 2018
Wireframes - Concept II The layout of the web page in this concept is based on the language and structure of the logo. The logo has a grid like look to it, and hence, similar attempt has been made for the look of the website. Typeface used - Brandon Grotesque.
122
This is a highly structured layout, with all the content and information placed in a very systematic manner.
Although this layout is based on the language of thr brand logo itself, it did not suit the website. The look became too rigid and looked tempeleted after a point. The brand is more of delicate tone with a fresh feel to it. Also, thsi layout did not do justice to the photographs and iconography.
Wireframes - Concept II
123
Stuti Bhatt | Graduation Project 2018
Home Page Opt. 1 The layout has very fine and rigid boundaries for each section.
Home Page Opt. 2 124
Wireframes - Concept II
Meal Subscription Screen 125
Wireframes - Concept III This concept follows a vertical flow of the content on the pages.
This concept is the final structure of the website.
The content is simplified and the highlights have been given importance. Typeface used - HK Grotesk
127
Stuti Bhatt | Graduation Project 2018
128
Wireframes - Concept 3
Basic flow and structure
Photograph
About the service Highlight of the service Highlight of the service
Photograph related with service Photograph related with service Description of service/feature Description of service/feature
129
Stuti Bhatt | Graduation Project 2018
Wireframe 3.1 130
Wireframes - Concept 3
Wireframe 3.1 The home screen. Introduction of the brand and then the highlights of the two sevices. Wireframe 3.2 Pop-up for â&#x20AC;&#x153;menu for the week.â&#x20AC;? It works on a swipe feature to see the menu for the rest of the days.
Wireframe 3.2
131
Stuti Bhatt | Graduation Project 2018
Wireframe 3.3 132
Wireframes - Concept 3
Wireframe 3.3 Meal Subscription page. Highlights the features of meal service, like the ingredients used, meals, etc. and shows you the available meal plans. Wireframe 3.4 Page for â&#x20AC;&#x153;Menu for this Week.â&#x20AC;? Has the Meal Subscription photograph on top, since this page links from there. Weekly menu on display with a slide feature.
Wireframe 3.4 133
Stuti Bhatt | Graduation Project 2018
Wireframe 3.5 134
Wireframes - Concept 3
Wireframe 3.5 Tailored Catering page. Highlights the features of tailored catering, like the variety in the menu, and shows the available catering service plans. Wireframe 3.6 The page where you add your details when you want to subscribe to the services of Herbivore. The details form has been made as simple as it can.
Wireframe 3.6
135
Stuti Bhatt | Graduation Project 2018
Wireframe 3.7 The hamburger menu. Has a list of all the main pages/screens of the Herbivore website and is accesible from each one of them. Wireframe 3.8 The About Us page. A little introduction about Herbivore, followed by the information about the owner and he partners.
Wireframe 3.7
136
Wireframes - Concept 3
Wireframe 3.8 137
Stuti Bhatt | Graduation Project 2018
Wireframe 3.9 138
Wireframe 3.9 Careers Page. A breif information on how it is to be a part of the Herbivore team, followed by the list of openings. Wireframe 3.10 Journal page usually contains articles on all things healthy.
Wireframe 3.10 139
05 Final Prototype.
Website - Final Prototype
Final Prototype The third concpet has been taken forward for the final prototype. The color scheme of the final UI is the same as the existing Herbivore color palette. The earthy warm colors give the website a very sophisticated look and feel.
The highlights of the services have been put in such a way to make sure they attract new users. Different sizes and weights of the typeface HK Grotesk has been explored throughout the website.
Overall, an attempt to make the website more user-friendly and to attract more users has be made. The change of itâ&#x20AC;&#x2122;s prime service made it a little convinent for me to come up with interesting ideas.
Photographs from the shoot done by Open Strategy & Design in 2016 have been used. The iconography had ben done by me.
143
Stuti Bhatt | Graduation Project 2018
Home Screen 144
Website - Final Prototype
Home Screen Has appetizing food photographs. The “15 Day No Repeat” promise has been used as the main highlight of the Meal Subscription service. Menu Pop-Up Pop-up for “menu for the week.” It works on a swipe feature to see the menu for the rest of the days.
Menu Pop-Up
145
Stuti Bhatt | Graduation Project 2018
Meal Subscription 146
Website - Final Prototype
Meal Subscription Shows key features of the service. Photographs and Icons both have been used to define the services. Menu For The Week The weekly menu is on display with a slide feature. Pie charts have been used to show the nutritional details.
Menu For The Week 147
Stuti Bhatt | Graduation Project 2018
Tailored Catering 148
Website - Final Prototype
Tailored Catering Highlights the features of tailored catering, like the variety in the menu, and shows the available catering service plans. Photographs and Icons both have been used to define the services. Subscribe to Herbivore The details page when you want to subscribe to the services of Herbivore. The form has been given a simple look within the range of the Herbivore color palette.
Subscribe to Herbivore
149
Stuti Bhatt | Graduation Project 2018
Hamburger Menu Has a list of all the main pages/screens of the Herbivore website and is accesible from each one of them. About Us The About Us page. A little introduction about Herbivore, followed by the information about the owner and he partners.
Hamburger Menu
150
Website - Final Prototype
About Us 151
Stuti Bhatt | Graduation Project 2018
Careers 152
Website - Final Prototype
Wireframe 3.9 Careers Page. A breif information on how it is to be a part of the Herbivore team, followed by the list of openings. Wireframe 3.10 Journal page usually contains articles on all things healthy.
Journal 153
06 Mobile Application.
Herbivore App Herbivore is rapidly growing with an increase in the number of itâ&#x20AC;&#x2122;s consumers on a monthly basis. The idea of creating a mobile application for the service seemed like the right next thing to do. The app mainly was to keep the regular users updated and make the service more friendly and reachable to them.
157
Website - Final Prototype
Mobile Application Mobile devices are used in everything nowadays and increasing so by the day. Mobile phones are have facilitated more than calling and reaching out to people. They make your life easier.
When creating an application for mobiles, the designer’s job is to create the user interface to meet the user’s needs and create an easy and enjoyable experience. To achieve that both the UX and UI should be great.
Mobile apps are a great way to improve your product or service’s reach to more users and improve the traffic to your site through the mobile devices.
An application has to be really pleasing to get the attention of the user. But at the same time, an application with great that looks pretty with all the bells and whistles won’t make a difference when the user experience is bad.
159
Stuti Bhatt | Graduation Project 2018
Case Study I - Munchery Along with the website for the case study, Munchery also has a mobile application for itâ&#x20AC;&#x2122;s users. The user experience of the Munchery application is done really well, as the users can navigate through the application quite smoothly. The categorization of information has also been well managed.
160
The application has been designed just as well as the UX. Along with the right choice in typography and colours, the layout has been done in a clean manner.
Case Study I - Munchery
Muncherry Home Screen
Muncherry Membership Screen 161
Stuti Bhatt | Graduation Project 2018
Munchery Membership Screen Has a very strong typography and bright and volorful illustrations. Munchery Menu Screens Photographs used are bringing a new charm to the screen. The layouting is a basic one.
Muncherry Membership Screen 162
Case Study I - Munchery
Muncherry Menu
Muncherry Menu 163
Stuti Bhatt | Graduation Project 2018
Case Study II - Sakara Along with the website for the case study, Sakara, too, also has a mobile application for itâ&#x20AC;&#x2122;s users. The mobile application of Sakara had use of bold typography which makes it visually apealing. The navigation is quite smooth as well. Very few visuals have been used accros the application, yet it does not affect the overall experience.
164
The use of the color black is very prominent, but somehow it does go along with Sakaraâ&#x20AC;&#x2122;s brand language.
App - Site Map
Information Architecture - App
167
Stuti Bhatt | Graduation Project 2018
App Logo An app logo ususlly has the logo identity of the brand on it. Herbivore’s logo becomes unreadable when scaled down to a very small size, hence it is not used for the app logo. The logotype of the brand is just as important and has been used on the home screen of the mobile application on the navigation bar. The first letter “H” from the logotype has been used as the app icon, as it is very much readable and looks quite prominent on the home screen.
60 px
60 px
Herbivore
App on the homescreen
168
Grid
Grid I have used a 12 column grid for the mobile application, with gutter and margin size 9 px. The gird is same for all the concept explorations.
480 px (Mobile)
169
Stuti Bhatt | Graduation Project 2018
Concept I The layout of this concept folows the same structure as in the concpet 2 of the website design options. It is based on the grid-like layout of the brand’s logo. The content is divided and put into rectangles and squares. Typeface used - HK Grotesk
170
This is a very structured layout.
Since it didn’t work with the website, I din’t tak it forward with the app. The look, here too, became too rigid and looked tempeleted after a point.
Concept I
171
Stuti Bhatt | Graduation Project 2018
Home Screen The home screen has the introduction of the brand continued by how it works and the Tailored Catering plans.
Home Screen
172
Concept I
Meal Subscription This screen has the main highlights of the service and then the plans.
Meal Subscription
173
Stuti Bhatt | Graduation Project 2018
Tailored Catering Just like the Meal Subscription screen, this screen too, has the main highlights of the service and then the plans.
Home Screen
174
Concept II
Concept II This is a very simplified yet interesting layout. There is a balance in the use of photographs, text, icons and other design elements.
Ahead, there are rough sketches of it followed by the final wireframes and UI.
The flow of the application is very smooth and clear. There is a very rare chance of a user of not being able to navigate through this interface. Typeface used - HK Grotesk
175
Stuti Bhatt | Graduation Project 2018
176
Concept II
177
Stuti Bhatt | Graduation Project 2018
178
Concept II
179
Stuti Bhatt | Graduation Project 2018
Wireframes for App Wireframing from all the rough sketches.
Loading Screen
180
Wireframes for App
Login/Register
Sign In
Invite Code
181
Stuti Bhatt | Graduation Project 2018
Home Screen - For New Users
182
Wireframes for App
Home Screen - For New Users The home screen for new users first explains what the brand is about and how it works. It then goes on with the Tailored Catering Plans. Home Screen - For Existing Users The home screen for the existing users displays their â&#x20AC;&#x153;Active Planâ&#x20AC;? in order to make the application convinient for them, in case they want to edit their ongoing plan.
Home Screen - For Existing Users
183
Stuti Bhatt | Graduation Project 2018
Hamburger Menu The hamburger menu has the list of all the screens you can visit on the app. You can also view your profile through it.
Hamburger Menu
184
Hamburger Menu
Wireframes for App
Meal Subscription The meal subscription screen begins with describing how the service h=works, through iconography and supporting text. It then displays the two meal plans that Herbivore offers.
Meal Subscription
185
Stuti Bhatt | Graduation Project 2018
Subscribed Plan The subscribed plan screen shows your ongoing plan, weather weekly or monthly. It gives you options to change your predecided cuisine or skip any meal if you want to. It also shows you the current status of your plan, and also gives you option to cancle the plan. Week Status The week status screen displays the status of the current with the dates. It shows a detailed status that includes choosen cuisine for the day and the status of that meal(delivered, pending or cancelled), for each day.
Subscribed Plan Details
186
Week Status
Wireframes for App
Plan Upcoming Week This screen allows you to plan your upcoming week, where you can select your dietary preferences, your cuisine and main dish for each day, or decide if you want to skip that particular meal.
Plan Upcoming Week
187
Stuti Bhatt | Graduation Project 2018
Tailored Catering The tailored catering page starts with describing the service and then pointing out itâ&#x20AC;&#x2122;s highlights through iconography and supporting text. It then displays the two plans that the service offers.
Tailored Catering
188
Week Status
Wireframes for App
My Profile My profile screen allows you to view your profile, choose to edit your details or logout. Edit Profile You can edit your name and other details, change your profile picture or even delete your profile.
My Profile
Edit Profile
189
Stuti Bhatt | Graduation Project 2018
My Account My account has a list of all your personal information on the app. It taked you to your profile, your notification and reminders settings, payments page and to your saved addresses. About Us This page contains an image of Bela Gupta, the founder of Herbivore and her introductory details.
My Account
190
About Us
Wireframes for App
Cart The cart shows you the plan you are willing to subscribe to and itâ&#x20AC;&#x2122;s details and final amount. Payment Methods Here, you can choose the payment method which is convinient for you to use for the final payment.
Cart
Payment Methods
191
Stuti Bhatt | Graduation Project 2018
Saved Address This screen shows you the list of all the addresses you have saved in your account, and gives you an option to edit them or add a new address. Edit Address Here, you can edit your address, and add details like landmark, or give the address a lable name. You can also delete an existing address here.
Saved Address
192
Edit Address
Final Prototype After the detailed wireframes of the second concept, I started making the UI for it. The existing Herbivore color palette is used for the colors. Photographs have also been used at the right places in the right number. Iconography with supporting text is also an intresting part of the screens.
Loading Screen
195
Stuti Bhatt | Graduation Project 2018
Login/Register
196
Sign In
Invite Code
Final Prorotype for App
Home Screen - For New Users
197
Stuti Bhatt | Graduation Project 2018
Home Screen - For Existing Users
198
Final Prorotype for App
Hamburger Menu
Hamburger Menu
199
Stuti Bhatt | Graduation Project 2018
Meal Subscription
200
Final Prorotype for App
Sunscribed Plan Details
Week Status
201
Stuti Bhatt | Graduation Project 2018
Plan Upcoming Week
202
Final Prorotype for App
Tailored Catering
203
Stuti Bhatt | Graduation Project 2018
My Profile
204
Edit Profile
Final Prorotype for App
My Account
About Us
205
Stuti Bhatt | Graduation Project 2018
Cart
206
Payment Methods
Final Prorotype for App
Saved Address
Edit Address
207
One final glance.
Stuti Bhatt | Graduation Project 2018
Style Guide - Website & App A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.
212
It is extremely important when multiple designers are working on a big website or web app to ensure that they donâ&#x20AC;&#x2122;t interpret too much and donâ&#x20AC;&#x2122;t alter or adjust styles based on personal preference. In development, having defined elements of the website makes it easy for developers to reuse these elements. Moreover, it can make it easier because they will get what elements they have to code and will see exactly how they need to look from the start.
Style Guide
Colour Palette Swatches for text & graphic elements.
C00 M00 Y00 K80
Usage.
C00 M00 Y00 K70
C20 M50 Y50 K00
C40 M25 Y60 K00
Primary Text Colours
Secondary Text Colours
Tertiary Text Colour
Header Body Copy Strokes Icons
Headers Sub-Headers Icons
Headers for dark background
C00 M00 Y00 K00
213
Type - Desktop Role
Actual Size
Font
Font Size
Letter Spacing
Header 1
ABC
HK Grotesk (Medium)
48
-20
Header 2
ABC
HK Grotesk (Medium)
36
4
Header 3
ABC
HK Grotesk (Medium)
21
20
Body Text 1
ABC
HK Grotesk (Regular)
28
4
Body Text 2
ABC
HK Grotesk (Regular)
18
40
Buttons
ABC
HK Grotesk (Medium)
16
20
Style Guide
Type - Desktop Usage.
Whatâ&#x20AC;&#x2122;s in a meal?
Header 1
See Openings
Header 2
Fresh & Seasonal
Header 3
Herbivore
Body Text 1
Hand picked regional
Body Text 2
SUBSCRIBE NOW
Buttons
215
Type - App Role
Actual Size
Font
Font Size
Letter Spacing
Header 1
ABC
HK Grotesk (Medium)
24
20
Header 2
ABC
HK Grotesk (Medium)
21
20
Header 3
ABC
HK Grotesk (SemiBold)
18
20
Body Text 1
ABC
HK Grotesk (Regular)
12
20
Buttons
ABC
HK Grotesk (Medium)
12
20
Style Guide
Type - App Usage.
How It Works
Header 1
It is easy to be a Herbivore.
Header 2
Herbivore in a Box
Header 3
At Herbivore we donâ&#x20AC;&#x2122;t do things half way.
Body Text 1
CHOOSE PLAN
Buttons
217
Stuti Bhatt | Graduation Project 2018
Icons Iconography is a visual language used to represent features, functionality, or content. Icons are meant to be simple, visual elements that are recognized and understood immediately.
218
Icons
219
Stuti Bhatt | Graduation Project 2018
220
Icons
Icons - All
221
“Whatever I know how to do, I have already done. Therefore, I must always do what I don’t know how to do”
Conclusion
Conclusion I am extremely grateful to have this opportunity to work on this project given to me by Open Strategy & Design. Working on a UI/UX design project was a completely new task for me as I am not very experienced in this particular subject. I took this opportunity to not only work on this project but also learnt about how a UI/UX design project should work. I immerse myself in whatever I take up. Sooner or later, I realised that this project is mine and I was enjoying every moment of it. I was very lucky to have been given this project entirely, from the research to the final designs. That made it a wholesome learning experience.
The scope of work also evolved with time so it was very important for me to approach the work with an open mind to gain the maximun from it. I am happy to have worked with an agency that has an underlying great vision. Working with people who were experienced in dealing with projects of this nature, taught me what it means to be professional. Being around people who had a great design sense was itself an enriching experience for me. Overall, the experience has been quite challenging, uncertain, intensive but also highly educative at the same time.
225
Webliography & Photo Credits
Webliography & Photo Credits The websites that have been of great help to me for this project.
All the photographs used for Herbivore brand, website and mobile application are produced by Open Strategy & Design in 2016.
uxplanet.org (for UI/UX research) uxmastery.com (for user journey maps) blog.prototypr.io (for typography reaesrch) mixt.com (for case study & images) munchery.com (for case study & images) sakara.com (for case study & images) canva.com (for study of grids)
227