Vive Library

Vive Library Website Redesign
& No Code Development

Location

USA

Industry

Personal Fitness

Duration

3 Months

Services

UX Strategy

UI Design

Web Development

Vive Library Gets
A Complete
No-Code Makeover

Vive Library is a company created by Church’s creatives. It helps you increase your engagement with your target audience with tools built explicitly for churches and Christian communities..

Vive Library grants you access to materials such as graphic design, photography, videography, and social media created by some of the top designers. The library contains many motion graphics, countdowns, social videos, stock photos, social graphics, and title graphics. All these media provide some of the most relevant creative assets for spiritually inclined users.

The Challenge

Vive Library had strong religious values and focused on spreading religious content for its target audience. As a result, all content had to be represented correctly not to cause trouble around sensitive subjects. Additionally, the client wanted an utterly no-code technology platform to make managing a website more accessible and save time.
The aim was to make Web design convenient for Webflow designers and developers in India. This is where no-code technology comes into play.

How Webflow Created A No-

Code Solution For Vive Library

How Webflow Created A No-

Code Solution For Vive Library

Creating a solution began with the Webflow design agency scheduling discussions and holding workshops for stakeholders and the team. This helped set up informational architecture guidelines and discuss the projects’ overall flow.    

Weekly calls were also held between the stakeholders and the team to create transparency in the overall working process. The stakeholders’ opinions were always considered to maintain their involvement and ensure their happiness with the results.

Creating An Information Architecture

The UX and Webflow developer team worked in an agile and dynamic manner to work based on the information gathered from these discussions. After each workshop, our team used all the information and perspective collected from the stakeholders to finalize the information architecture.

Forming New Ideas

After all the necessary information was finalized into information architecture, the team proceeded with the ideation stage. The ideation stage involves brainstorming and other idea generation techniques to find an appropriate solution. We weighed the pros and cons for each idea before deciding upon the one that was suited to solve the problem the best. The prescribed views were then again conveyed to the stakeholders.

Ideation + Wireframing

Once the ideation stage is done and a final idea has been selected, the next step is wireframing. A wireframe in essence is a visual representation of your web page layout or screens of an app UX/UI.

Wireframing is the process that is used mostly during the designing process. This is done when the main objective of a Webflow developer in India is to create a structure for the problem. It is used to create a visual and typographic hierarchy on UI.

The interaction designers used wireframing to create a whole UI/UX experience. Along with it, various iterations for similar ideas are also present as well.

Once the UI/UX experience was determined the stylescapes and colour scheme was finalized. Stylescapes are those combos of images, typography, and colours in order to create a look and feel for a brand. These style scapes and colour schemes were important to create a similar, consistent look across all pages.

Prototype Production

Creating a prototype saved a lot of money since the product could be launched and checked for functionality on a short scale before expanding it further. Both low fidelity and high fidelity prototypes were created according to the established needs of the client.

Post-approval, our Webflow designer took the entire set of approved mockups and turned all of it into live and responsive web pages. The designer made all the necessary connections and got it approved by the client. But we had a few more interesting things to deal with. Let’s talk about some of those interesting integrations.

1. Membership Plan

During the initial stages, Vive library did not have a separate membership space where people or web visitors could elect to become a member of the website and gain access to certain features: in this case, certain types of graphic designing materials.The Vive Library platform is now integrated with the membership management platform called memberspace and currently, the platform holds three different membership or subscription plans for different types of users.

2. Airtable Integration

The Vive Library platform was later integrated with Airtable, a low code platform used to create collaborative apps. This made creating and sharing relational data very easy and simple to perform. Our Webflow developer used a tool called Make.com (which happens to be a competitor of Zapier) for automating the integration of data from Airtable’s database to the Webflow website. We did this to make life easy for the client for uploading new assets to The Vive Library.

Final Review of The Platform

Once all the necessary changes were made to the platform, a final review was conducted along with the stakeholders.   Once the platform was found satisfactory, the asset was handed over to the respective client.Webflow along with some required integrations simplified the process of website design, development and management for Vive Library with its no-code platform technology.