vStory
Background
Imagine a potential customer named Aryan Jain is inquiring in Club Mahindra and requests to receive their marketing collaterals on WhatsApp.
Now Sales-guy from Club Mahindra has very good customer testimonial videos, 360 virtual tours of some of their best resorts, a bunch of photos & a blog that explains the calculation of how Club Mahindra membership is really a quality investment.
Not all of these things are available on the website and it would leave a bad impression if they send all these things separately on WhatsApp, as it will crowd Aryan’s WhatsApp way too much.
In most high-value B2C companies, this kind of marketing materials usually get updated very fast and websites do not keep up with such changes. Hence they have to send those files separately only which ends up bugging the prospect customer because he gets lost in it!
As our firm’s primary clients are real estate builders and in their marketing team we had seen this pain frequently, hence we decided to do something about it.
Primarily we needed something where sales-guys don’t have to spend more than 5 minutes building it, whenever they want.
We also thought of adding some features such as :
- Supports all of the major media forms like 360 virtual tours, videos, photos, blogs & pdf.
- Able to group content, so it increases the probability that people go through the majority of relevant content. Since, when there is a lot of content, people tend to skip most of it in a conventional content gallery.
- Should be mobile-friendly.
- It should be lightweight. (Start in 3–4 Seconds)
- It should be generic. Branding and colors can be changeable as per user’s brand requirement.
Hence the concept of vStory originated.
My Role
Being the only designer at the startup, I teamed up with product owners and did some research and brainstorming. I solved UX problems. I also designed and delivered low and high fidelity wireframes as solutions. I discussed design with developers to get their feedback on performance issues.
Research
By meeting marketing and sales representatives we got chance to understand their marketing process & meetings, see their marketing collaterals & sales pitch. We found that there is some content which they present in the exact same order and there are some folders of contents which they open whenever necessary in between.
They send important content to the people who have inquired for future reference.
They were keeping this content well organized in various folders. This later happened to be the most valuable observation!
Design (Link - Check out this example of vStory )
Landing
Every marketer would want people who receive the content from him, remember that it was from the brand which he represents.
Hence, we built this landing page with a familiar design pattern so it is suitable for quite wide range of audience.
Gallery Section
For a marketer, it is very important to order and highlight the content as per his pitch. They want that their prospective customers do not miss a single important offering which might appeal to them.
Having too many customizations would give too many choices to users and will confuse them, ultimately waste their time.
Creating an uneven grid gives multiple combinations in the grid with minimum customizations in core objects. All a person has to decide is which content is more important, which is less important and which are okay to skip.
As soon as someone clicks on any of the thumbnails, content is enlarged and viewer opens up.
In this viewer, upon clicking navigation buttons the content is displayed in the following order.
Ordered content helps to tell the story which is more engaging rather than randomly putting the content altogether.
Managing upwards and downwards scale of Content
Be it 100s of content items or be it one, we wanted that vStory still looks good.
Such an arrangement happens automatically, the marketer does not have to sweat over the layout or accommodation of the content.
Story Page Layout
The layout of the story page. The page is made of three major sections.
- Landing
- Gallery
- Footer with CTA (optional section)
(here are some low-fi wireframes)
Sections
I created sections to provide whole page a visual hierarchy so it becomes easy for users to skim. Users do not have to go through everything to find out what is important for them, they can find out which section is for them and hop in.
Footer
It is very effective to provide a Call-to-Action after the content presentation because it provides the user the direction that what they should do now.
This is how a marketer can hit the prospect to take an action towards buying their offering or anything that moves the prospect towards sales process.
Footer is optional to add.
Media Icons
Example vStory
Let’s have a look at how vStory looks!
Gallery Builder
We wanted that marketer can create vStory without spending much time building it. So it was the real challenge to build such a gallery without much effort.
Remembering the findings of user research, we reckoned that almost every content creator or sales representative gathers the material in a folder and present/share it.
So, We decided to simply sync that folder when they create new vstory. They can also easily change and modify it.
This way they don’t have to break their habit or give much extra effort.
One has to remember just a small set of rules to build vStory.
- For order, they have to add a prefix or it will be taken as it is ordered. 1_,2_,3_ or files will be ordered alphabetically if prefix not given.
2. To highlight the content they can add _primary and _secondary.
3. Group items in separate folders inside the main folder to make sections.
Outcome & Impact
Salespeople and marketers of our client companies started using vStory over sending website links, due to its ease of production and increased metrics of engagement.
Sales & Marketing teams of prestigious companies such as Gujarat tourism, Lodha Group, Shree Balaji Group, Hiranandani, Club Babylon etc use vStory to share their collaterals with prospective customers.
