About The Project
Acorn-i is an innovative eCommerce intelligence platform. It helps empower brands and sellers to maximize returns from eCommerce investments. Their partnership helps eCommerce businesses grow in an increasingly competitive marketplace. You can start your business across the web and employ automation in your store with them.
Our team helped Acorn identify what their website should cover and understand Acorn’s products. We also had to research more about its business to design and develop the website. A website that can easily represent what Acorn-i does with fewer but impactful words.
Our mission was to design such a digital experience that showcased Acorn’s capabilities. We did exactly that by demonstrating through interaction, animation, and information architecture. We made a complex business model feel effortless.
Key Project Deliverables
These are the specific, measurable, and important product milestones delivered by us to the stakeholders.
Easy Interactive Animation
Implemented a lightweight animation on the website. This shows the technical capabilities of the business. The animation is very snappy and loads easily without impacting page speed.
Making Custom Filters
Implemented custom filters for each template to search news, stories, etc, based on the brands. We have given such functionality that the client can introduce new filters according to their needs.
Ignite Module Integration
The third-party platform, Ignite, adds new leads from the website to the existing CRM. This is directly connected with the website interface from the backend, so new leads find their way to the sheets.
Social Media Sharing
Users visiting the website will have the option to share stories and news on their social media accounts via social share buttons. This was a basic yet important feature to be implemented across the website.
Fresh & Unique Design
Created a unique web layout template using XD tools. After that, we implemented the design with the actual WordPress templates. This was a whole new look that we built from scratch based on the client’s needs.
Ultra-Smooth Scrolling
The whole homepage is divided into sections with the help of fullpage.js. It provides a smooth scrolling experience to users. There are numbers given on the side of the panel for easy section navigation.
Major Project Challenges
Understanding the business concept and proposing a design that represents the business using a prototype was tricky. But after giving it both time and thought, we made such a design that gives an exact idea of the end results.
Presenting something new was a huge challenge, as meeting the client’s expectations requires high-level conceptual work. Yet, after this major hurdle, there were just a few more challenges remaining to get the project done.
- First was to understand the business and provide XD prototypes with a conceptual design.
- Next, implementing light-weight custom animations on the website that won’t affect website speed was easy yet time-consuming.
- The old lead capture system couldn’t properly categorize or route leads based on intent. So, to integrate the third-party tool Ignite and pass leads on to the CRM was the next challenge.
- To use Lottie animations in Gutenberg blocks. These JSON-based animations were embedded throughout for dynamic & visual storytelling.
- To develop a color-changing strip on scrolling for each page. This is because every frame counts when you’re serving global audiences with varying internet speeds.
Solutions & Impact
Our team is capable of learning about every kind of business. We always take on new challenges and opportunities to deliver the best and provide solutions. The client was satisfied with the consultation and deliverables that we provided. Below are the most highlighted milestones that we achieved while working on Acorn-i.
- Our UI/UX team got involved and presented mockups. Upon approval of the mockups, we created XD prototypes to give exact ideas of the end results.
- We created an interactive globe animation in Three.js and implemented it on the website without affecting page load speed.
- We created a custom API to bridge the website and CRM to pass all leads. Ignite receives not just contact information, but contextual details about what content the prospect engaged with.
- All Lottie animations were exported as .json files and imported into the WordPress media library to use inside Gutenberg blocks. So, editors can add dynamic content without touching code.
- Lastly, we also set a gradient background on each page that appeared to change color when scrolling. It’s subtle enough not to distract from content and engaging enough to guide attention through the user journey.
Project in Figures
2
Months Duration
250
Estimated Man-hours
3
Team Size
Applied Technologies
More Screens
LOOKING FOR A DESIGN AND DEVELOPMENT PARTNER?