Bolívar Conmigo
Overview: Since COVID-19, people began to develop health and psychological issues due to isolation and lack of activity, for that reason Seguros Bolívar created "Bolívar Conmigo", an application that will track the daily activities, will create groups of people for participating in real life challenges and will give a full time coach that will help them to create better habits as drinking water, doing some exercise, reduce the consume of coffee etc.
Length of project: 8 Months.
Rol: UI/UX Designer.
Company Name: Seguros Bolívar.
Story: I took this project from zero, and the company said this was my "baby project" because I created the components, the visuals and improved the wireframes and prototypes. I was working on this project parallel to "Acceso Clientes" so I had to take care both of them, their UI, UX, testing and improves at the same time, also how I was the first Designer, I was training the new ones and finally delegating some parts of the application and taking care that keep the same visual and style of Seguros Bolívar.
My team was composed of 3 UI designers, 2 UX, our UI/UX specialist, product owner, developer team, scrum master and other stakeholders that gave us their opinions and interviews for improving our end product.
Research
Research: We based Bolívar Conmigo in "Dacadoo" a pretty famous Switzerland application, however, we needed to analyse more competence, their functions, what do they give to the users, and how they can help in the dailies activities of the people, so we did a good research about Google Fit, Samsung Health and Huawei Health.
Planning: Behind the design team, were other important roles that had to be in constant communication with us, part of the Scrum process was planning, we did a lot of meetings to know how we would work, what we would do, and the times for the prioritization of each release.
Planning: Behind the design team, were other important roles that had to be in constant communication with us, part of the Scrum process was planning, we did a lot of meetings to know how we would work, what we would do, and the times for the prioritization of each release
Wireframing: Our UX team did an approach of the first wireframes, however after testing they were evolving and my job was creating the end visuals so after a couple of iterations, these were the results:
Components: Before creating the prototypes, we started to design the visual components of the App, how they would look? the colors, fonts, icons, treatment of photography, etc, these are some of them:
Mockups: Once we knew how we wanted the look and feel of the app, and having the wireframes and UX defined, we proceeded to create the final prototypes and make them functionals, these were some of the screens, however they were hundred and most of them were connected for testing with more users.
Screens: At the end of the production there were a lot of screens, we had to be very organized when we showed them to our stakeholders, all the prototypes were connected and we opted to label them for making the exploration easy for the new members in the team.
Downloads: Currently you can check the App here it has more than 5.000 Downloads and currently is adding new functions that will improve the quality of life of a lot of people.
Learning
The hardest part: Working with a lot of stakeholders (I think there were at least 45-50 people involved), this is hard because the UX/UI has to be approved for all of them, so we definitely used a lot of time iterating.
The best part: Working with Agile methodology, this makes work times fair and appropriate, I had space for taking some courses, growing in the area, learning more about UI/UX, and exploring. I loved this.
Universidad Paraíso
Overview: UP is a Eroge type Visual Novel that tells the story of a guy who does not remember anything of himself so he has to start from 0 in a world surrounded by beautiful girls. This Video Game is being designed for Web and Mobile and it was launched in 2014 having around 22.000 players. The team is still working on it but we are expecting to have a public version by April of 2022.
Length of project: 1.5 Years.
Rol: CEO, Lead UI/UX Designer, Writer.
Company Name: Jarvi Games.
The Idea: In my university days, the idea for this project was born, fueled by my passion for gaming. Teaming up with colleagues, we created a game that gained popularity over a year. Due to limited experience, we put it on hold to pursue other opportunities. Now, years later, I've decided to resurrect it in a startup with the goal of reaching over 50,000 players by April.
Discovery
Overview: UP is a Eroge type Visual Novel that tells the story of a guy who does not remember anything of himself so he has to start from 0 in a world surrounded by beautiful girls. This Video Game is being designed for Web and Mobile and it was launched in 2014 having around 22.000 players. The team is still working on it but we are expecting to have a public version by April of 2022.
Length of project: 1.5 Years.
Rol: CEO, Lead UI/UX Designer, Writer.
Company Name: Jarvi Games.
Research: Research: In this medium, there are a lot of competence. To stand out, we must provide more than just good stories, including delightful music and animations. Additionally, we aim to cultivate a community that not only perceives us as creators but also as friends.
Statistics: We have a big community in Universidad Paraíso Facebook, so we can take some statistics that show for example the most part of players are women between 18 - 25 years old, they big part of them are located in México and likes video games, reading and writing stories.
Wireframing: One of our most important findings is that users care about a game that they can play from their phones. The first version was just for Desktop, so this time we are taking more time and risk creating a friendly Multi platform that allows the user to play in any part and at any moment.
Game Screen: What is more important for our users? the story? the main character? How could we show the alerts? portrait or landscape? what is easier to tap? to read? there were a lot of questions that we could ask directly to our users, these were some options that solved the previous questions:
Mobile Exploration
Prototyping: After exploring, researching, and testing ideas with our users, we created some functional prototypes. They look like these:
Desktop Exploration
Desktop Version: Despite our users' preference for a mobile version, we also developed a desktop version to ensure we meet all their needs
Season Templates
We also explored holiday templates, which could be used for special occasions, enabling users to enjoy customization
The best part: The emotion of working in something you love, I am working for me and from me and I am making difference in my own life, I am pretty passionate about what I like to do, I enjoy doing UI/UX, but leadership is also in my veins, so I have big goals and I expect in 5 years having my own company
Psicoalianza
Overview: This is an interactive platform for testing the postulants to a new job. This will give to our clients the results of those people and will tell them if they are right for the position.
Length of project: 1 Year.
Rol: UI/UX Designer.
Company Name: Psicoalianza (The CEO was the owner of GrupoAlianza and Alianza Digital)
In my country there are a lot of these kinds of platforms, they evaluate the intelligence of the people, the ability to solve problems, and their priorities at the moment of being working. It is necessary to know what kind of people and what behavior they will have in our business, so we worked hand by hand with a psychologist and specialist and created a pretty good paper test. What we need was becoming those in a virtual platform that allow the users (In this case those who will take the test) picking easily the answers and interacting with the platform without difficult.
Researching
The real problem was our users, this is because in Colombia there are a big rate of unemployment, many of these people does not have studies, does not know how to read or even to write, they are parents or simply does not have good internet connection, so we have to prepared a platform that allow any kind of people participate in the recruitments, this platform will be usable, friendly, and will have good patterns fully complying with heuristic rules.
Customer Journey Map: These people were in a complicated situation and looking for a new job was pretty stressful, they had to send the CV, then wait even per weeks to the company contact them, after this they would get these test and would need a computer with good internet connection, when they finished they should waiting again for the answer.
Customer Journey Map:
These people were in a complicated situation and looking for a new job was pretty stressful, they had to send the CV, then wait even per weeks to the company contact them, after this they would get these test and would need a computer with good internet connection, when they finished they should waiting again for the answer.
User Persona:
We had the opportunity of talking with our users, with the information we gave us, we built this user persona where "Giancarlo Ciliberti" is worried about his job because it does not gave to him growing opportunities, he does not want to quit and being unemployed but he also have serious economic problems and has been applying to different offers without good results. He feels frustrated, and could even feel that he is not smart enough, he thinks those tests are pretty complicated, super long and don't give him time to pause and then start again.
The first version:
With the first version of the test online, the process was so long and it has a lot of usability mistakes, they don´t give the user the opportunity of knowing how many questions will take, how long it will be, neither the possibility of pausing, the time was so short so this produce more stress and the way for answering was confused.
Final version:
After give this project a lot of time, testing with real users, being face to face while the users solving the test and had the chance to include new ideas, this was the result:
- New and fresh design
- User experience improved
- Possibility of pause the test
- Clear interfaz for answer, we added hovers.
- Progress bar
- Panel on the right with the name of the test and the number of tests that are left
- Start page with some instructions about what will be found on it.
Mobile version:
This was other of the improves, we created a mobile version, in this way the user could make the test from any part and in any moment. You can find the web page here
The hardest part:
Working in multiple projects at the same time and could not focus just on the study of this UI/UX.
The understanding level of our users, sometimes they don´t comprehend our questions and we had to explain a lot.
The excessive amount of information.
The best part:
This is a very human project, helping the people to have more job opportunities and could understand what they are doing, it's super gratifying, I liked this project so much and the company was also pretty open for suggesting and exploring new solutions.
Grupo Alianza
Overview: It is an outsourcing platform that is looking to catch as many leads as they can. They need to optimice their design and user experience because most of people that visit the web page is bouncing, so my labor is redesign the UI/UX.
Length of project: 1 Year.
Rol: UI/UX Designer.
Company Name: Grupo Alianza
Starting
I worked for this company for 2 years (2018-2020), I will show you the redesign that I did in that time and also a new case of use with a new version that will improve my work in 2020. When I start worked on this, the web page was chaotic, no UX at all, not legible typography, not hierarchy, pictures without treatment that reflected corporate identity, some call to actions were not working, that "Version 0" looked like this:
Our users: In Spite of the visual of its web page, they already had a group of users, these are their characteristics and the segmentation of our customers.
Customer Journey Map: For working in the redesign, we had to analyze the route that usually takes our clients until having our services. We realized it is long and could be very negative and stressful, for that reason we did make it shorter in the redesign of the experience
Competitors: We had to do research with other companies dedicated to outsourcing, analyzing the competitors it´s important, why are they good? What is their offer? What should be our value proposal? knowing and learning more about them, helped us to improve.
First Proposal
The process: After a pretty long process where we created wireframes and iterated over and over, the end product was amazing, the UI/UI improved a lot, the company got new clients and the web page was more popular than ever.
New Proposal
New case of use: COVID-19 cause troubles not just in this company, people was afraid of the presencially, everything started to become remote, and the Ecommerces needed to adapt their value proposal and also their own corporate identity, designing a new experience where the client could do everything to distance without physical contact.
After working in other companies and having more experience, I could tell to myself that the first design was good, but not good enough, so I prepared a new mobile version for impacting even more and reaching new clients. This was part of the process:
Improvements
Structure:
- Addressed issues: 4 font types, repetitive label information.
- Improved legibility by addressing font contrast for accessibility.
- Simplified and shortened forms to maintain user interest.
- Adjusted form titles and reduced excessive spacing.
- Divided the form into two parts for better usability, enhancing visibility of system status and providing helpful documentation. Removed the footer, focusing on capturing essential information.
Dropdowns with content:
- Addressed concerns: Hierarchy, information overload, readability, and visual elements.
- Streamlined hierarchy for consistency with the redesign.
- Introduced titles supported by explanatory text for improved readability.
- Utilized images to enhance content comprehension.
- Removed shadowed boxes and bold fonts for a modern look.
Dropdowns with content:
- Streamline hierarchy and reduce excessive information.
- Optimize call-to-action placement for enhanced legibility.
- Eliminate outdated design elements like shadows and square borders.
- Utilize bold text and image support judiciously for clarity.
- Maintain consistency in the redesign while improving readability.
Contact button:
- The design is good but it has too much information.
- It should be simpler, both of the calls to action have the same hierarchy but there are too many texts.
- My solution
- I simplified the design, I let both of the buttons one next to the another, with a direct call to action improving also the UX Copywriting.
Web versión 0: The first version of the web page was also disorganized, not practical, and looks super old, I did work a lot on improving this one.
The result: After exploring different alternatives and testing the functionalities, this was the end result, you can check the web page here. I did not apply the new case of use to the web version because I think it is still solid and nice to navigate, so I took the first problem and it was the mobile navigation.
Salud Bolívar EPS
Overview: This is another project of Seguros Bolívar, one of the most important insurance company in Colombia, in this ocasion, we had the challenge of creating a health record for a clinic.
Length of project: Still going.
Rol: Senior UI/UX Designer.
Company Name: Seguros Bolívar.
Process: Without doubt this is the bigger and more ambitious project of Seguros Bolívar, it is planned for 3 years long. In this I had the opportunity of working in a new team, this had 1 UI designer, 1 Psychologist, a new and fantastic specialist, a really talented product owner and of course I worked hand by hand with the developer team.
As usual in this company, we were working with Scrum, doing meetings, dailies and joining forces for success. The first problem was starting from 0, if you have knowledge of the medical field, you know how hard it is to find a software that collects all the information of a clinic record as appointments, medicine, treatments, family illness, surgerys, controls, etc. so practically we did investigated other medical application without success, they were old, obsoletes, and the only thing that we could resque was the information, so we proceed of doing information architecture (I´ll share just a little bit of it because of the privacy of the company).
Salud Bolívar EPS
Wireframing: After having a lot of information in our hands, we did organize them and created some wireframes, the product owner was helping us a lot, she had more experience with medical softwares so the result of the investigation was this:
Interviews, Testing and User Persona: Once we had some prototypes, we decided to do some interviews to better understand our users.
If we want to succeed, we need to understand their pains, gains, fears, routines, etc, so we take the wireframes, ask some doctors for one hour of their time, program a meeting, send the link of the wireframe and guide them in the navigation.
Surprisingly the result was stunning, they gave us a pretty good feedback, and were agree that this is much better that the regular softwares in the market, they were in real pain with old and slow softwares that does not give them a good experience, they described it as "Tragical", and we were there for improving their professional life.
Findings: The current softwares were slow, not intuitive, not usable, and complicated. They need something friendly, easier, with intuitive navigation, UX copywriting and better information architecture.
The doctors really liked our prototype, they wanted them real, they were even surprised because of the friendly interfaz. We improved the design and finally gave it some color.
The hardest part:
Not having good referents for starting.
Having meetings whole day and at the same time designing the UI/UX
The best part:
In the case of this project, we had to disrupt the regular DS, this is a brand of Seguros Bolívar but should look like DoctorAki (Another project of the same company) so we could create and explore new UI. this was nice to do.
I love my team and the corporate environment, this is so important for me, we work as a center with harmony and synchrony that makes the work very fun.
Currently the project keeps growing, the team is bigger and the company has had pretty good reviews about how this is affecting positively in Colombia.
Acceso Clientes
Overview: During the day thousands of clients need to do transactions, payments, claims, etc. The first platform was pretty obsolete and complicated, which made our users complain a lot so we decided to redesign the whole experience, with the new one, they could do everything that they need with just a few clicks, the criticals were very positive and the company could earn new clients because of it.
Length of project: 8 Months.
Rol: Senior UI/UX Designer.
Company Name: Seguros Bolívar.
Process: When I started working in Acceso Clientes, I was in a very huge team, in which there were 5 UI, 2 UX, the project manager, product owner, area specialist, and other stakeholders as developers, business, etc.
We worked with Scrum, this helped us to be more organized with the times, tasks, and each part of the design process. I participated in the first 8 month, after this I taught another designer, and explained to her how to reach a pretty good UI/UX so she could finish this project.
My labor: As a UI/UX Senior Designer, I had to be involved in the whole process of design, from the accommodation of the first mockups, the prototype, testing and finally training the next designer that would take the project after me. These was how this started.
Process
Design System: Seguros Bolívar is characterized by being a very organized and impeccable company, this can be reflected in their corporate identity, who count with a pretty strict Design System, that includes cards, colors, icons, forms, etc.
This is part of their DS. of course there is a big universe of components that I can not show because of their privacy.
Prototype: This is how the mobile version looks, it is simple, clear and the users understood how to navegate.
Desktop Version: How this is a transactional portal, we need to design a Desktop version, this is how it looks.
The hardest part:
- When I was working on this, my boss quit. In that time I was the most prepared for handling the project so I took a lot of responsibilities, among them training the team in time record for not losing the rhythm and ending the objectives on time.
- When we got a new boss, she decided to assign me to another project, so I started working in Salud Bolívar EPS, this was amazing because I got to learn a lot, however, I can say I miss to keep working on this challenge, this was one of my first projects and I had for it a lot of love and expectatives.
- Working in pressure was pretty complicated, we got it, we made such a good project, however I would prefer to work with reality and with plenty of time.
The best part: Training girls and being a leader was fun, I just noticed I had talent, patience and good dynamics for sharing my knowledge.
