UX and UI Design with Front End Development

By Gabrielle Davenport, 29th September 2017

Today we’re looking back on a UX design and front end project we did with a company called Sirota.

Sirota are a HR consultancy firm who work with large, multi-national companies, advising on and building Employee Satisfaction surveys.

Sirota approached us back in 2016 to redesign their survey interface. The current system was out of date, meaning that building surveys was time consuming and difficult and taking surveys was clunky and awkward.

Our Process

Our UX Design team started by wireframing the whole application, planning a new look and feel. Our design team work closely with our front end development team, meaning that we aren’t just considering what will look good, it’ll work seamlessly as well. Once wireframes are approved, our designers start to increase the fidelity with colour, fonts and styling to take the design to the next level. Once designs were complete, the next step was implementation!

Sirota have an in-house backend development team but needed our front end development skills to help bring the new designs to life. Our Head of Development collaborated closely with Sirota’s CTO on the API to bridge our front end development with their backend development.

What We Did

Our biggest challenge was to create an interface that complied with the highest accessibility standards. Our development team built an application that supports multi-lingual functionality, including Chinese and Arabic. Furthermore, the app works with screen readers and browsers and devices from the last decade.

The existing interface was not optimised for mobile, so what we designed works seamlessly on a mobile phone. If users can complete the survey quickly and easily whilst on the go, we’re more likely to see a higher level of engagement.

Screen Shot 2017-09-29 at 10.50.07

On screen prompts and guidance were incorporated in our design to further increase user engagement. A % complete progress bar sits at the bottom of the screen to indicate how far through the survey the user is and green ticks appear with each valid response to a question and group of questions.

Screen Shot 2017-09-29 at 10.50.58

Complex logic was incorporated into the build to ensure that users complete the surveys accurately. When asked what time employees begin their morning commute, selecting a time at random will not be accepted:

Screen Shot 2017-09-29 at 10.51.22

The answer that an employee will give impacts the next questions they are asked: if a user says they ‘Strongly Disagree’ about as a response, they’ll then be asked to give more information as to why.

This work was undertaken as part of our UX agency based in London where you can find out more about our User Interface design and User Experience design work.