Case Study — Landys+Gyr

Interaction Design: Paper Prototype // Lab Study // Personas // Workshops // Wireframes // Mockups

Our Client was looking to build a versatile extranet where existing and potential clients as well as service technicians on site could access their product catalogue, documentation, training and collaboration workspaces.
What looked like a simple task in the beginning turned out to be way more complex due to very different persona requirements.

Assignment

Landis+Gyr is the global industry leader in metering solutions for electricity, gas, heat/cold and water and a pioneer in the field of smart grids. They tasked us with developing a concept for an extranet where their clients can collaborate and exchange documents in workspaces, access the product catalogue and get further information or software updates. Our goal with the UX Study was to create a basic understanding of how the extranet would flow and what areas needed further investigation during the actual project. The UX time budget was roughly a week.

Kick Off Workshop

The first workshop was used to understanding the client’s needs, map out what content the extranet would have and create the user stories. Also in this first day we created about a dozen personas and prioritized them for release one. At some point it got very clear that this extranet will include a lot more roles than the client had expected and that it would be a complex task to create platform that meets these very divergent requirements and is easy to use.

Basic Mockups

Early on I created some very basic mockups. They acted more as a discussion starter in the second workshop than an actual deliverable and proved to be very helpful as the client could visualize and understand how screen estate is managed. The wireframes below show a layout concept for the workspaces.

On the left you can see the first attempt at role based content as it would show different actions to internal or external users.
The right side shows the home page of a single workspace and its overview page — nothing too spectacular there except for the short introductory video on how to use workspaces. This level of on boarding is actually quite rare on intranets.

Paper Prototype

After the content map was sorted out and the wireframes where done I created a paper prototype. It consisted of roughly 20 screens, each with its own various bits and pieces that could be altered using post-it notes. Between each participant we discussed the findings and iterated on parts of the prototype.

I acted as the computer changing the paper screen in front of the user while the rest of the team was observing and taking notes.

Role Based Navigation

The personas where split into two groups with fundamentally different requirements regarding how they use products. On one side there where personas that had access to a lot of the products (100+) and would use a wide number of them in their daily work. A typical role for this persona would be an internal project manager or a sales manager.

On the other hand there are a lot of users who only have access to a limited amount of products (10 to 30). Out of those only a subset would be relevant to them on a daily basis. This holds true for technical support staff maintaining the products on site.

I created a mockup of a personalized mega menu showing different quick access lists depending on the users’ needs.

Role based mockups for the mega menu showing different quick access lists for internal or external users.

Responsive Design

On the desktop (left) the highest priority personas are equally interested in the product information itself (column one and two) as in the related content like spec files or related software. As a result screen estate is evenly shared.

The two layouts show how the second column containing the product description gets a lot more space on the desktop (left) then on the mobile page (right).

On the mobile view (right) the product information (#2) is collapsed to only a couple of lines of teaser text because that information isn’t as relevant to the highest priority mobile users (the technical staff on site). Progressive disclosure is used for the description as well as the additional resources.

These are critical gas and electricity items it is important the user working on them select the right manuals and spec sheets. By only showing the product name, product number and images above the fold it is more likely the users visually confirms that the physical product he or she is currently working on match. We could have rearranged the additional resources on mobiles show above the fold, but forcing the user to scroll slows them down enough to actually read the title and have a look at the image before opening a manual.

Conclusion

I’ve seen this on several occasions that a UX study was thought to be a quick validation of a concept or wireframe but instead surfaced deeper challenges and required more research to be solved. In my opinion field or lab studies should be a part of every requirements engineering process.

It was great working with Tim as he supported Landis+Gyr realize an engaging collaboration platform on our Extranet. The Extranet along with the Landis+Gyr Intranet have subsequently become award winning projects in 2015. Tim introduced interactive methods in helping us realize the platform with enhanced UX. This was through working with paper prototypes among other artefacts.

Fungai Alexander Mapondera on Extranet Project
Global Digital Communications Manager at Landis+Gyr AG

Liked this? Hire me

Are you looking for a creative mind to complement your team?
I’m a full-stack freelance interaction designer. I do everything from UX strategy and consulting, research, ideation workshops, concept, guidelines and wireflows to visual design. Currently based in Switzerland, I’m more than happy to travel with my family for an assignment or work from remote. You can find my complete Portfolio over at www.timschoch.com or contact me via LinkedIn and Xing.


On a side note: If you’re new to UX or would like to learn more about the topic, check out my first ever online tutorial: