Case Oppex: making public procurement sexy.
Public procurement means the procurement of goods and services on behalf of a public authority, such as a government agency. Sounds boring and a lot of work? Most of times it can be, but it doesn’t have to be. The interesting fact is that the governments are buying everything from basketball courts to swords — and there are procurements for those.
Let there be light
Whereas many of the the consumer targeted digital services have delivered user-friendly digital products in a design-driven manner, some of the b2b services are lagging behind. Many excuses has been used not to practice design thinking:
The users just need the information to do the job, they don’t need design
These services are only used with a desktop computer
The service doesn’t have to look good, it is someone’s job to use the site
This is not sexy business.
The very same arguments have been used for consumer electronics, say computers. It would have been quite a brave statement in the 1960s to say that industrial design would be a major selling point for computers sold in the future.
Despite the purpose or industry of a service, people are using it. That’s why the same design principles apply to b2b services, even if they are public procurement search engines. It is just the matter of who wants to design the best service for that particular industry.
The Starting point
In September 2015, we started the redesign of oppex.com with multi-talented team of marketers, engineers and designers. Oppex is the World’s largest search engine for public tenders covering over 1.5 million notices annually.
The site was already live, but it needed redesign — the visual language was cluttered, the mobile optimisation needed improvement and users kept asking for functionalities that were already implemented in the UI, they just couldn’t find them.
Old oppex.com front page
The initial goals were:
To redesign the search UI and make it visually appealing
To improve mobile usability
To make search more user-friendly and make advanced search filters easier to discover
Renew the whole tech stack to make new functionalities available (like instant search) and to speed up development cycles
To apply design to an unexpected place — an industry, where the design standards were much lower compared to cutting-edge b2c services
Making an impact inside
I was hired as in-house Lead Designer — this was exciting, because it guaranteed the luxury of making long-term design decisions, thorough planning and straightforward communication with the other team members. While the tools for making web products have become better, the demands have also grown and the services have become more complicated to design and code because of the need for serving users with different platforms and devices. While making excellent web products requires always that extra-mile with design details and testing, it had become really challenging to deliver cutting-edge work in agency environment or as a temporary hired gun. Long gone are the days where a design agency would drop a one-size-fits-all desktop UI for developers to implement.
Baby steps
The first step was to change the design identity of the whole team — it was no more about “them companies with design”, we could do it as well. And even better. Today. The key was to collectively realise, that there are no limits when it comes to design — no matter what is the industry. It’s rather a decision: is design really prioritised or not. To increase the design awareness I ran some optional design workshops targeted for all employees. The best way to learn and understand design is to try to do it yourself… and also have some fun on the side. I think the key realisation of those workshops was that design is a job and gets better when you put more hours to it.
The second step was to make design as transparent as possible — delivering non-finished mockups constantly in Slack, asking opinions from everybody (not just people working directly with the feature) and encouraging developers and product managers to do their own designs and wireframes. It is much easier to react and give feedback on designs, when you’re involved in the process from the start and can understand the problem-space better.
The third and the most challenging step was to come up with a design process. A.k.a come up with a workflow among product managers, designers and developers as smooth as possible to deliver quality product in time. There’s a lot of advice and blog posts about the subject online, but it is another thing to execute it in an organisation you have just joined. Luckily, we didn’t have a burden of ‘how things had been done before’, because we had a relatively young team with several new hires. Also, the founders supported and encouraged us to use the best and latest ways of working, whether it came to tools or workflow.
Connecting the teams
Connecting design with product team was relatively easy. UX-wise it was a very good situation for design, where product team collected a lot of data about user behaviour and had an ongoing discussion with the customers. The dialogue was further deepened after we made a one-week field trip to our main target market in UK to interview users about their needs in the field of public procurement. The key was the dialogue between product team, clients and design team and understanding the priorities and concerns each groups had. The biggest challenge was to match the energy of the business team with the design resources.
Connecting design and tech was expected to be trickier. Since I had experience both in front-end development and design, I had variety of choices to close the gap between design and development. When the design is in mockup or concept level, it doesn’t really matter which tools you are using. Once you start the software development, closing the gap is essential.
First, I delivered Illustrator files and tried to train developers to implement the first rounds of designs based on those. This did not work at all. Although the designs weren’t that complicated and the interactions could be explained easily, the development team just didn’t feel home in Illustrator world.
Secondly, I added the high-level HTML prototypes to the workflow. The quality was improved a bit and the interactions were now clearly explained in the prototype. Still, the functionalities were added slowly to the development environment and they weren’t implemented in the right way. It got me thinking — while there’s an ongoing discussion how designers should learn to code, it might be better idea to improve communication between teams, developers learn to design principles or designers to study business, so a team could design the right things in the first place, if the implementation is going to be painful anyway.
If designer has some unicorn qualities, it doesn’t mean that the design-development gap is closed and all the problems will be solved. It just means that designer is going to spend more time in code editor, not talking to the customers. This can lead to a situation where wrong things are developed and time is wasted. Also, a versatile designer can create brand new problems that you didn’t even know to exist.
Instead, the communication between teams should be increased. And yes, developers can do some design, designers can do some code and product managers can do some design. But primarily people should do the things that they shine on.
Thirdly, we made the only right choice as a team — increased communication between design and development, discussed the pain points and got to work. This meant creating a living modular style guide together, agreeing on grid system, making a playground for designers in react environment to avoid coding the interface twice and sitting next to each other when making design and development decisions. Whoever was capable of doing a task did it despite the title in the business card. This was improved week by week and a newly joined experienced scrum master made it happen even faster.
Design is a job in a many different ways.
Iteration, iteration…
When the first development version was up and running, the iteration rounds started to make the app better each week. Making a web app mobile-friendly affects the whole development and design process a lot. Although the mobile usage is nowadays taken as granted, in our case 80% of the traffic was from the desktop computers for a reason.
A typical user would browse the notice in the office during the working hours. However, users land to the service from different devices while reading email alerts, SEO likes mobile and it is important marketing-wise to make the site accessible, despite the situation people are using it. We decided that the service could be showcased even if it would be a random guy in a bar with a mobile phone.
Making a web app look like it’s mobile-friendly vs. making it really mobile-friendly is a completely different thing. The first will just need an instalment of a grid system and the latter thorough testing with different devices and tweaking of UI components. This requires determination and consistency from both design and development. On the bright side, mobile helps to cut extra features and concentrate on the essentials.
The new tech stack (reactJS in front-end) allowed us to make the features better and instant — the tech didn’t have to limit what we could do and what not. Although there was a lot to learn in the beginning, the development cycles have been constantly become shorter, thanks to the right technology, better team work and better planning.
On the visual side, we decided to go for world-class illustrations instead of settling on the current standards of the industry or competitors.
Making public procurement sexy
The redesign was launched 5 months after the design phase started, although the work of course always continues in the world of software development. We were committed to raise the bar in a field not done before.
The new oppex.com front page.
As a team, we succeeded to apply design to an unexpected place, you can witness that by googling the subject. This was done by setting the bar high enough and connecting business, design and developer teams. The work has just started, we will continue to raise the bar in this field, whether it is about doing business, improving the user experience or visual appeal.
The site is live here: oppex.com.
About me:
Twitter: pastorator Website: pekkahartikainen.fi