Project calculations
Project calculations
Project calculations
Experience
---- Project Calculations ----
---- Project Calculations ----
---- Project Calculations ----
---- Project Calculations ----
---- Project Assist the Officer ----
CGI - governmental organization
A mobile app which helps the officers perform all of their tasks in one place. No more paperwork and not 5+ apps for this, but just one.
My role
-
UX design
-
User research
-
Usability testing
-
UX and design research
UX products
-
Research
-
Job stories
-
Taskflows/ wireflows
-
Wireframes
-
Prototypes
-
Workshops
-
User tests
-
Digital writings
-
...much more
*Disclaimer: due to the non-disclosure agreement with the company, I am limited in the work and information I can share. That is why I have given this project a fictional name and only show some sketches.
About the project
During my time at CGI I worked as a UX consultant. The client for my main assignment was a governmental organization. The users are officers who work in the field.
We were developing a mobile app.
Before the officers had several mobile apps and separate paperwork for each different task. The goal of this new mobile app is to combine everything in one app, this way the user has one place to do his tasks. Another advantage is that this saves time, and for this target group time is of the essence.
Because this mobile app and everything related is strictly confidential, I cannot share too much. I will share some of the highlights.
-
The user has a very set order of tasks. Adjusting the flow of this could confuse the user and result in taking up a lot more time than necessary.
-
The user doesn’t want to spend much time on a device to finish a task. They want to get back to work as soon as possible.
-
There should be a dark mode available, but we have to take the company colors into account.
-
This app will mostly be used outside, so we have to take into account that they might wear gloves while using the app or that the network might be bad sometimes.
Challenges
My role
UX designer and User researcher
The team has an Agile way of working, we work with SCRUM. The project was already ongoing for a couple of weeks when I joined. Together with the UI designer and another UX designer we formed a smaller team within the team, and we were responsible for everything related to UX/UI within this project. I work closely with the Product owner (PO), but because it is an improvement of the native app different stakeholders decide what the business/client needs. Which job stories we pick up is based on this, however, there is some room for prioritization since I work at least 2 sprints ahead of the team. So I also have a say in what is important to pick up right away and what can wait. After this is decided, I start the UX work and have regular contact with the PO, stakeholders and developers. I keep collecting feedback and iterating until goals are met. Which means technical feasibility, business goals of ORTEC, business goals of the client but most importantly user needs and usability.
Important part of my role is to focus on how to improve the existing functionalities. I have to research what is best, for this I have conducted user research and several user/usability tests.
Process
Pick up tasks/planning
(user) Research
Design concepts
Feasibility check (tech)& User test
Demo &
Retrospective
-
Each team picks up tasks from the team backlog.
-
Plan what UX is going to do during the sprint. I work a couple sprints ahead of the team.
-
Plan what UX work is needed for the tasks the team picked up for the current sprint.
-
Plan and make an estimation how much time and work the tasks will take.
-
Talk to developers to discuss technical boundaries, so this can be kept in mind while designing.
-
Define and refine scenario's
-
User research, user interviews, observations, survey's.
-
Process findings of all the research mentioned above.
-
Brainstorm sessions.
-
Make sketches.
-
Make design, wireframes and visuals
-
Prepare usability test
-
User test if possible, if so, make a (interactive) prototype.
-
Validate with lead developer if the designs and flows (=UX/UI) is technically feasible.
-
Discuss alternatives if there are challenges or difficulties.
-
Discuss how to handle everything that is not feasible, either we do this in later sprint or the UX/UI needs to be adjusted.
-
Process the user/usability test result.
-
Discuss the findings with the relevant stakeholders.
-
Finalize the UX/UI.
-
During development the team always has some questions regarding UX. We solve this on the spot, or within a fast time frame, so the sprint goals can still be met.
-
Always keep up-to-date with what the developers are doing to tackle issues of they occur.
-
All the teams give a demo of what they've made to the rest of the departement.
-
Gather feedback and note the improvements down in the backlog.
-
Sprint retrospective.
-
Usability testing
-
UX and design research
-
Wireframes and flows
-
Usability testing
-
UX/UI best practices
-
UI design
-
User research
-
Test script
-
Test scenario's
-
User interviews
-
Observing during user test
-
...much more!
Tools and methods
Findings and solutions
Challenge:
The user has a very set order of tasks. Adjusting the flow of this could confuse the user and result in taking up a lot more time than necessary.
Solution
The process the user has to start in order to finish certain tasks can be complicated and lengthy. We decided to split these tasks into smaller steps, but big enough to avoid too many steps. After a usability test we found out that they like this, but we should use the terms they are used to. We made sure the process was simplified with smaller steps, but kept it recognizable and familiar for the user.
Jakob’s law, Hick’s law, Miller’s law, Postel’s law
Challenge:
The user doesn’t want to spend much time on a device to finish a task. They want to get back to work as soon as possible.
Solution:
The user doesn’t always have time to finish their tasks on the spot. They should be able to finish it time. But they should enter the relevant information.
What we did was only make the necessary fields required and the rest doesn’t get a label. They should be finished at some point, so they aren’t optional either. So we decided to give the user an process bar so they know where they are in the process and also show their unfinished tasks in a separate tab. This tab is visual on the home page with an indication of the number of unfinished tasks. When they click on this tab they see a list with the unfinished tasks and can continue with the process whenever they desire.
This way we don’t put pressure on the user and also keep them up to date of the status of tasks. It also saves time, which is very important to them.
Zeigarnik effect, Postel’s law
These are the high level designs I made for the two challenges mentioned above. I cannot share any of the original visuals, so I made a very simple sketch with the sole purpose to visualize the solutions and flow.
Challenge:
There should be a dark mode available, but we have to take the company colors into account.
Solutions:
We had our own design system with the colors of the organization. The organization colors for the “light mode” were mostly blueish but combined with a lot of white. The organization really wanted that we stayed within their color scheme, and that got a bit difficult. Difficult because we cannot use white or other bright colors and we still want the app to look nice. So we decided to invert our whole design system for the dark mode. Every color we had in the light mode got a dark counterpart. This way the app was usable in the dark, looked nice and was still according to organization color scheme.
Jakob’s law, similarity and consistency
Challenge:
This app will mostly be used outside, so we have to take into account that they might wear gloves while using the app or that the network might be bad sometimes.
Solution touch targets (gloves):
Since the touch targets should be large enough for the user to see and click on, we made a dashboard/homepage with blocks that functions as a tab for a certain entity. Behind this tab/entity the user can either find information or perform tasks. We tested this with the user and they found this a very clear homepage, they preferred this to a list, which was also an option. The touch targets were also large enough.
Solution bad network:
Bad or no network at all, that is something we all have had to deal with at some point. However, this user cannot afford for the network to be down. He can lose all the work he has done in the app and that can have influence on different parties involved. That is why the data has to be saved even though the network is down, this is all solved in the back-end. The UI keeps the user informed of the network status as well. We don’t want to alert the user too much, since this can be a distraction. What we decided to do was show a message in the top, similar like Netflix does in a bar. It isn’t in your face, but still prominent enough to not miss. We tested this and the regular dialog message with the user, and they preferred the option with the top bar.
When the network is back on, the bar changes color so the user is being updated of the status at all times.
Jakob’s law, Miller’s law, Fitt’s law, periodicity, consistency and proximity
These are the high level designs I made for the two challenges mentioned above. I cannot share any of the original visuals, so I made a very simple sketch with the sole purpose to visualize the solutions and flow.
Highlights at CGI
I enjoyed the usability test sessions in the usability truck the most.
I learned so much about the user and user research, my colleague was an expert with 15+ experience and he was a good teacher and helped me grow. My interest for user research and usability testing grew even more. The way users interacted with our designs was informative and also helped me understand it better and improve in conducting user/usability tests.
Being part of such a big department and team with a common goals was very interesting and nice.
The organization deals with social issues and society as its whole, that’s their focus. The officers work very hard and do important work. It was very rewarding to be a part of this and give back a little as well. It is a nice feeling to contribute to this.