Rangle’s relentless focus on deep quality paid off at the North American Software Testing & QE Awards yesterday held at the Ritz-Carlton Hotel in Toronto. The organization took home the award for ‘Best Agile Project’ for their outstanding work in revitalizing and re-engineering the Rangle.io website. The website now promotes the organization’s new global presence and growing reputation as a leading strategic digital innovation partner. Working in a truly Agile framework, the team was able to deliver impressive key results in a short period of time. Some of these results consisted of decreased reliance on developers for page builds and website changes, enablement of data-driven decisions via Google Tag Manager, improved GDPR compliance and actionable insights from user testing.
In the words of Rangle CEO, Nick Van Weerdenburg,
“As you start building and evolving, if you don’t have quality built into your product and infrastructure, you’re not going to be able to adapt or change, you’re actually going to go slower because the complexity will slow you down. Quality creates speed. If you compromise on quality, often not the most visible thing, you start seeing the long terms effects and your innovation is compromised.”
By breaking down silos and coming together as a cross-functional team comprised of quality, development, and marketing, Rangle was able to create a winning proposal that successfully demonstrated their commitment to quality. Rangle has long prided itself on building things that work with a bias for innovation and leveraging verification and validation methods to improve product viability. This win is a testament to the strong quality consulting community of practice that Rangle possesses.
If you're interested in learning more about the project, you can read the submission for yourself below.
__________________________________________________________
Revitalizing and re-engineering the Rangle website to reflect its new global presence and growing reputation as a leading Strategic Digital innovation partner
Project summary
Last year Rangle went through a total rebranding and the website needed to match the look and feel of our new brand. There were many challenges that needed to be overcome; like enabling the marketing team to build their own custom pages and having a consistent look and feel throughout the website. All of this while trying to stay true to what Rangle’s culture and contribution to the digital industry is.
Coming on to this project, there was a lot of misalignment, lack of prioritization, among other obstacles. This was solved by bringing on a brand new team who worked within a truly Agile framework and delivered some impressive key results in a short period of time.
Background and significance
Earlier this year Rangle opened 3 new international offices. This meant as a newly global company we needed to update our website to reflect our presence on the world stage. The Rangle website was intended to generate marketing leads where prospective clients would land and want to partner with us to accelerate their digital transformation journey. The website was also intended to attract new talent by showcasing our design and development expertise and along with a strong sense of community.
Unfortunately, the website was not generating as many leads as one would have hoped and a reboot was necessary. The initial strategy to generate interest among potential clients meant driving visitors to our blog posts to sign up for our weekly newsletters. Looking forward, this meant when they were faced with a business challenge, they would think of us as industry leaders and want to partner with us.
By addressing the above hiccups, we planned to make the Rangle website reflect the newly branded international organization, not the outdated clunky website. With the intent of focusing on outcomes, our Scrum team leveraged their technical expertise and commitment to Lean/Agile methodology to tackle the above. Using Agile helped to ensure speedy and effective deliveries of sprint and evolved the website in iterations.
To ensure we had clarity around the team structure, our Advisory Board sketched out our technology strategy and throughout the process removed high-level blockers. The Enablement & Capabilities team created a technical runway for the core team that included our Program Director, UX Designer and Solution Architect. The core team was comprised of several Developers, an Agile Quality Analyst and a Product Manager. The content team, comprised of a Visual Designer, a Developer and an Agile Quality Analyst, enabled the marketing team by providing design, development and testing for any ad hoc requests that came in.
Project aims/goals
On this revitalisation project, the aim was to have a clear avenue for communication not only to showcase our expertise and what we offer, but also to our broader community of what we facilitate, through outstanding design and exceptional user experience that displays our brand personality.
Clear and concise explanation of our unique value proposition and core services
Regardless of which kind of user is attracted to our website, the website aims to stand as a perfect example of the kind of consistent, clean, unique branding that we vow to deliver to our clients. By mapping the journeys of our entire audience, we aim to anticipate improvements and changes that would allow us to deliver an exceptional UX. It stands as a portfolio piece of the work we can provide.
Enabling Marketing Team to create new pages and successfully push content with minimal technical support
Showcasing Rangle’s success through case studies and blog posts is a constant need to remain relevant in the industry. Enabling the marketing team to do so seamlessly is important to help with quick delivery of new content
Methodology/work undertaken
We used Scrum to manage our processes and develop our software in an agile way. Each sprint is a week long and was agreed upon as a team. Sprint planning was kicked off by agreeing to practice updating key results, review progress versus plan, confirm the sprint goals, review capacity versus sprint goal. Constant Backlog refinement helped the team create stories which aligned to INVEST (Independent, Negotiable, Valuable, Estimable, Small and Testable).
Our scrum team laid norms that made the team outputs more evident, accommodating to changes. Few norms that we abided by were:-
- Taking Initiative & Ownership for the tasks in hand
- Transparency, Collaboration, Act as a United Front, timely and effective communication
- Face to Face trumps Messaging or Email and not limiting to standups If you're blocked
Testing each story took into account the following objectives:
User Experience: The UX experience is intuitive and consistent throughout the application including user flows, navigation and visibility to all the functions. Design Systems were leveraged to ensure Rangle’s brand color, font type, font size, spacing and other design elements are consistent and easily accessible to all.
Accessibility: The website is designed to be accessible in a mobile environment and is a consistent experience across all devices. Images and text resize according to the device so that the website is easy to use and navigate around. Testing is done to ensure the website can be navigated via a keyboard, contrast ratios of text to background is assessed to ensure its legible using various plugins, hover and focus states are designed and implemented accurately.
Tools and technology stack:
For defect management and handling sprint progress we chose JIRA. It helped organize our work into stories and epics and also helped us to effectively communicate within teams. Below is an example of how JIRA was used to navigate throughout the tickets, stories and tasks. It also illustrates how the team was able to communicate in a timely and effective manner.
Our Website is built using the React Framework. All content on the website is managed by Contentful, all React components on the website represent content types on Contentful. When a page is ready to be published, Gatsby would build the content from Contentful along with React components. The build is then deployed on Netlify which hosts our website. Blogs and podcasts on the Rangle website are built using an open source blogging platform written in Javascript called Ghost.
Google Tag Manager and Google Analytics are used to track website and user interactions.
The website also integrates with Pardot which handles all marketing forms like Newsletter SignUp, Contact Us or any new webinars which require user signup.
To meet our Project Goal of GDPR compliance as one of our project goals, we integrated with a third party software called One Trust.
Finally, Cypress was the chosen tool for creating end to end automated tests for most common actions on the website like filling out the Contact Us form, etc.
Work undertaken:
- Reducing complexities in building pages on the Website and enabling Marketing to create content with minimal developer involvement.
- Enable Marketing Pixels on social platforms to track traffic sources, page views, filter views by Page Type and Content, etc. This will enable marketing to make data driven decisions when creating content for the website.
- Integrate with One Trust to make the website meet GDPR compliance requirements
- Build the MVP version of the homepage so that we can take it to market and perform user testing on it for internal and external shareholders
Challenges/obstacles overcome
Lack of a staging environment
All new components when merged are directly deployed on the production environment. This led to testing being done directly on production and there is no gatekeeping on quality of code.
This challenge was overcome by testing locally by directly pulling PRs and catching bugs prior to merging. Also, live preview of any content changes was enabled by building only a single page on Gatsby. This feature not only helped improve test speed of undeployed code but also enabled the marketing team to live preview changes they make on Contentful before publishing.
Overall performance of the website
One of the major concerns at the start of the project was the performance of the website in terms of load time. This was improved by implementing lazy loading, which is basically the process of loading modules (images, videos, documents, JS, CSS, etc) on-demand instead of on page load. In true agile spirit, this was delivered incrementally and iteratively. After an initial release with lazy loading implemented on some components, the performance was measured and when the improvements measured were significant, it was implemented incrementally across the website.
Results
We evaluated our success metrics based on outcomes and not outputs which resulted in a lot of improvisations on our website that were footprints to our long term objectives.
- Enabled Marketing to build pages on the website faster with minimal developer involvement.
2. Enabling data-driven decisions
Integrating Google Tag Manager and Google Analytics enabled the website content and events to be tagged easily, that led to us gathering some insights on user behavioural patterns, user journeys, etc. Attached is an example of one of the insights gathered on Channel Performance after enabling analytics.
3. Launched the Cookie Banner to enable GDPR Compliance
Attached snapshots indicate that the Cookie settings can be enabled and disabled on Rangle website.
4. Synthesis of user testing done on new Homepage
Actionable insights were extracted from our interview findings and we distilled overarching items into user stories and tasks. A document was also compiled that supported the synthesis of our research findings, from both internal and external stakeholders, by identifying and isolating action items that allow the team to form tasks.
Evaluation
Previously, Rangle connected with potential clients mainly through conferences, meetups and seminars. The website was a dated relic of the organization it used to be instead of representing the global organization it stands as today. Clearly, a lot of gaps were identified and we jumped in to make the modernization process a cakewalk.
A way to recognize and evaluate success would be the current state of website which, as a Rangle employee said themself; “[is] an exceptional online experience that gives visitors confidence in selecting Rangle as their digital partner or employer”
As the project rolled out smoothly and thanks to the user testing conducted, our research findings showed that the Rangle website now has ‘Clear, direct and concise proposition statement’. We found that “Learning is a journey” was one of the most important takeaways apart from the ones listed below. A roadmap can now be drawn for the Rangle website to:
- Highlight Rangle’s grassroots history
- Highlight Rangle’s community involvement and major announcements
- Feature business development details on the Contact Us form
- Propose localization strategy to cater the website to all users
- Refresh Information architecture
- Elevate Visual Language
And miles to go….