May 24, 2018

Keys App 2.0

Challenge

To redesign an old mobile app that is used to grant users physical access to doors and cars. Basically, users click a button and the door opens. The problem was that the app was not easy-to-use, the design was out-dated and inconsistent.

My Role

As a UX designer in an agile self-organized product-development team of 8 competent developers, I helped my colleagues go through the UX methods we applied and supported them in the development process.

Technology

Platform – iOS, Android
Design – Photoshop, Illustrator, Balsamiq Mockups
Prototype (hi-fi) – React Native

Duration

3 months

Solution

  • I started with a competitive audit of the 7 biggest competitors of the Keys App. I analyzed their UI design, functionality scope, interaction design and UX – based on 10 Nielsen usability principles.
  • I made a UX workshop with the stakeholders (incl. employees from Marketing, Sales and Development team) – there were 6 people, the moderator of the workshop and me. The workshop was highly successful and I got a clear grasp of their needs and the whole idea behind the app. I got some insights about what they disliked in the current app and why. I gathered some ideas for improvements.
  • The workshop started with an expert review of the old version of the app, following the customer journey map – the stages users goes through and how the touch points with the app influence their mood.
  • I asked the stakeholders to describe their needs, and also to identify all the good, bad and questionable/confusing sides of the app. I requested that they provide ideas for new features they find helpful.
  • After the workshop I collected the feedback I gathered and used it as a starting point of the documentation together with the app requirements I was given.
  • I was working together with the product owner, we evaluated the suggested features and defined the scope of MVP, since we decided to follow that approach in the app development.
  • I chose to follow Material Design and created a blue color scheme for the app.
  • Then I came up with paper sketches and lo-fi wireframes, I created in Balsamiq Mockups.Wireframe likeabo Bozhana Ivanova mobile app
  • Then I created the UI design of all screens in Photoshop. I discussed them with the team and refined them. I was working with this amazing team of high qualified experts, so we tried to improve significantly not only the way app works, but also the technologies used for the development, the design, and of course the user experience. All the guys in the team are smart enough to create things that are simple for the users (which is not easy). Our improvements consist of providing users with possibility to open the door with single click, plus the design improvement that created the feeling of the use of a very clean and modern app.
  • I prepared an updated customer journey map. We shortened the customer journey focusing on improving customer mood before, during and after the usage of Keys app.
  • Together with the developers we prepared a hi-fi prototype for usability testing purposes (developed in React Native). We tested the app and defined some issues to be fixed later, e.g. splash screen and loading animations timing, reducing the number of screens, removing the unnecessary UI elements.
  • Having a FE background, I am familiar with the developmnet process, so I prepared all the files for the developers enabling them to proceed with their work.
  • Eventually, they came up with the MVP and we made a demo of the Keys App 2.0 for the whole company and some customers. We used the app to open the office front door, as well as some test locks and the employees personal lockers.
  • During the demo we collected positive feedback and some suggestions regarding features we could develop in future. Most of these features were already in our feature list in the documentation we prepared after the UX workshop.
  • Working with the team was great, because all teammates shared the same values and strived to work professionally and show their best, while they were helping others develop and grow. The results were obvious – an app that makes everyone’s life easier, a happy team serving happy customers.