Zaahah
Overview: Zaahah is a platform to manage and promote all extracurricular activities ensuring equal awareness and access to opportunity protecting students, with a safe, invitation-only social-network that promotes exploration of their interests through participation in real-life activities offering digital rewards – supporting contextual financial literacy and the opportunity for all student to earn micro-scholarships.
- Length of project: 4 Months.
- Rol: Lead UI/UX Designer.
- Company Name: The Possibility Company (United States Start Up).
Research: This was a truly fascinating and challenging project because when we started it was from 0 so I had to analyse different real and big competitions such as Facebook, Instagram, Tiktok and other platforms such as Tumblr and Discord.
We didn't want to copy exactly social media, our necessities were different than "watching a feed the whole day". We had something nicer and cooler as the opportunity of growing and getting rewards for participating in daily activities, so this was the focus of this project.
Findings:
None of them pay the users for going to real life events.
The events are not the main of those applications so we can take advantage with a better user experience and design interfaz.
In these Apps, nobody will take care of the teenager´s security. We need to ensure our social media is safer and promote better content.
Information Architecture: First, we started planning the information architecture, in this way we could analyze a big perspective and then start creating low fidelity sketches that allows the future users a intuitive and nice place to navigate.
Wireframes: Then I did some scratches. The first idea was a carousel of images, we explored a lot this one, even we created some high fidelity prototype of this but finally we discarded because studies shows than "scrolling too much to the left/right is pretty bad for the hands and can produce "Carpal Tunnel" and definitely we don't want our users with health problems.
Digital wireframes: After a couple days of scratching and researching, we decided to use infinite scrolling, the people are used to doing it all the time so our role was integrating the amenities of other social media in the design without losing our focus.
We explore in digital with some gray - simply mockups, in this way we could see how it would be in the App and of course asking some people of our organization which one would they prefer, hearing is part of our role as a UX.
Design System: I have been working with Design Systems since a while and in this case I had to create one from 0, this work was amazing, it took a lot of ideas, inspiration and of course good practices, I think this was one of the funniest parts of working on this project.
To be honest, I would expect my next company to work with an appropriate design system, if there is not one, I would create it. I need my clients to understand it could take some time but it is the best you can choose for your business, it will help the future designers and it will update the components in just a few seconds.
Testing: We already launched this Application, thousands of Teenagers around the United States have tried with very good and positive feedback. The User Experience has helped us to create something great, passionate colors, intuitive interfaz, nicer functionalities and that feels like a true success.
Downloads: You can find this Application here for IO´s and here for Android. Also you can go to the web page and register in case you are interested in being part of Possibility.
Desktop Version: Before me, Zaaha was designed for a Developer (Please, please, don´t...) so it has a pretty awkward interfaz, the information was everywhere, it was hard to navigate, the menu has just two option, the feed suffered with some "white spaces" because it has not clear how to update the information, and the quality of the information was not nice to read, no hierarchy, not visual help, not order at all.
Functional Mockups: I applied again the process of organizing the information architecture, the Desktop version has a lot more information than the Mobile App, so I had to correct the flow navigation map and integrate new functionality, this was a chat for groups and for people.
I did the platform for Student, for Administrator and for Super Admin, my work here was done, as it was my job in Possibility Company, that is why I am looking for new tentative - challengers projects, my focus now is International Companies, however if you are a Colombian one I am open to talk.
The hardest part:
Being organized enough for expend such a project in just 4 month.
The misunderstandings that could happens for accents different (My boss does not speak spanish so all the project was in English).
In this project in specific we does not have a methodology as Agile (I has been working with scrum almost all my professional life and definitely I think that is a good practice).
The best part:
This was fun, challenging and an amazing experience, how background and a bit of story, I took this project while I was as "Digital Nomad" in Europe, so I could have the opportunity of working from Berlin, París and Spain, I´m looking forwards to get a job that allow me the same, working 100% remotely and having the advantage of being in any part of the world. Today I am in Bogotá, tomorrow maybe in Thailand, who knows?
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: 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.
This is an example of our planning created for the Product Owner of that project.
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.
This is an example of our planning created for the Product Owner of that project.
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.
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: The idea started in my age of University, I have always been a gamer and one of my dreams is having big video games, so this is a pretty good beginning. I was studying Software Engineering and one of my colleagues decided to follow me in this idea, so we created a team with 5 people. I was doing the story, he took care of the development, another girl did the illustrations, another guy the music, and another one helped us with the community manager.
The project lasted one year, and it was very popular, however we did not have enough experience, so we decided not to keep it and move into other jobs.
Now, a couple of years after, I decided to give it life again and currently I'm working as a society with my partner in a small start up, we will expect to have the game in April and throughout this year reach more than 50.000 players.
At that time I was not a designer, so I just did my best to give it a look and feel (don't judge me), however to be honest it does not look good at all, the good point is that people loved it and that motivated us to improve. These are some screenshots of the 2014 version.
Research: We have a lot of competence because in the medium there are a lot of good visual novels that counts with thousands of players, so we did not pretend to still them, we need to offer more, something different as good stories, nice music / animations, and growing a community that feels really close to us not just as creators, also as friends that will heard them, and will center their functions in a truly human environment.
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.
User Persona: Taking advantage of the statistics that we already have of our users, we has been reaching our players and having some talks to them, so we created a Users Persona, that helps us with the UX, in this way we can create a game that satisfy their necessities as gamers and also that most of them truly enjoy playing. This time and with my experience as a UI/UX, I can focus on a better version that for sure will be usable, with a friendly interfaz, and very accessible to our players.
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.
I did some scratches that helped us to imagine where we could locate the elements, and what were the options that we have for the commodity of our users.
Game Screen: What is more important for our users? the story? the main character? Where would we locate the game coin? 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:
Prototyping: After exploring, researching and testing some ideas with our users, we did some functional prototypes, they looks like these:
Desktop Version: We also did a Desktop Version, in spite of our users prefer a mobile one, it is important to cover all their necessities.
Beta: We launched in December 2021 a Beta, the people could register until January and would get the first access to the game and other rewards, for our surprise, we had more than 100 users, that is a true progress, they are waiting and expecting for the game, so my task right now is keeping investigating, improving and creating a perfect UI/UX for Universidad Paraíso.
You will find the game at www.universidadparaiso.com
The hardest part:
Having time for working on this. I am a full time worker, so my time for UP is at nights and during the weekends, this could burn me sometimes, but I am motivated because of the love we get from our users.
Being a leader in a team of friends. Leading unknown people is easy, they will follow you and your experience. This project is being developed by my boyfriend and there was another friend, he does not handle the pressure and quit a couple months ago, so it is kind of difficult making a society with people you love.
Waiting to monetize. We has been working in our free time by a year, so in all of this time we has not made money at all, of course we are sure because statistics it's worthly and it is going to be huge in a couple years.
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 with hundreds of workers and of course a lot of money.
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).
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.
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.
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)
Story: 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.
The users: 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.
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.
The web page: I also helped created the web page, you can find it 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
Story: 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.
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 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:
Home: For people it is a little hard to understand that less is more and minimalism is not just a trend, it is something that could elevate the sales, leads, and catch the attention of new users.
In this company, they have too much to tell, so in the current version they have a lot of text, so much that it's really lazy to read it, they also commit too many UI/UX mistakes as having even 4 types of fonts and using bold, regular, light and italic in the same page, there are contrast problems and this would not allow the accessibility for people with eye problems, etc.
In the home screen the first suggestion in my new proposal was improving the hierarchy, handle just 2 types of font and limiting the brand colors just to black and greens, this is elegant and generate remembrance in the clients, another change was distributing the texts and not just having a big block on the top, when you generate small groups of information, this is easier to follow.
Forms: These are some of the mistakes in that screen:
4 types of fonts.
Repetitive information, the label has the same information as the placeholder.
No legible font (people with eye problems could not read the information because of the contrast)
Forms too long for filling, this makes people lose interest.
Form titles too big.
Too much spacing, it is important but in this case is too exaggerated.
At the end of the form there is a long footer.
In my proposal, the solution was:
Divide the form in two parts, one for asking the company information and a second one just for the contact information, this could help to fulfill two of the Usability Heuristics for User Interface Design, Visibility of system status and Help and documentation.
When clicked the placeholder will show a label. If it is not clicked it should not have a label and the instruction should be inside the placeholder (view process).
Font contrast, solved.
Hierarchy fixed.
No footer, just the rights of the brands. The footer could be a distraction and we just need people to give us the information.
Dropdowns with content:
Too big hierarchy
Too much information
Lazy to read
The bottom call to action is too thin
Enclosing information in boxes is an obsolete practice
Shadows, square borders, bold font, makes it look old.
The idea of adding an img is to support the text for being easy to understand, however the image is lost on the top.
When you open one of them, it looks clickable.
My suggestions:
Consistent hierarchy with the rest of the redesign.
Title supported for an explicative text, this is easy to read.
Img that supports the content.
No boxes with shadow.
Text with bold just when the information is displayed, this is also supported for a change of color in the title.
The call to action in the bottom is more legible and has more importance now.
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.
How the whole design is dark, I changed the background for an opaque white, this refreshes the eyes.
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.
The hardest part:
It was one of my first projects, so I was still learning, the result was amazing and helped a lot to the company, however I truly think my progress has been amazing and now I could give a better analysis and perspective. I think the hardest part of starting is the research, understanding people, their behavior and their needs was a challenge for me at that age.
The best part: If I said the hardest part was researching and understanding people, I also can tell that was the best part, I learned a lot, and had the opportunity of talking with a lot of people, I did some mistakes but I corrected them and I growed more and more, I think learning is fun, and I hope keep doing it and sharing my knowledge in my next jobs.
