The Product
Webgains is an advanced affiliate marketing platform that connects brands with top-performing affiliates to drive growth. Offering comprehensive tracking, reporting, and optimization tools, Webgains helps businesses maximize their ROI, streamline campaigns, and expand reach. With a focus on performance and transparency, it ensures effective, data-driven marketing strategies.
Challenge
- Simplify the extensive range of tools on the browser-based platform while updating the overall design aesthetic to enhance user experience. The design solution must be optimized for both desktop and tablet devices, catering to various use case scenarios.
My role
• Site auditing
• Information architecture
• Competitor analysis
• User and business stakeholder interviews
• Personas creation
• Requirements gathering
• Design workshops facilitation
• Presentations
• Concept design
• UI design
• Visual design
• Style guide creation
• Wireframing
• User testing
• Report writing
• Design specification
Results
- The new affiliate section of the platform was successfully released and well received by affiliates. Further to this, it helped change the perception of the Webgains leading to a branding overhaul.
Empathize
- Research
- The first thing I did was to carry out a software audit in order to obtain a clearer understanding of the scope of the project and how to go about tackling re-designing the platform.
Next, I carried out competitor analysis to benchmark where Webgains stood in regards to its competitors and establish where they wanted to be in future.
Empathize
- User interviews
- After this, I helped arrange for 8 individual affiliates (from various sized companies ) to attend our offices for user observation. In these sessions a series of tasks was set out for the participants to carry out, at the end of which they were given a short questionnaire to complete. Using contextual enquiry (video recorded for later analysis) we were able to collate the main user requirements and move forward to prioritisation.
At this stage I also gathered business requirements from major stakeholders in the company.
Empathize
Persona creation
Next I created several Personas from the user research findings which were used at various points throughout the process.
Define
- Information architecture
- After prioritising the requirements, I helped co-run various brainstorming and proxy requirement gathering sessions – the latter being necessary as affiliates' time is hard to get and so we needed to give ourselves a more rounded picture of all potential use cases of the platform.
Our team defined functional requirements which informed Information Architecture decisions and navigational concepts.
Ideate
- Idea generation/sketching
- The next step was to sketch some ideas on how the dashboard (as a starting point) might work and appear and what its level of flexibility and customisation might be. A business decision had been made stipulating that the dashboard be built and tested before the rest of the project could proceed.
For the other various sections of the affiliate platform I put forward a design solution incorporating a set of filters that would be ever-present but contextually adjusted eg for reports or voucher codes.
Other sketches include various ideas for dashboard widgets e.g. Program performance, social media news feed.
These sketches were presented and iterated upon before moving forward to wireframing and creating specifications. In this project there was no budget or potential for prototyping or user testing.
Ideate & development
- Wireframing & design specification
- From the sketches I was able to move forward and create annotated wireframes and design specification documents for each section of the platform (according to the new navigation).
- These wireframes were already possible at a relatively high level of fidelity due to the agreed use of a bootstrap UI. This was necessary in order to prioritise limited resources.
- Most attention was required on the actual IA and UI but with only myself covering both UX and visual design, a compromise was necessary.
Ideate & Development
- Visual design layouts
- To accompany the design specification documents, I created several pixel perfect screens for the major screen templates. We then developed a CSS framework style guide to minimise the number of visual design screens and help speed up development of an already lengthy project (that saw 2 changes of product owner/project managers).
Outcome
After development, a round of beta testing followed with the internal service team and then full release to affiliates. This was a big help for them in streamlining their use of the once bulky platform.
During the project we were also required to design and develop co-branded pages for major clients.
Tools used
- Pen & paper, Video camera, InDesign, Photoshop, Illustrator, Excel, Word, whiteboards, markers & post-its.