Staff Mobile App: human resources and routine requests made simple
In 2019, I was designated to redesign the company internal app. The process was unusual since there was no squad for this particular project until most of the interfaces were designed. So, in the first stages of research, ideation and testing the prototype, I had to play the roles of UX Designer and Product Owner.
The product was a very solid app made and used for a long time by the company. Employees in general could make requests to their managers or to Human Resources, schedule days off, book personal flights, generate boarding passes, report operations and ethical issues, among other features.
Understanding the problem
Users had trouble finding a single feature among so many of them. These were some hypotheses of why it happened:
- The home screen was a vertical list of 15 items and many of them had many more sub-items when you clicked.
- Features were not organized by a specific criterion or hierarchy.
- There were features that not all staff members had access to, but they were displayed anyway for everyone.
- Some of the menu buttons would open a website outside the app because those features still had not been developed and incorporated into it.
- And finally, it was not up to date with the current look of the company. The orange was too bright and a little exhausting as a text background (there was no UX Designer on the team back then when it was first developed). Besides, the design did not convey the company's image and it was too far from the B2C app authenticity and friendliness.
This is how the home screen looked like before we started working on it:
Research and ideation
Documentation
First step was to document the entire app. There were even features I had no access to and it brought the need to talk to other departments who, as I found out, considered other features to be more important.
"As is" usability tests
Once I had the full understanding of the existing features and how they worked, I went on a mission to get the opinion of other staff members, by asking them to start and finish a task they used to do and share their difficulties. Then I was able to make a list of possible improvements that started to justify the idea of a redesign.
Architecture
An important step was to listen to the architect and developers who worked before on the app to understand if it was possible and/or recommended to change the front-end only, which led to the conclusion that rebuilding the app from scratch, updating its language, was the best approach.
Wireframes and Visual Concept
In order to present a solution to the stakeholders, I thought it would help if I could bring a presentation and already show them some ideas of visual concept for the home screen.
So I started by researching mobile applications that had a similar structure. Some of these references were: superapps like Grab and Rappi, bank apps like Itaú, airlines solutions like Delta and Emirates, and operating systems such as iOS and Windows 10.
The challenge was to understand the user as more than just an employee. For a company with more than 15k members, the end user was a mix of people of various ages and backgrounds, some from a different country, some very familiar with mobile apps and others with little experience in any kind of technology.
This research helped me get to initial structural drafts on paper, and then some interface ideas developed with Adobe XD, which I tried to make both attractive and friendly, also aligned with the company's identity and mission.
These were some of my first concepts:
Prototype and tests
Once the solution and the concept was approved, I listened to the stakeholders needs and designed a complete flowchart to start making a prototype in order to test the main flows with actual users.
The first prototype was very basic and went only up to a third level of the features mapped in the flowchart.
The goal was to validate whether the structure was easy to understand starting from homescreen or side menu, and to get to a model in which the user would arrive at the intended item in the shortest possible time.
During the usability tests, I tried to approach employees from the most different departments to obtain more reliable results.
You can access a high-fidelity prototype by clicking here, which was improved along the way and was helpful also to developers to understand the app’s design.
UI Solution
Interface design
By the time I had the users and stakeholders feedbacks, I worked to improve the design and the prototype, finally achieving the following customizable layout:
Users were able to choose the items they wanted to feature on their homescreen, as well as the background image. A side menu listed all the navigation, using icons to facilitate reading and grouping sub-items into 7 main categories.
To avoid confusion, functions the staff-member had no access to would not show up in the app, such as the ones designed for managers or crew-members only.
The inside action flows were kept as much similar as possible to the previous ones, so that users wouldn't have to learn a totally new workflow to get things done. But if there was an opportunity to simplify, I'do go for it since the app was meant for both heavy and light users.
One of the stakeholders needs was to use the app to improve corporate communication and encourage an exchange of experiences across the board. With that in mind, after validating the idea with my peers developers, I suggested 3 new features that would help facilite communication between employees from around the company, and also bring people together through simple profiles in which they could say a little bit about themselves and exchange travel experiences.
- A collaborative calendar for social meetings
2. A profile page for everyone
3. Easy search for colleagues profiles and their contact information
Development starts
The project was finally designated to a squad inside IT with 5 developers that had great experience in digital channels, some of them already worked on the previous version of the app.
In a couple of meetings, I was able to pass the project information to the assigned Product Owner, along with the documents, flowcharts and prototypes. I shared the interface design with the developers using Zeplin, which they agreed facilitates their work.
It was important to advise the team to come to me if they encounter any technical issues, during the development of the app, that could be resolved by a design adjustment to the interface or the action flow.
Impact
- New features: Since the solution was getting pretty solid, stakeholders solicited that some of the features that were not developed for mobile were now integrated into the new app. These are some of the new incorporated features I designed:
- Frequent updates: the updates are now released more regularly, for android and iOS, since adjustments are an important part of the process.
- Fewer calls to HR: users find it easy to download forms and documents from the app.
- Make requests anywhere: some actions that once required having a desktop around are now easily done by staff members on their mobile phones, especially those who work at the airport.
- Pandemic solutions: the app made it easy to access important documents during the pandemic, avoiding an overwhelming demand on HR.
And it continues to grow! If you have any questions, please leave your comments below or write to cam.reboucas@gmail.com.
Thank you!
See more of my UI portfolio at: https://camillareboucas.com/user-interface
