My Portfolio

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?

Findings:

• They were clear and pretty organized, we needed to do our best to give the users something similar, usable, easy and mainly something that they want to open every day.  
• The focus of our competence are the daily steps, we should be careful and find our own value proposal, we did not want to be as the others applications, so after thinking about it, we found original not just focusing in the physical exercise, but also on mental health. 
• Many of these apps were designed in a dark theme, this looks elegant and sober, however we had to reflect our company brand, this would be a challenge because our original color was a dark green and who wants to open an application daily with a weird/dark green? so we decided to give it a fresh one, even including more soft colors.

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.

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.

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.

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.

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.

• 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.

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.