Prototyping UX for multiple audiences: Scytl case study
Prototyping interactive user experiences at eGovernance and online voting org, Scytl
As UX team lead and Product Owner at Scytl, a leading organization in secure election management, Judit Casacuberta Bagó is in charge of creating and optimizing the user experience for both her external clients and internal teams.
We caught up with her to hear how she has been using Justinmind to create basic, static wireframes and complex, fully functional prototypes to create such different experiences.
User experience from the ground up
Judit has been a user experience and user interface practitioner for almost 10 years. She has worked as a UX designer, consultant, researcher, contributor, professor and team lead. She started out studying Multimedia at university in Spain, but soon discovered her passion for UX.
For Judit, UX is the art and science of making everyone’s lives easier – from identifying real user needs to conceptualizing potential solutions that align with those needs and making sure they work. As UX team lead at Scytl, the strategy she has coined is 100% user-centric, with research and user testing taking the lead in all of her projects.
Bring ideas to life through prototyping
Judit describes prototyping as a way of narrating a story and bringing her ideas to life. She started using Justinmind 8 years ago when studying her Human Computer Interaction Masters, using the tool to capture requirements and validate them with users.
Judit’s role at Scytl involves improving the performance and visual design of the company’s prototypes, following its basic visual guidelines. Her deliverables include functional specifications, site maps, and flows the form of wireframes and interactive prototypes, made with Justinmind.
“Justinmind is my number one design solution for creating wireframes and prototypes!”
Interactive prototyping to validate the user journey
Prototyping comes into Judit’s projects from early on in the design process. She starts off by creating static website wireframes that help her ideate concepts and propose potential solutions to user problems.
Once Judit and her team have decided on an initial workflow – which they map out with her wireframes – she moves on to creating functional prototypes. Justinmind’s interactive features allow her to try and test out new functionalities and define new features.
She uses the Events system to create complex interactions that help her recreate a real workflow. This also allows the team to evaluate the impact of each touch point on the entire product.
How UX Designers can use prototypes for external stakeholder accounts
At Scytl, Judit splits her time between external stakeholder-specific and internal updates projects. As a UX Designer, she typically worked on external eGovernance accounts. This required research into each client, as well as including them in the feedback and iteration portion of the design process.
Discovery phase: deep research
When Judit’s working on a new project for an external client, she starts off with a conceptualization phase. She and the clients identify and gather business requirements for the new application, based on profiles of customers, target verticals, and the different markets.
Then, she documents all specifications goals outlined by the project stakeholders. Once the requirements are captured, she creates some basic sketches of the main application screens.
From paper to prototype
The sketches are translated from paper to screen as interactive web or mobile prototypes. These help the team and client get a better idea of the look and feel of the requirements in real time. It’s an important step in identifying the visual and functional characteristics of each client’s business requirements.
The prototype is then validated and the requirements prioritized by the client in a co-design session. The team exports the prototype to HTML. Then, Judit will take the client through the principal workflows, target users and functionality defined in the requirements documentation.
This includes how an election could be set up and how voter data can be imported, using real data within Justinmind.
Client feedback
The clients are able to contribute their feedback and their changes are made through iterative cycles. It’s easy to make these changes in Justinmind with the use of templates and masters – make small changes and spread them across prototype screens or multiple prototypes in just a few clicks.
User research and constant testing
User testing is run throughout the prototyping phase. Usually it’s qualitative testing with Morae, focused on the users’ verbal “think aloud” commentary. This helps them to get valuable feedback and understand why the user is performing certain actions.
User testing is performed with published html prototypes either in user testing labs, or with online tools. These tests help the team to create iterations of the prototypes before moving forward with development.
Delivering the project to development
The next step for Judit’s team is to create a PSD guideline with the final assets before the HTML template is developed and the final app delivered. The HTML export allows Judit to create deliverables that developers can easily follow to implement the interaction in the end product/application.
How UX Leads can use prototypes for internal updates projects
When Judit works on product development projects as UX Lead, she and her team are usually working on product/app/website improvements. These updates are typically for in-house projects and involve updates to their UX assets and user interfaces.
Generating UX assets
The team creates their own UX libraries, with custom UI assets, in Justinmind. These include interactive Scytl elements and icons. Justinmind’s UI drag and drop feature makes it easy for the team to quickly prototype a new product or a new functionality by simply dragging the elements to the canvas.
Being able to create their own assets means it’s easy to maintain standardization across departments and company levels when updates are needed, as well as cultivate brand awareness across the organization.
Creating the UI layout
Next, the team creates a one page guideline with all of the basic elements on display. This allows them to define the visual design of the product/application.
The UX elements defined in Justinmind are then developed as objects in Front-end Libraries (HTML, CSS, JS), allowing the developers to use them to quickly adapt the look and feel according Scytl’s visual guidelines.
Designing for different audiences: the takeaway
The secret to juggling internal and external projects and designing for different target users is having a deep understanding of your audience and goals. Only then can you really produce solutions that stick.
A great way to design for a specific objective and/or user group is with an interactive prototyping tool. Create multiple screens, add templates and styles to centralize your UI assets around client features and simulate your prototype across different devices or browsers – all within the same tool.
Then, you test your solution with real users in real time to see how effective it will be when you launch the final product. Download Justinmind now and prototype solutions for your specific user groups.
Want to be featured in a Justinmind case study? Get in touch via our Twitter handle now!