The Beginning
A strong digital presence is key in our highly competitive environment and this story is about a 2-month journey we took as designers to reimagine a 3-year-old website for a fresh, new, updated one. This project was driven by the need to align our online presence, with the changing B2B SaaS market and the limitations found in our current website.
Why Redesign Was Required?
- Ineffective Communication:
• The messaging on the old site failed to effectively communicate our value proposition, often leaving visitors unsure about specific benefits offered by OpsLyft.
• Additionally, setting the context and repeating OpsLyft’s offerings on each customer contact took a lot of the CEO, Sales, and Marketing teams’ time. - User Feedback and Pain Points:
• HotJar’s heat maps and user feedback identified a number of pain points, including poor navigation, unclear information architecture, and inaccurate content. - Outdated Aesthetics & Functionality:
• The old website had an outdated design that failed to reflect the true scope of our offerings.
• Functionally, it struggled to deliver an intuitive and efficient user experience. - Competitive Landscape:
• In a market with fierce competition, it was important that our website stood out as a testament to our innovative thinking and reliability, which can boost brand credibility.
Design Process
When you have diversity in your business requirements & constraints, a systematic approach is ideal. As a result, we decided to implement the Double Diamond process, which symbolizes divergent and convergent thinking, in order to meet our business needs effectively.
Starting with the Kick-off phase, which included understanding the Founder's vision, and future roadmaps from the PM along with visual inspiration discussions with the marketing team. This was followed by the discovery and delivery phases.
» Problem Discovery Phase
I strongly believe that before starting any design, the most powerful asset for any project is good research. We began our project by carefully examining internal (company) and external (competitors) drivers before laying out a schedule and plan of action for the design process. As a result, the stakeholders & marketing team supported the process and project length.
“Design adds value faster than it adds costs.” — Joel Spolsky
This was our guiding principle throughout the entire process to make sure that every component of the website added value to the business & its mission.
Step 1 — Discover
•User persona development helped us narrow down the primary audience: Leadership, DevOps Engineers, Investors, and potential candidates branched across different pages creating detailed user personas.
• Thorough research and competitive analysis helped us understand the organization’s mission, vision, and user personas clearly.
Step 2 — Define
• Information Architecture:
We restructured the old site map for a more intuitive and structured navigation experience.
Based on this, user flows between sites could be made simpler by eliminating unnecessary pages, merging existing ones, and adding new ones when required.
- Wireframe:
We sketched low-fidelity wireframes to establish layout, and structure, and validate ideas with our stakeholders. A few screens went through multiple iterations until we found the best fit.
Additionally, we developed interactive prototypes for complex screens/flows as and when required.
» Solution Phase
Once logic and functionality are defined, the process of visual design doesn’t take long. The UI was developed using wireframes and the modular system while adhering to the brand’s visual standards.
During this stage, well-developed design thinking helps you justify decisions and deal with alternative opinions within the team.
Step 3 — Develop
- Content Strategy:
While drawing visitors to the website is one part, keeping them engaged on your page is the other challenge. Our objective was to create concise, understandable, and persuasive text because we were aware from the start of how important effective copywriting is. - Visual Design:
When we had a general idea of the purpose of the website, we needed a system for presenting the vision. We gave OpsLyft a refreshed brand identity, including color schemes, typography, and imagery guidelines
Step 4 — Deliver
• Development and QA:
The handoff to a developer is the final and crucial step of a project. Good handoff saves time and effort for the developer and the designer, as well as improving the quality of the end product.
We created a document that had all the details and digital assets required for the developer to bring the website to life. Frequent collaboration & reviews with the developer ensured accurate implementation of the design.
🖥 Live Website- OpsLyft
UI Designs
⭐ The new website’s elements, illustrations, videos, and concepts have all been entirely original creations.
• Below are a few distinct snapshots of the drawbacks on the Old Website (left side) and how we improved the experience on the New Website (right side).
Landing Page
Home Screen- As per HotJar’s heatmap, 83% of users clicked on the product hero image which is not clickable (left image). In the new design, we ensured we conveyed what OpsLyft as a product offers at a glance & made it interactive in the form of a simple video.
Value Proposition- Outdated value props & sloppy scrolling animation made it confusing for users to understand this section. Hence, we divided it into 4 relevant categories with a short video making the info clear & interactive.
Customer Testimonials- HotJar’s analytics highlighted the interest of users in this section while the UI is not visually appealing & the user has to click several times to read them all. We fixed these issues in the new design.
Product Page
Budget Hero Section- The hero section of the feature was very generic and did not clearly depict the benefits. In the new design, we ensured all the Product pages looked uniform & clearly indicated the use case of the feature (we used 3D images across the website).
Feature Benefits- The old design had too many labels with no relevant categorization along with images being outdated. The new design had every illustration made new in sync with the theme of the website.
About Us Page
Careers- Being the most informal page, we went bold with a tunnel-like pattern filled with fun pictures, highlighting team bonding. With a growing team, it was better not to have individual employee names as it took a lot of space & it was impractical.
Company Values- While the core values of the company remain the same, we made some UI changes making it colorful, fun & quirky, in turn creating excitement amongst potential candidates along with bold copy.
Resources Page
Case Studies- The old resource pages had a random library hero image & case study thumbnails were very plain. Here, we added animations in each hero resource section & good thumbnails making it clean & better looking.
Final Outcome
After a month of the website going live, we observed a significant improvement in a few key metrics such as —
- Incoming traffic
~64% increase in Monthly Average Visitors - Optimization
~32% improvement in Bounce Rate - Stickiness
~2.30 minutes increase in Average Session Duration
In addition to the quantitative metrics mentioned above, some of our qualitative improvements include —
- Improved User Experience: The redesign significantly enhanced the user experience, resulting in increased engagement and longer page visits.
- Enhanced Brand Image: OpsLyft’s updated branding and design positioned them as a modern and trustworthy SaaS provider.
- Clearer Messaging: The refined content and improved messaging clarified OpsLyft’s value proposition, leading them to drive sales better.
- Competitive Edge: OpsLyft’s revamped website now competes effectively in the B2B SaaS market.
Conclusion: Looking back and beyond
Having a B2B SaaS cloud platform mindset to a rebranded, updated website after 3 years required me to have a complete mental shift due to changes in guidelines, user personas, theme, etc.
It taught me a lot about people, cross-team collaboration, and how small changes to even smaller interactions matter.
Additionally, this gave me an opportunity to let my creative juices flow freely, considering the restrictions that come with B2B SaaS platform designs.
It's an amazing and humbling outcome on our goal as a team —
To design in a way that positively impacts the business and serves the greater good.
I really enjoyed the process from ideation, design, and handover to testing of this project. Couldn’t have done so without the amazing team at OpsLyft!
Thank you for your time and attention to read till the end. If you found this article interesting, a clap or two would be very much appreciated. Feel free to reach me on LinkedIn or in the comments section!