Back to work

 

Econans

Title:
UX and motion design

Brief:
Use animations to improve the user experience.

Programs used: 
Framer, XD, Figma, UserZoom Go

Me and a classmate, elin-larsson.com, teamed up with Econans for our degree project. Econans provides digital simulation and advice services for personal finance, and they needed help making their service more user friendly. After several interviews, user tests and research we, together with Econans, concluded that animations might be the key. So we made some adjustments and tested our prototype, and iterated and tested and tested and tested. Trust the process, right?
We started out testing different prototyping tools and decided to try out Framer, a relatively new tool developed to make more advanced prototypes. None of us had used it before and we soon realised we needed to switch our mindset from designers to developers in order to understand the program. We created two different versions of the service, one with animations and one without. We also had to make som small adjustments in the design to make it more intuitive when adding transitions. We then set up an A/B-test combined with an interview. All tests were done online with the help of UserZoom Go. The participants were devided in to the two groups using matching pairs.
We found that the group that got the version without the animations had more difficulties moving on from the first step. We argued that this is probably because the animations gave users a hint of the direction of the flow. The users in the animation group (A) also expressed the experience more positively than the ones that tested the version without animations (B). We also had a hypothesis that version A would be experienced as more complete, but the result was quite the opposite. We argued that this is probably due to the fact that the animations in Framer were lagging. The project taught me a lot about transitions and the importance of motion in UX.
designer [dɪˈzaɪ.nɚ] noun a person who imagines how something could be made and draws plans for it