Skip to content
Dorve Logo
  • UX Work
  • UX Services
  • UX Blog
  • UX Team
  • Testimonials
  • HIRE US

Arena Solutions

Helping Arena optimize its resources and get the most out of its online presence

Project Info

Arena Solutions is one of the largest software companies in the world and, as such, also has a large site.

Initially, the project consisted of converting a BIG site built in AngularJS, to a WordPress site with custom editing capabilities.

While Angular is not exactly “friendly” for conversions, the project was not very special in terms of difficulty. Only large: more than 1000 pages, with around 30 different templates.

Once we started, we found some surprises. First, the site was built in AngularJS… mainly. Then we discovered that different people worked on the site, and all of them built “bubbles” that contained different layers of code in different languages. Thus, we found AngularJS, Django / Wagtail, a legacy WP installation and some PHP code in Laravel. One option was to maintain the same logic of building another layer at the top, but we decided to clean everything and remove all traces of any language other than PHP and any framework other than WordPress.

More challenges

In addition to this, we were asked to:

  • keep the information architecture the same
  • keep exactly the same design, pixel perfect, no differences were allowed
  • connect with different third-party marketing tools and create user flows based on what these tools responded in real time

The first item was really difficult.

Since AngularJS has a completely different architecture, you can name pages, posts, categories, or types of custom posts with the same name without problem.

For example, let’s analyze the “page” slug:

site.com/page/ (where "page" is a page or publication)
site.com/category/page (where "page" is a page or publication or subcategory within "category")
site.com/page/cat (where "page" is a category)

This is perfectly valid in Angular and in many other systems. However, WordPress changes the name of slugs when it finds a duplicate slug. Then, “page” begins to become “page-1”, “page-2”… “page-N”.

Therefore, we needed to find a solution to this problem, which we achieved with a combination of AJAX and .htaccess.

Pixel perfect design

As for the “perfect pixel” item request, we finally discovered that instead of more or less 30 templates, we had to build almost one template for each page. Finally, we finished with about 200 templates, includes and parts.

But we did it!

Third Party Integrations

The last point was relatively trivial, with the exception of Marketo’s implementation.

We had to send information asynchronously to Marketo, then “listen” to Marketo’s response and create a custom user trip “on the fly”, which we did with AJAX and some JS plot libraries.

Arena Solutions Cover Page

Requirements

Translate an existing site built in different languages to WordPress
Keep information architecture
Keep layouts the same, pixel perfect
Connect 3rd party applications

Strategies/Techniques

Programming Language Conversion
UI Design
Framework Logic
Marketing Tools Connection
Asynchronous connection and REST

Tools

WordPress
PHP
Javascript
AJAX

Final Results:

A “bigger than life” site using up to 5 different programming languages and frameworks became  an easy to use site with only one framework while keeping and enhancing all of its existing features

Photo Gallery

  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions
  • Arena Solutions

The Blog

Google Optimize Sunset: GOes Google Analytics 4 (GA4) Breaking News: Google Optimize goes down on Sept. 30
interactive design: 2023 AI-based design front cover Interactive design: Will 2023 be the breakthrough for AI-based design?
UX and CX: Jumbo's KletsKassa Amazing CX: Jumbo creates slow checkout lanes
Human Centered Machine Learning: the good and the bad Human Centered Machine Learning: the good and the bad
Lecanemab news: FDA approves it under the brand Leqembi Lecanemab: new hope for Alzheimer’s comes at a $56,000 price
Adobe acquires Figma Adobe buys Figma: 5 reasons for hope or doom
UX and crypto cover image Is UX ready for the new cryptocurrency world?
Upwork 2021 rebranding analysis cover Upwork 2021 rebranding: a much improved look
Build your first Quantum UX project cover image Design your first Quantum UX project in 7 easy steps
new VISA logo 2021 New Visa logo in 2021? Well, kind of…
physical ux design cover Physical Design: A perfect set of 77 UX Heuristics
better UI for alzheimer's and parkinson disease cover image 11 tips to create better UIs for people with Alzheimer’s and PD
Disabled person at work using an accessible interface Accessible interfaces: Top 25 ways for a better website
Los Angeles tourism brand cover Los Angeles new tourism brand is the ultimate “back to 80s” sensation
great brand design: Huggies 2021 Great Brand Design: Huggies 2021 brand identity
Artificial Intelligence and UX Artificial Intelligence and UX: a 2000 words Quantum UX practical example
user interface design 6 years old kid amazing User Interface design skills!
ux writing and ux upgrades cover Perfect UX writing: AirBnB 2021 UX upgrades example
  • UX Blog
  • UX Services
  • Our UX Team
  • Testimonials
  • Contact Us!
  • Sitemap
  • Privacy
Dorve UX and UI Logo
-->