FEATURES TO IMPROVE BUSINESS PRODUCTIVITY
A mobile management service for companies
Client: Confidential company (Project B2B)
Role
UX/UI Designer
Timeline
06/2024 - 07/2024
Responsibilities
-
Creation with Design System
-
Sketch Wireframe high-fidelity
-
Architecture Information
-
Research to inspiration
-
Design decision
-
Collaboration with Design team
Training in trade
System for creating and recording training provided by companies offering the product .
Problem
the employees during the training they do in stores during the day, began to face difficulties when they arrived at the establishment and the team couldn't stop to watch, so during this time he visits other nearby stores to give the training, but he needs this training to be added to the day's training on the web platform, so she needs to call his supervisor to add it and so he can register his training in the mobile app, but contact with the supervisor is not always immediate, which takes time away from his productivity.
Create functionality to create a new training course in the mobile version, transforming the steps from the web version into new screens in the app.
Create new functionality
This is the space to introduce the Services section. Briefly describe the types of services offered and highlight any special benefits or features.
Indepence
To win time during the work routine ease of scheduling with more practical information to enter
Agile
No need for a computer to do new training
Functionality in mobile
Objetive
Information architecture
Construction of Information architecture by Web new training to understand the flow of pages and check which points are important to putt in mobile model or screens that can be removed to make it more agile.
Design Process
Sketch
Drafts of how to transform web screens into mobile screens showing the same information in the same way.
.png)
.png)
Collaboration With UX designer
Meeting with the UX Designer to understand the user's needs and how we could make it more accessible and practical for them to complete their tasks, and with this exchange we defined the information architecture of the mobile version.
We decided that only the schedule item would be developed in the mobile model, as this is where the main action required is, making it more practical for users and not taking away the manager's control of the other previous creations needed for the Schedule to be carried out.
Research and Inspiration
Research into other applications that use the same nomenclature for programming, old model archived to inspire ideas for building new screens.
Using existing screens with the structure of the design system to adjust with the necessary details.
Drawing
Draw idea with requested requirements, and refine the details of screen items and their flows to prepare for final delivery.
Using existing screens with the structure of the design system to adjust with the necessary details.
.png)
Design Decisions
Button Location
I decided to use the button in the bottom right-hand corner because Thumb Zone according to Steven Hoober, the region of the mobile device screen most comfortable for the thumb to touch.
Web flow
The first version of the design had the idea of reproducing the steps of the screens that existed in the web version so that users could familiarise themselves more quickly when they had their first contact with the mobile version.
.png)
The functionality of a training session is executed in web format
by a manager
Team receives the daily training sessions in the mobile app
on their cell phones
They can register in all the locations they will visit that day.
Mobile version
Developed the scheduling steps on the screens and the possibility of making more than one appointment at the same time, just like on the web.
.png)
Refine
When we refined the screen together with the UX designer, we came to the conclusion that this feature was being developed to reduce users' time in the field and that if they made a new appointment it would be quick to conclude their demand that had arisen without prior scheduling by their manager.
So I made new screens with a fast flow to meet users' short-time needs.
Making the mobile version functional in a different way to the web version.
Delivery
Draw idea with requested requirements, and refine the details of screen items and their flows to prepare for final delivery.
Using existing screens with the structure of the design system to adjust with the necessary details.
Typography
Used to typography Roboto with the existing specifications in the design system
Handoff
Documentation and detailing of the project to hand over to the developers describing the screens including important features and relevant information.
Icons
Selection Icons to use during the screens flow on the design system library .
Final Design Results
Reduce User time
60%
To conclude the task
Reduce the lack of registration
90%
of training that appear in middle of day
Creation of
+30
New screens in the project
Developed
3 languages
English / Spanish / Portuguese
Colors
Library used to developed new wireframes based on the design system.