Case Study B-works

Launch of

b-works.io

 

UX Design, Front-end development, Back-end development, SEO, Analytics

Case Study

Client: B-works, an agile digital agency with offices in Zurich and Bolzano, focused on strategy, agile Web & Software Development and Marketing for ambitious, tailor made digital projects.
Industry: Digital services, Web & Software Development, Digital Strategy Consulting, Digital Transformation, Marketing
Objectives: Launch the corporate website as a single page application (SPA) to introduce B-works with its skills and talent base to the market
B-works role: Front-end development, Back-end development, SEO, Analytics
Technology: Front-end with JavaScript/ VueJS, Back-end and CMS with Drupal 8
Project size: 100+ man days over 4 team members at B-works
 

Summary: 

To launch and introduce B-works to the market we wanted to create a highly customized single page application that would look and feel different than a typical company website. We started by laying out our core principles that include agile, reliability, innovation and an openness to solve complex problems. Using these core principles and by developing 6 customer personas, we created a design that, when implemented, would feel like an app and would have the goal to lower cost per conversion to under 100 Chf. The challenge was to have the whole site load in under 5 seconds, so the website visitor wouldn’t have to wait for subpages to load. At the same time, we wanted to push the technical boundaries with a new approach by combining the best of our signature technologies: Drupal 8 as a strong CMS in the back-end and VueJS (JavaScript) with its wide range of animation and design opportunities in the front-end.
Finally for top-5 SEO ranking we needed to ensure fast site loading speed (performance), as well as crawlability for Google to index the website properly.


About the client:

B-works is a full-service agile digital agency with offices in Zurich and Bolzano, focused on Strategy, agile Web & Software Development and Marketing for ambitious, tailor made digital projects. 

As part of our Digital Strategy we define our client’s business goals with KPIs, proactively add ideas and map out a strategic digital roadmap, which may include UX designs as the basis for estimating and implementing a project with web and software development.
We implement Web-Platforms and Software Applications with agile Software and Web-Development by using Scrum and by drawing on our experience from different industries. This includes JavaScript (VueJS and AngularJS) front-end development, back-end development using PHP and Laravel, as well as CMS development using Drupal 8. 

As a third pillar we focus on data-driven Marketing, which includes tracking KPIs with Analytics, continuously improving online marketing measures including SEO and SEM, as well as improving the user experience to lower the customer acquisition cost and cost per order through conversion optimization.


Objectives:

A new and innovative, fast-loading single page application website was to be launched, that would feel like an App, while being indexed well on search engines

The time available for this project was 4 months and included the following objectives:

  • Set up a multi-language Content Management System (CMS)
  • Site loading speed under 5 seconds (without videos)
  • Connect external data tracking tools and Google Analytics and track conversions through Analytics Goals and Events
  • Top 5 search engine ranking for defined short- and long-tail keywords
  • Launch the website within 4 months
  • AdWords and Social Media Marketing on Facebook and Linkedin
  • Cost per conversion under 100 Chf

 

mock up b-works CMS digital solutions IT expert Drupal Development Agency


B-works’s role: 

Process and tools:

Key for successful and on-time delivery of this project were the following factors:

  • Setting up a team of 5, consisting of two senior designers, two senior developers and a product owner
  • Developing 6 customer personas for each of our target client typology, which resulted in UX requirements for Content, Design and Functionality of the single page application
  • Developing a user-centric design in Sketch by employing UX practices including development of customer personas
  • Researching Google indexing for headless (detached) JavaScript front-ends, connected to Drupal 8 back-ends
  • Prioritizing technical requirements and features based on business value and technical implementation feasibility
  • Weekly sprints with sprint review, retrospective and planning with Jira
  • Front-end development with JavaScript/ VueJS
  • Back-end development with Drupal 8
  • Connecting Front-end and Back-end with a RESTful API
  • Monthly time reporting using Jira
  • Agile testing and parallel bug fixing by developers
  • Setting up goals and events in Google Analytics to track conversions 


Technologies employed:

  • JavaScript/ VueJS front-end development
  • Drupal 8 content management system (CMS)
  • Drupal 8 back-end development/ PHP

 

Benefit to the client:

Challenges:

The main challenge faced in this project was to create a new single page application, which connects a distinct front-end technology (VueJS/ JavaScript) with a separate back-end technology and CMS (Drupal 8/ PHP). A further challenge was to achieve high performance by loading the whole website at once and in under 5 seconds to ensure high usability, low latency and good Google ranking (as site loading speed has become a relevant factor in search engine ranking).
Finally, proper indexing of the website on Google, across the two technologies, was a challenge which required research and testing, while monitoring the Google ranking over time.

Key learnings:

A key learning in the development of this single page application was usability in developing the CMS to seamlessly create and build pages, which would display on the front end, after “translating” from the back-end to the front-end technology.

Key benefits for the client:

  • Delivery within budget and deadline, 4 months after project start
  • Versatile single page application that allows building new pages with responsive modules, fit for different content types (i.e. Blog, Careers, Services, Testimonials)
  • App-like feeling with no loading time when entering sub-pages


Potential for further development:

The experience from building this ambitious headless single page application with VueJS and Drupal 8 has been useful in developing the re-launch of www.pistor.ch in a time effective manner and by avoiding pitfalls. 

Future projects will benefit from expertise related to developing and integrating a highly usable and customer friendly CMS (Drupal 8) with a cutting-edge front-end framework (VueJS) for modern, dynamic, app-like web experiences and enterprise applications.

 

Further information:

Contact:


Alex_Beninca.jpeg

 

Alex Benincà
B-works product owner

For further contact:
E-Mail: alex.beninca@b-works.io
Phone: +41 (0)44 500 2615
Linkedin profile

 

Our Specialties: