Structured Credit Investor (SCI)
SCI is an independent financial information provider focusing on the global securitisation markets. Founded in 2006, it offers subscribers an array of products across Events, Data and News.
The primary website of the organisation has served it well for many years. Aligned with decisive efforts towards upgrading its web assets' tech stack and modernising their functionality and features, the client took the strategic decision to move Events on to a new domain and kick off its courageous technical evolution process with the launch of a brand new Drupal build, enhanced with Event management capabilities, bespoke Commerce and Stripe Payments' integration, a sophisticated tax types' management system as well as multistep Drupal webform implementations.
Requirements' Analysis & Timelines
The main initial tasks for this project were gathering, analysing and refining the high-level requirements, then breaking everything down in more manageable pieces of work, grouped together and estimated. For the management of this project we used Trello, which is ideal for small to medium sized projects.
Along with the above, we created a timeline projection based on the time-estimated groups of tasks, their nature and the speciality required for every group, including the following:
- Project Management & Business Analysis
- Design, UX-UI wireframes
- DevOps - Cloud Hosting
- Drupal - PHP Development (front-end / back-end)
- Technical Leading
- QA Testing
Mobile-first UI-UX & Design
A high-level style guide was already available and we naturally used it as an inspiration for the colour-coding, sign-posting and general aesthetics of the new website. We've used Figma to generate, store and share the wireframes and designs with the client. Figma is one of our favourite tools for sketching up interactive designs and web components for prototypes but we also regularly use it for pixel-perfect style books, always essential for detailed components-based designs and ideal for communicating the essence of a project's design with the client and involved stakeholders.
Key features - modules
The main specifications for this project aimed to allow the client to:
- Create, store and manage Events in the back office
- Create variants from the main Event type based on various parameters such as: The time of the Event, its price and its location (affecting the currency and tax type)
- Present the Events in a clear and concise manner on the front-end, using a series of pre-built styles ("sub-themes") in the back-office
- Enable clear and accessible checkout sequences, allowing end users to register online for any Event
- Manage Event registrations in the back-office and send & receive informative email alerts
To enable online payments for this project we used Drupal Commerce and its Stripe payment gateway integration with some custom code to hook into the multistep webforms handling the Event registration. We are also making use of a series of Commerce sub-modules including:
- Commerce Tax, to support VAT tax for UK-based events or other types of Tax, all with configurable names and percentages
- Commerce Promotion, to support discount vouchers; administrator users can easily generate any number of vouchers associated to specific Events. Upon checkout, eligible end users can enter their coupon code and get the corresponding discount. Vouchers and their parameters including the discount percentage are also fully customisable in the back office
We designed and built a series of content components that enhance the end user experience. The client needed a quick and smooth way to manage the content of any component instance on every page; Layout Builder proved to be the right choice, providing the client with the ability to create rich page designs with clear sign-posting.
Needless to say, we made extensive use of the Webform module and its submodules; the primary Event registration flow makes use of a sequence of webform steps based on field groups. Towards the end of the multistep webform flow, a bespoke Commerce order is generated, saved and sent over to Stripe for payment processing before returning the user back to the website to confirm the Event registration completion.
Event registration: A Commerce & multistep Webform implementation
The Event registration sequence is based on a multistep webform that begins with the collection of basic personal information (step 1):
Moving on to step 2, company details are requested; Upon submission of each step, its fields are validated for their type (e.g. number), input format or whether they are required or optional with clear validation error messages displaying to the user when needed:
Moving on to step 3, the user is asked to provide the number of attendees as well as whether they require an added extra to the main Event. The labelling and all attributes of the optional product addOn are configurable per Event component instance in the back office.
On the next and final step, the user is presented with a summary of their order and they can complete their purchase using the Stripe-integrated payment checkout form. On the same page they can make use of discount voucher codes (previously issued in the back office and provided to the end user by the client, based on certain eligibility criteria):
Upon submitting the payment form and successfully completing the Event registration checkout process, they user lands on a confirmation page and an email confirmation containing the Event details and registration data is sent to the customer. The client's Events-managing team also receives email alerts containing key details and links to the Drupal CMS back office to further process / manage each order.
Back office enhancements
In order for the client to be able to administer and set up the various Events without having to visit multiple pages in the back office, we built a custom configuration form where all the active Events (i.e. Event webforms integrated with Stripe in the last webform step) are listed (we've obscured some sensitive data):
Upon clicking on any "Edit fields" link, the back office user is directed to the dedicated Event core parameters' editing screen (we've obscured some sensitive data):
That way, the client's Event management team can easily set each Event's properties; saving the form automatically propagates the updated values to the corresponding Event entity's fields as well as the corresponding Event registration webform's parameters (set as Drupal Tokens i.e. placeholder variables in each webform's settings).
Content Components and Block types
The presentational character of the new SCI Events website required an array of reusable, reorderable and cully-configurable components, some of which we present below:
Event pricing cards reusable component
The component allows for configurable parameters per instance, including:
- Price, currency and discount
- Timing element (e.g. "Early Access" or "Final Release")
- Colour theme
- Editable titles, labels and content text
Award categories accordion reusable component
For Award types of Events, the various categories are minimally presented in rich text within expandable accordion panes.
Award pitch submission webform reusable component
A relatively simple webform implementation, available through a dedicated block type, that allows end users to submit their pitch and eligibility criteria for participating in Award Events. Submissions trigger email alerts to dedicated client team members handling these Events.
Events' listing cards reusable component
A fully customisable content component referencing the various events available to attend and/or book. The client's content management team can define the order, colour theme, rich text and Event logos, composing presentational variants that apply to different groups of end users visiting the site.
Streaming video reusable component
Remote video streaming was a conscious client choice, allowing embedding YouTube and Vimeo videos into reusable block type instances that can be placed anywhere on the website.
There are other content components available in the back office; you can see how most of them look like on the actual SCI Events website.
Conclusion
We definitely loved working on this beautiful project. Our development team eagerly solved a couple of interesting riddles related to the bespoke integration of Drupal Commerce combined with a custom multistep webform and proved, once more, that Drupal is not only a modern content management system but also a complete and customisable eCommerce powerhouse!
ORION WEB can help you design, build and configure beautiful eCommerce experiences for your users. Contact us for a free consultation - we'd love to discuss your organisation's web design needs!
