Website redesign for Vee Dee Pack Industries Pvt. Ltd. , Borivili, Mumbai
BRAND RESEARCH/ CLIENT INTERVIEW 1. How do you describe your business / yourself? • VD pack is known primarily for supplying and packaging company. • VD pack name was derived from the initials of the Viral (husband) and Dinesh (Father in law) • Its parent company is “Prayas group of company” • They got separated 10yrs back as their working process was different from that of Prayas group. 2. What is the primary goal of your website? • They need to promote themselves. • To gain popularity. • To create an impact as a separate entity in the packaging industry. • They need to upgrade their online presence. 3. What problem do you want to solve with designing this website? • Reaching out to International clients more effectively. • They want to represent themselves in the international market in a better and upgraded way. The website has to be a medium of communication between the international clients and the company itself. 4. • • • • • •
Who are your competitors? Shako Flex Parikh Packaging Srinath Rotopack Sanjeev Flexipack White lotus Jhaveri Industries- Gujarat
5. • •
Who do you stand out from your competitors? We use European machinery. We provide European technology in Indian cost.
6. Do you have your content ready? No, hire a content writer. 7. Who is your target market? • Their vision is to cater all the segments not only India but also internationally. • Secondly, to cater not only to A-tier cities of India but also, B town cities like Pune, Indore etc. • A Tier - because there is stability plus awareness. • B Tier because of booming culture and have money to invest given right opportunity. Also, awareness is increasing over there. 8. What impression do you want to give your target market when they see the website? • It has to look premium enough to attract an international clientele. • But on the other hand, it shouldn’t be at too highend to drive away for Indian client. 9. What information is your user looking for on the website? • Types of packaging. • What solutions do they provide? • It should evoke trust factor. 10. Describe the theme for the website? How do you want your website to look/feel like? eg: Classy, sleek, fun, premium Premium, classy and approachable. 11. • • • •
Brand attributes – Customer – Majorly International Voice - Better quality in cheaper rate Benefit – Quality Value - inducing Trust
DESIGN BRIEF Conduct a user experience research and design the user interface for VEE DEE PACK INDUSTRIES PVT. LTD.
OBJECTIVES 1. Study the brand and its value. 2. Conduct User Experience Sprint. 3. Design User Interface for the new website.
Methodology 1. Secondary Research about UX/UI 2. Primary Research and Design Thinking 3. User Experience Research 4. Interface design using FIGMA 5. Atomic Design Principle used in designing components in UI 6. 8 point grid system kept in mind while designing UI
WEBSITE REDESIGN FOR SITE AUDIT (OLD) •No curiosity to scroll. •Unnecessary repetition of tabs.
New logo to be inculcated
Space wasted due to the feather, hence money constraint while printing banners etc.
Space wasted
Repetitive content
Usability
Design
1. logo and navigation bar are not aligned on the same level. Hence, taking away the significance of the menu and information that it should convey. 2. Landing carousal isn’t informative about company and its operations. 3. The hover-effect (as a part of micro interactions) isn’t organised properly. 4. Improper selection of fonts and weight makes the readability of text not very interesting on landing page. 5. On responsive, the menu isn’t visible clearly,making it difficult to navigate website. 6. On responsive screens, the content isn’t aligned properly. 7. the footer does have copyright issued, but on responsive it isn’t visible. Adding links to social links is recommended.
1. The page overall needs a smoother navigation and clearer CTA. 2. Consistency needed in typography, headers and hyperlinks. 3. Better images needed to communicate the brand story/message. As per the ELM Model, the peripheral route needs to upgrade. 4. The current position of brand doesn't align with the current status of the company.
VEE DEE PACK INDUSTRIES
•Too many clicks for every step. Even under one sub-heading. •Lesser the clicks = lesser time consumed = Better the experience
•No alignment, pattern or grid followed while designing. Very randomly placing of content and images. •Images are not relatable to the audience or market. Fake images used other than product’s. No Brand image in terms of Color scheme or overall look.
No alignment
Usability
Usability
1. The quality of web text and images can be improved. 2. Better CTA contact button needed.
1, Better organisation of site- map needed to understand sub-category and main -category separately. 2. Need to reflect better layouts for packages in different categories. 3. Content needs to be more descriptive and direct to consumer.
Design •Product Shoot to be re- done. •Alignment problem again
Space wasted
1. The page overall needs a smoother navigation and clearer CTA. 2. Consistency needed in typography, headers and hyperlinks. 3. Better images needed to communicate the brand story/message. As per the ELM Model, the peripheral route needs to upgrade.
WEBSITE REDESIGN FOR BENCHMARK ANALYSIS BENCHMARKING WEBSITES
STRENGTH
WEAKNESS
Good and informative content. Good inculcation of social media. Visually more appealing. Use of Infographics.
Way too colorful without any reason and problem with color coding. Problem with the navigation and broken links. Images are really small in size.
DOES NOT HAVE A WEBSITE
Simple Informative Better layout Use of subtle colors Search bar is there Better navigation experience
Branding has been done. Font is still legible.
Font size is not legible. Small size images used
Not informative at all. Too much use of bright red color (though branding is the reason but not executued well) No navigation designed for the user to experience.
Option for diffferent languages- catering to international market. Very informative as compared to others. Good quality images used.
Too much use of capslock. Too many transitions to make it fancy. Layout could be better. Confusing at few places because of a lot of information at one go.
Use of videos makes it more interactive. Better CTA at few places. There is current events and news bar which provides an impression of being updated.
Layouting and spacing not that great. Colors used go with the branding though but use of them in various places are not apt. Too much clicks to navigate back and forth. Website takes time to load. Repetitive and less information.
USER SURVEY Core Questions: These set of questions are responsible for shaping up the finding, pain points and the pleasure points. 1. Which industry do they belong to and how are they dependent on packaging? 2. What are the needs and objectives of the people who are looking for packaging services online? 3. What problems they face during while trying to find a reliable solution online for the same? 4. What necessary information do you need before you buy packaging material online/offline? 5. How did you hear about VDPack and why you prefer working with them? 6. When was the last time you used VDPack website and what problems you faced with it? 7. What improvements or features would you like to suggest for the same?
Contextual Questions: This section is to understand the context in which the site will be used and how each task needs to be designed ,so as to avoid any user frustrations: 1. What device they usually use to browse the internet? 2. What trouble do you face while browsing through your preferred device?
PERSONA
VEE DEE PACK INDUSTRIES
JOURNEY MAPPING
NEEDS
SOLUTIONS
• The website needs to be descriptive enough for the consumer to know and learn about the required information • they need. • Build a trust factor among the consumers.
•
Relevant data needs to be inculcated. Use of color like green would help in that. Color palette needs to be kept in mind accordingly.
• Search using keywords of the type of packaging the con- • Detailed suggestions or names of the types legible sumer is looking for. enough in the first glance.
NEEDS AND SOLUTIONS
• Less time more outcome or value in terms of navigation • Avoid giving too many options to navigate. Also, keep and search. minimum clicks or actions to conduct for the user. • Need good quality samples as they are the deciding point • Create a section for requesting samples or provide and factor for the consumer to go for the partnership or good quality images/Videos for the same. not. • The pictures and images used in the website in different • Use of images which goes with the market as well as page need to be relevant to the content and the context. audience. For example, replacing photos of the foreigners It should be relatable basically. with Indians’. • The pictures and images used in the website in different • Use of images which goes with the market as well as page need to be relevant to the content and the context. audience. For example, replacing photos of the foreigners It should be relatable basically. with Indians’. • The user must know about the process and the USP shown visually for instant trust and attraction towards the product.
•
Use of images and videos showing the process and why you should trust the brand.
WEBSITE REDESIGN FOR DO-GO MAPS (Information Architecture) POLICIES
COMMON
SOCIAL REDIRECTION
11
Go: Facebook, Instagram, Google+
Do: Read terms and conditions and other company policies
0
12
Go: About Home I.P Packaging Contact Policies Social Redirection
5 1 3 2 4 11 12
ABOUT
Do: • View company bio • Watch Video process • KNow about the factory and expo • USP via machine solution • Consultany (Help offered in business setup) Go: I.P Packaging Types
HOME
PRODUCT TEMPLATE
5
Do: View all products and read about them INDUSTRIAL PRODUCTS
3 2
Go: On click 1
2 3 4 PACKAGING TYPES
2
Do: View all packaging solutions Go: I.P
1
Go: Contact Next Product
Do: • Read Description about this tab • Browse all categories of products
Do: • Read Business Purpose • See clientele portfolio • See product offerings Go: Packaging Types I.P Contact
7 10
6 7 8 9 10 11
CONTACT
4 8 9 10 7
4
Input fields: • Name • Email • Phone • Purpose • Additional Address Do: See Office location
3
Go: After Submit -------- HOME
1
VEE DEE PACK INDUSTRIES STYLE GUIDES
WEBSITE REDESIGN FOR WIREFRAMES/ LOW FIDELITY MODELS
CONCEPT-2
CONCEPT-1 Taken forward to High Fidelity Models
VEE DEE PACK INDUSTRIES WEB UI
WEBSITE REDESIGN FOR MOBIL UI
VEE DEE PACK INDUSTRIES