Westwood Global Energy Group is leading provider of research, analytics, and consulting services to the global energy industry, with offices in the UK, USA, Mexico, and Singapore. With a team of 70-200 employees, they generate over $17M in annual revenue and serve over 300,000 individual users
Challenges and goalsBuild an extensible, UX-friendly design/framework to support various products and data growth
- Business problems
- All services provide different user experiences
- All services are built on outdated or various tech stacks, leading to a decrease in development speed and hindering fast update deliverability
- The RigLogix app is built on an outdated tech stack
- The need to enable access to services using a single account, possibly as a package
The Westwood Global Energy Group has acquired several services
- User problems
- Similar components provide different experience
- Difficulty in remembering the features of services
- Inconsistency in naming entities
- Different credentials for each service
So, our main focus was to create a seamless user experience across all products and integrate products with each other.
View Results
My role and the team
The user-centered shift
I ran the whole design process, from planning to implementation. This included user research, designing the UX, UI, and the Design System. We were collaborating closely with the engineering and analytics teams and two Department Heads and CTO who looked after different areas. The team was located between London 🇬🇧, the United States 🇺🇸, and Mexico 🇲🇽.
Design ProcessResearch
We need to build an extensible design system for five products and support growth of products functionality. The design system also helped us be much more efficient when designing and implementing UI.
What we already haveFirst, I looked at what already exists in the Riglogix, and other services.
After analyzing the features and limitations of the products, and to consolidate our knowledge, I gathered everything in one space with the team: including a glossary, user stories, scenarios, and the minimal set of controls we need to design.
Also, I have collected user feedback through Client Service.
With the development team, we decided to use the Vuetify (UI Library on VueJS) to speed up the development process and hit the deadline.
The easiest way to provide a similar experience across all products is to place logically similar tools in the same areas in different products. So, I have designed the universal wirefram of layout for all products.
We started with redesigning the current RigLogix application, because we had a list of requirements from the data analysis team. I started to design prototypes for the Riglogix product using Vuetify components. Also, we waited for the new brand guidelines from an external branding agency.
The Atomic design fitted well with our structure, and it was clear to developers. We defined Vuetify components are atoms, and we configured atoms according to new brand guidelines. So, we built the draft of the Westwood Design System. It contains: Color coding for each product and charts, a set of atoms and molecules.
Having all of the above, I redesigned all necessary user scenarios and created new templates for common views. So, I filled the Design System with organisms and templates for specific scenarios and cases.
Following a user-centered approach, we ran user research throughout the process to understand our users and get feedback from them. Every week, the product team played back the Riglogix project to representants from each department. This way, everyone could be on the same page and key decisions could be made together.
A measurable impact
Further, following the rules of the design system (collected in the Storybook), I designed the new version of RigLogix App. Also, I took a part in designing SubseaLogix, PlatformLogix apps, as a result I filled all possible UX patterns to Design System. Later, another dev team used Westwood Design System to develop WindLogix, Global Land Rigs. They worked only with a data analysis team without adding anything to the design system.
- Reduced complaints related to confusion with the product up to 20%
- Shortered design and development time up to 30%
Learnings
The design system reacts to real user and product needs. You can’t just take an existing design system and apply it to your product.
If there is no design system in the product, then Atomic Design is what is easiest to explain to development and what is easiest to start with.