WEBSITE DESIGN | ANIMATION
Website for an Indian E-Commerce Fulfillment Platform
UX Designer,
Animation
Mar - Jun 2021
Summary (for busy folks)
WareIQ is a modern e-commerce fulfillment platform that enables businesses to store inventory closer to their customers, facilitating 1-day and 2-day delivery. Boasting the most established and reliable network of warehouses in India after Amazon, WareIQ intelligently places inventory and distributes products to smaller hubs for swift delivery to destinations.
Tasked with redesigning their landing page, I conducted interviews with WareIQ's clients and stakeholders to gather insights on their experiences and desired changes. Following the discovery phase, I embarked on a journey of redesign, commencing with sketches, progressing to mid-fi prototypes, high-fidelity mockups, and culminating in illustrative and animation work.
ABOUT WAREIQ
WareIQ is an eCommerce fulfillment services and shipping platform for new age consumer brands.
Their vast network of warehouses enables Amazon-like next-day delivery for eCommerce companies in India. Their platform recommends smart inventory placements, ensuring swift pickups, distribution, packing, and shipping, outpacing competitors in delivery times.
TASK
WareIQ's CEO wanted lively, effective website redesign.
He stated that the current version looked okay, but it garnered less traffic and was too "simple" by today's design standards.
Along with that, there was talk on adding new content (like prime-like shipping badges) and functionality to the site, including a login link to allow users to sign in to their WareIQ account and manage their business inventory distribution.
This is what the website looked before redesign:
PROBLEM DISCOVERY
While doing an Design Audit, certain issues with the website jumped out to me:
UX issues: glaring contrast issues, excessive text, unclear CTA.
Analytics data validated issues: avg. engagement time < 2 mins, low visitor influx.
Conducted research to discover more shortcomings.
I began conducting interviews with clients and stakeholders to validate these findings
My first few questions revolved around how they were introduced to WareIQ as a possible solution to their business needs.
Common themes around word-of-mouth, networking events, conventions and simply googling fulfillment solutions arose from these interviews.
I then asked the them to recall their first experience with the website.
They didn’t read a lot, but rather scrolled down to just fill out the Contact Us form.
Other issues that were discovered are below:
SOLUTION
I decided to begin by doing rough sketches of what an updated interface could look like.
To come up with this sketch, I looked at various competitors of WareIQ in the fulfilment sector like Shipsy, Blue Yonder and SAP. I first aimed to understand their content and information hierarchy. How they've depicted their solutions and how they compel their website visitors (and potential customers) to sign up for a demo.
After various discussions, this was the final sketch that was approved by the client.
Next, I designed mid-fidelity wireframes of how the new landing page would look like. This step was necessary to establish a sectional hierarchy and initiate discussions with how we want the user journey to look like across this page.
Following which was establishing a style guide, color palette and begin implementing the designs into high-fidelity.
ANIMATION
To showcase WareIQ's unique offering, we decided to visualize the problem and solution in the form of an animation on the website's landing page.
Challenge: Developer had never worked/implemented an animation
This was a first cause even though I had created several animations, I wasn't aware of how animations could be implemented onto a website.
I did some homework of my own and found a way. I recreated the animation I initially made on Premiere Pro, on After Effects - and then using the BodyMovin plugin was able to export the SVG animation into a .JSON file.
I forwarded the instructions to the developer was eventually able to implement it.
FINAL OUTCOME
RESULTS & IMPACT
Growing Bigger and Better
Since 2021, WareIQ has continued to grow and has become a major player in the Indian E-Commerce fulfillment space.
Increased Visitors and Conversions
WareIQ’s website 4X its visitors in its first 3 months of the website going live. All around feedback from the users was overwhelmingly positive.
Setting Trends
Other competitors have used similar styles and website layout for their own website designs in order to compete with the WareIQ.
Latest Update
In April 2023, the company decided to update their website design in order to reflect new features, offerings and achievements. You can view the current website at https://wareiq.com/.
NEXT STEPS
Continued Collaboration
For a number of months after handoff, I proceeded to continue collaborating with the client, development team and other stakeholders to design and implement secondary pages of the website as well.
LEARNINGS
Converting AE Animations to JSON
Learnt how to incorporate custom animations into a website. An important skill as we see UI/UX Design trends heading more into motion design and dynamic experiences.
Working with Developers/Clients
Efficient handoff with clear and annotated deliverables and documentation is always a great way to make sure that the developers and client is always supported after design is complete. If there were any issues or feedback, I was always ready for a quick Teams call with the dev team to resolve any issues.
