Translating a complex web tool into an app
TL;DR I turned a piece of a complex web application into a mobile app and supported the launch.
Situation: For a long time users had requested that the system should be available on mobile as well. But when it was developed responsiveness had not been that big an issue and mobile layouts were also not considered. To change the whole system into a new layout was problematic because it was also built in very old technology that didn’t allow easy layout changes. So instead it was decided that we should rebuild the system as an app.
Goal: Build a mobile transport management app to allow users to work faster and more flexible.
My role: I was one of two UX designers who worked on the project with several involved development teams. I needed to create not only the concept but also mobile components that were in line with the web design system.
Approach
- Boil down the user group
- Introduce the team to the project
- Research the user group and ideate with the team
- Create rough concept and test prototype
- Refine and finish concept
Boil down the user group
Since it was clear to us that we could not rebuild the complete web application as an app we worked together with product management, to find out which parts were really needed and for which users. It turned out that of the many different user groups using the web application there was one that frequently needed to react to events at work outside of the office. And of those a special region was most affected because they sometimes either had no office at all or owned only a phone and not PC. So we focused on the needs of small carrier companies in southeast asia.
Workshop with the team
We kicked off the project with a workshop with our core development team as well as some specialists within the company. We set a goal together, analyzed the current tool and where we needed to go with the new app and created a proto-persona.
Research and ideation
For research we launched a questionnaire to our target group about their phone and app usage as well as the most important data and features in the current system. After refining the persona and user journey we presented our results to the team. By now we had a pretty clear view on the most important features and capabilities of our future app, so we started into an ideation workshop with our team to develop as many ideas as possible and include everyone into the project.
Concept and user tests
After this we dived into the rough concept and created a structure for the app. We removed some features, including ideas of the team until we had a workable prototype for the basic actions inside the app.
With this prototype we started a series of user tests and interviews with users from our target group. Since they were mostly people from small companies in southeast asia this was a real challenge. We could not get too close to our target group because interviewing and remote testing meant they needed at least a laptop with stable internet. There was also a language barrier and more than once we had colleagues or superiors of our users translate for us, which did not help the quality of the data we gathered. What worked well at least was observing how the users interacted with the prototype, from which we got many valuable insights. It turned out, for example, that we had hidden the main action behind a swipe gesture that was not familiar to users, so we changed the gesture and also added a more visible way to perform the action in a details view.
Refine and finish concept
From this we started into the full concept for the app. Now working against the clock because development had already started we needed on the one hand to refine what we had and add a proper design to it and on the other hand create all the mobile components we needed from scratch. At this point in the project we had a workable design system but it was only valid for web projects, so we had at least the fundamentals like valid colors, fonts and styles.
My work in this
In this project I shared the work with one other designer so both of us had to do all of the tasks or at least work in tandem on them.
In the research phase I wrote survey and interview questions and also facilitated some of the user tests and interviews. I planned team workshops and conducted them together with my colleague.
In the early concept phase I focused mostly on interactions, flows and components while holding back on design. Later I joined my colleague in design work, interaction design and animation.
Final result
After a short beta phase the app was launched with the first minimum set of necessary features. Though there was little feedback we had cut some really important features before and hurried to add them to the app.
Learnings
In this project I was rather happy with the amount of research we managed to do before time ran short. I practiced my skills of question writing, interviewing and facilitating a user test and managed to get some really helpful insights for the concept of the app. It turns out however that even the best research does not survive contact with reality. The user group who is using the app now is completely different from what we had expected. Instead of small carriers from southeast asia the bulk of the users comes from eastern europe and russia. Somewhere the communication went wrong and I can just hope that this other user group we did not focus on will find the app workable as well.