Case Study - Qii
Background
Qii's main objective was to increase business leads and provide a more user friendly UI for their customers.
Our main task was to develop a modern, responsive website with illustrations and Lottie animations and to migrate their old Wordpress site’s content into their new Webflow site.
Tools
Duration
12 weeks
Discovery
Co-design
At the start of the project we were introduced to an initial Desktop landing page prototype. To make the design responsive we created the screens for smaller screen sizes.
We created responsive components and layouts in Figma while keeping user goals, accessibility and usability at the forefront.
Responsive graphics
Webflow is great for creating responsive websites, but we prefer to have the layout for all screen sizes finished at the prototyping stage to prevent more time-consuming changes later on.
Therefore, we perfected every prototype screen for all screensizes Figma and adjusted the graphics before moving to development.
Development
Figma to Webflow
Once the prototype has been approved by the client we moved over to Webflow to develop the website.
- Set up of pages and layout
- Assets, styles and typography
- Interactions and animations
- Thorough testing and publish
Timeline animation
The client needed an interface that walks customers through the process of using their app in a visually engaging way.
We've developed a scroll animation to illustrate each stage of the journey of customers interacting with their app.
Hero Animation
Qii’s website has been designed for two separate target audiences. B2B clients who the main product is marketed for and the end users of the mobile app.
We've developed an animation triggered by mouse hover on the CTA button to visualize the switch from the customer site to the business site.
Custom Code integration
To meet some of the functional requirements we needed to integrate some custom code. Such as the sort function for the blog/articles section to enable users to filter by topic and category.
We have integrated and customized Finsweet’s library to enable filtering items pulled from Webflow’s Collection Lists based on the content inside them.
Testing
Testing Method
Usability Evaluation: The website's usability has been evaluated using Task Analysis to identify any possible areas of confusion or difficulty and correct these to ensure that it is usable, effective and efficient for the target users.
Functional Testing: Comprehensive functional testing to ensure that all links, forms, and other interactive elements work correctly.
Compatibility Testing: The website underwent compatibility testing to ensure that it works as expected on all devices, browsers, and operating systems.
Performance Testing: The website's performance was tested using Google Lighthouse in terms of Performance, Accessibility, Best Practices, and SEO. Providing a 60% improvement compared to the old site.
Results
Quality assurance
The website’s performance met the requirements and the clients’ expectations. Our daily meetings have ensured constant feedback leaving no surprise to the client at the end of the project. I enjoyed the collaborative process with the team at Qii and looking forward to the next project.
Google Lighthouse Audit
Handover
The website has been handed over to the client with training videos on how they can easily manage and update the content themselves through the CMS.
From The Client
“We needed help to develop our new website on Webflow, Marton did excellent work and helped us out from the ideation stages all the way through to development. His insights and development skills helped us create a fantastic custom website with a lot of custom interactions that would not have been possible for us without his help.”
Get in touch
Ready to take your online presence to the next level?
We'd be happy to hear about your idea and put together a free proposal. Just fill in the form below or send us your brief to contact@peakflow.site Let's bring your vision to life!
Whether you have questions about our services, want to discuss a potential project, or just want to chat about web design, we'd love to hear from you.
Rest assured, we will only use your information to correspond with you.