GF Piping Systems is one of the three divisions within Georg Fischer Corporation and a leading provider of plastic and metal piping systems with global market presence. GFPS was in the need of a microsite for the launch of their new Smart Actuator product.
UX and UI Designer
1 month
Adobe XD, Trusty pen and paper
I was tasked with designing a straightforward one-pager with all the basic information and benefits of the new product. I was working with the Product Owner and stakeholders as well as discussing the technical solutions with the developers during the whole design process.
Challenges
First solutions was to communicate the main benefits of the new product as well as their connection to the physical part of the Actuator. Next challenge was to show real-life screen recordings from the application on the connected smartphone.Third challenge was definitely to meet the conditions of the quite strict corporate design language of the company.
Initial data gathering
Since we were designing the microsite from scratch, we did not have any previous solution to test or start with. We received an assignment with the goals of the website and main information to be communicated.
We also interviewed the stakeholders to complete the given data and acquire more insights into the product. The workshop consisted of presentation of the product and information about targeted audience and current visitors of other products on the parent website.
Ideating and sketches
Once the available data were gathered we started with the first sketches which we shared with stakeholders after every increment. Communicating the feedback was a bit more difficult given that the client was based in another country and personal visit was not an option.
We were able to ideate and collaborate quickly due to the limited number of data we wanted to include in the microsite. We identified the main information we wanted to present the user and made them into the most information on the page to support the scannability of the site.
We designed the benefits of the product as the clickable interactive image with animated points that catch the attention and after clicking provide user with more information. To solve the second challenge we created a bold mockup of a smartphone in which we intended to play the real-life recordings of the application. We listed the tutorial videos into logical groups and allowed users to move through them freely.
UI
This time we felt comfortable with jumping from the paper sketches to the UI design directly thanks to the alignment of our ideas and goals of the stakeholders. We designed the website in accordance to the corporate Brand guide and incremented the design according to the feedback from the client.
Outcomes
We received very positive feedback to the site from the stakeholders as well as their target audience. We re-used the similar solutions on the several more project for the same client. We continue to monitor the solution, collect feedback and implement the necessary changes.
Learnings
This project was interesting because of the challenges of the strictly remote cooperation with the stakeholder as well as the restriction of the big corporate design system and its requirements.
I would definitely like to test the solution a bit more before the implementation and while the design was praised by the stakeholders and the users afterwards, there are still a few caveats that could be done better. I learned that even in cooperation with the big company, it is necessary to voice ideas and concerns about the design if there is sufficient evidence to back it up.