thumbnail image
maryinortiz@gmail.com
broken image
broken image
broken image

Maryin Ortiz

  • Top Projects
  • Previous Projects
  • Resume
  • …  
    • Top Projects
    • Previous Projects
    • Resume
    Check my CV
    maryinortiz@gmail.com
    broken image
    broken image
    broken image

    Maryin Ortiz

    • Top Projects
    • Previous Projects
    • Resume
    • …  
      • Top Projects
      • Previous Projects
      • Resume
      Check my CV
      broken image
      • Maryin Ortiz

        I enjoy creating simple, friendly and practical User Experience.

        broken image

        I am a seasoned senior UI/UX Designer with over 6 years of experience, including collaborations with prestigious companies like Madison Square Garden and Kaplan. My expertise spans various platforms, from mobile native to web and TV, and extends to diverse industries like SaaS, SaaP, E-commerce, Health, Fitness, Entertainment, Social Networking, and Gaming. My capabilities instill confidence in my ability to deliver proficient work aligned with your business objectives.

        Check my Resume here!
      • MSG +

        Madison Square Garden is a Multi purpose indoor arena. They hosts MSG+, a premium streaming platform featuring teams like the Knicks and the Devils.
        • Length of project: 14 Months.
        • Rol: Sr UI/UX Designer
        • Company Name: Intive 
        broken image
      • broken image

        The Team

        Our team counted with around 60 people in different roles as Product owners, Product Managers, Developers, Business Annalist, QA, Researchers, UX Designers, UI Designers, main Stakeholders, Marketing team, communications team, etc...

        broken image

        A world involved

        Many of us was working remotely, there were people in Colombia, Argentina, London, Ireland and Germany however there were important locations for the project, the main of them was in Poland, there were two offices, one in Warsaw and another in Wroclaw.

      • Workshops

        We focused on define what the business wants, for this reason we carried some workshops with the main stakeholder.

        broken image

        Approach and Definitions

        In these workshops we defined: What is the overall business mission?, what situation do we want to improve? and what is our differentiation from competitors?

        broken image

        Journey Maps

        We also decided what kind of functionalities we will prioritize in each release and what we wanted to show the user in those process.

        broken image

        User Persona

        For example, Samsung allowed users to log in/sign up through a QR code or web URL. However, Roku had certain limitations, one of which required users to log in/sign up within the app.

      • Flows

        broken image

        Samsung TV

        We created numerous flows to comprehend the platform's behavior and distinctions among devices.

        broken image

        Roku

        For example, Samsung allowed users to log in/sign up through a QR code or web URL. However, Roku had certain limitations, one of which required users to log in/sign up within the app.

      • Roku Wireframes

        My focus primarily revolved around larger screens, such as Roku, TV OS, Samsung TV, and Android TV. I mastered the user experience on TV devices. However, towards the end of the project, our team was downsized to only three designers. During this phase, I also attended to the smaller platforms mentioned earlier.

        broken image

         

        Roku Prototype

        broken image

        Mobile Wireframes

        broken image

        Mobile Prototype

        As I wasn't working alone, I would like to credit my coworkers. They were amazing. What brings me joy in this project is the opportunity to work with such fantastic and professional individuals. Together, we all contributed to building a stunning platform.

        • Juliana: Design system precursor
        • Mateusz: Web & Tablets
        • Martyna: Native Mobiles
        broken image

        Production

         

        • MSG + has been launching along the 2023.
        • Currently is available in all the platforms except Apple TV.
        • The app in Android in IOs has more than 100.000 Downloads
        broken image
      • TV Design System

        One of the biggest challenges in this project was creating the Design System. We were working with many platforms, Web Responsive, Android, IOs, Tablet, Roku, Apple TV, Android TV, Samsung TV plus the different breakpoints o resolutions. At the start we created just one DS for all of the platforms.

        broken image

        However in the middle of the project we had many changes from the client, those changes were specific for platform so there were a point when this generated caos. Our solution was divided the DS in two. I was on charge of the first one so I’ll share it here.

        broken image

        Even if we are designing for TV, there are many differences between them. I was creating experiences for Roku, Android TV, Apple TV, and Samsung TV. The main differences are the Navigation Bar and the Keyboards, these ones use to be native and with few opportunity of customization.

      • Roku Wireframes

        My focus primarily revolved around larger screens, such as Roku, TV OS, Samsung TV, and Android TV. I mastered the user experience on TV devices. However, towards the end of the project, our team was downsized to only three designers. During this phase, I also attended to the smaller platforms mentioned earlier.

        broken image

        To Improve

        The Mobile App was upload replacing the old called “MSG Go”, this one had pretty bad comments. As you can see mostly of the negative rating was made on 2021 - 2022  

        broken image

        Now

        The new visual and functionalities has been received with lots of greetings. People like it more, the user experience was improved a 100%  

        broken image

        Positive Feedback

        Even if still the team need to solve some bugs we definitely reached the goal of made a product with high value in the market.  

      • Kaplan International

        Kaplan is a global educational institution offering a wide range of courses to students from all corners of the world. In particular, the project I would like to highlight is known as "Step 2," which was specifically designed for nurses aspiring to obtain an official certification in the United States.

        broken image

        Length of project: 4 Months.

        Rol: Sr UI/UX Designer

        Company Name: Intive

      • Workshop

        broken image

        Working with the Stakeholders 

        Mateo, our business analyst, and me, organized immersive workshops. These sessions enhanced our grasp of the client's distinct requirements and facilitated the establishment of clear project goals and scope.

         

        broken image

        The good, the bad and the ugly

        We wanted to make the environment more welcoming, so we decided to have a little fun with a game called "The Good, The Bad, and The Ugly." We discussed everything related to the current platform, and the results were quite impressive. It made people feel at ease, which was a significant improvement compared to the previously unwelcoming atmosphere. In conclusion, we realized that the platform consists of various technical components that must work seamlessly together. We identified the need for updates in terms of the user interface, user experience, and overall usability.

        broken image

        MoSCoW Method

        We decided to use the MoSCoW methodology (Must, Should, Could, Won't) to assist our stakeholders in prioritizing and defining product features. They had many ideas and questions, and for this reason, this workshop helped clarify the project and provided a clearer picture.

      • Discovery

        After the workshops we defined that our role was create products that provide meaningful and relevant experience to users.

         

        How?

        • Investigating the user, pains, motivations and gains
        • Observing how are they using our product, what they likes and what they need
        • Analyzing and improving the information architecture
        • Testing functions and usability
        • Respecting accessibility patterns
        • Creating a roadmap considering MVP and increments definitions

        broken image

        Research

        During the discovery phase, we also aimed to understand the resources that students typically rely on for studying. Our findings revealed that many students frequently use YouTube, flashcards, physical planners, and lecture PowerPoints as their primary study aids. Notably, medical students tend to be visual learners, emphasizing the importance of visual content in their learning process.

        broken image

        Methods, Insights, Terms

        Other interesting observations include the significance of color coding, highlighting, and maps. Medical students place high value on clear hierarchy, which aids them in time management, enabling them to prioritize essential information and facilitating easier, more memorable studying.

         

        A fun fact was that we were venturing into an unfamiliar field, one in which we had no prior experience or medical background. Consequently, we encountered numerous unfamiliar terms and acronyms such as PANCE, MCAT, and AMSA. Learning and familiarizing ourselves with this vocabulary was crucial to boost our confidence when communicating with the client.

        broken image

        User Interviews

        After a couple of days of research, we were prepared to conduct user interviews. Initially, I arranged interviews with three medical graduates who were actively preparing for the test. Being Step 1 students, they were in a great position to offer valuable feedback regarding the platform, including aspects they found appealing and areas they felt could be improved.

        broken image

        User Persona

        Following the interviews, we developed a user persona. This persona was centered around an international graduate student studying in the United States with the goal of obtaining official certification to ensure legal residency in the country.

        broken image

        Positive Feedback

        We received positive feedback regarding several aspects. Students highly appreciated the live lessons and found the course content to be of great value. Additionally, they were pleased that the platform was accessible on various devices, including laptops, tablets, and phones. Furthermore, students expressed satisfaction with the end-of-quiz reviews and the availability of online books.

        broken image

        Negative Feedback

        However, as you can tell, the negative feedback was more prevalent than the positive feedback. This was mainly because we faced various issues related to technology, user experience, and our internal processes. We concentrated our efforts on improving the user interface and experience. Some parts of the platform were not easily visible, lacked a clear structure, and weren't user-friendly. The overall look and feel were a bit dull and uninteresting to students. To make matters worse, some sections remained hidden from students, causing confusion. Many students initially struggled to navigate the platform because there was no guide to help them understand how it worked. Consequently, everyone agreed that implementing an onboarding process would be a valuable addition. Moreover, some students felt the platform appeared outdated and lacked a welcoming vibe.

        broken image

        Journey Map

        Let's dive into the journey of medical students as they go through their three-year program, starting with Step 1. In their first year, these students often find themselves overwhelmed and anxious. Everything is new, from the subject matter to the language, and there's a lot to take in.

         

        As they progress to the second year, or Step 2, things get even more challenging. Students in this phase can feel isolated and exhausted. They're not sure where to begin, and they need more time to figure things out. This is when they really appreciate a platform that's easy to use and understand, and that's where we come in.

        broken image

        Information Architecture 

        Once we had a solid understanding of the business goals and the students' needs, we set out to create a new information architecture. They had an existing one, but it wasn't quite effective.

         

        So, we decided to start fresh, identifying what needed to be built from scratch, what could be redesigned, and what was working well and didn't require any design changes.

         

        I should point out that this architecture was quite complex, with over 50 sections and pages. What you see here is just a portion of it. I decided to do a simple card sorting exercise with my boss and the project leader. They provided invaluable assistance in restructuring the architecture, drawing from insights gained through interviews and feedback from other students.

        broken image

        Scratching Ideas 

        The enjoyable part of this project was the creative freedom to explore new ideas. Sometimes, this is the most effective way to visually convey the flow to the client. It allowed me to gain some great insights into our next steps. I kept refining and iterating until we got closer to what our stakeholders desired.

        broken image

        Previous Platform

        Here are the screenshots from the "Step 1" platform. Following our exploration, it became evident that the stakeholders were seeking a fresh, functional, and user-friendly solution that adhered to best practices in terms of User Experience and accessibility.

        broken image

        The former platform was outdated, with technical and visual issues, and posed significant challenges. The students frequently voiced their concerns and complaints. Consequently, it became imperative to implement visual and usability enhancements.

        broken image

        Another challenge we encountered was the tight timeframe. Our stakeholders, who were doctors, were facing time constraints as they needed to accommodate new students beginning in "Step 2" courses. As a result, we had a mere four months to complete our work.

      • Mockups

        broken image

        I began with a mobile-first approach. This not only got me thinking about the interactions and micro-animations but also allowed me to create something our stakeholders could actually navigate. It gave us a clearer picture of how it would look once it went live.

        broken image

        We created it with a lot of attention to detail, and we also kept in mind the importance of testing it with real users from the very beginning (Step 1). This way, we could determine whether everything we implemented was working well or if we needed to make improvements through iterations. 

        broken image

        We added a user-friendly onboarding process because during our interviews, users mentioned that the platform was difficult to understand. In response, we decided to include explanations for each section in a more user-friendly manner to help users navigate and understand the platform better. 

        broken image

        Essentially, we retained the same color scheme, but we leveraged contrast by using darker shades to highlight important sections such as the live classes. We also employed lighter shades to create a harmonious look for the content and improve its overall readability.

        broken image

        This is just one section of the Design System. I built it from scratch while maintaining Kaplan's original identity. To enhance the user experience, I integrated animations into the components. This allowed users to interact with and provide feedback on the design elements, such as the animated test score.

         

        Moreover, including animations in the designs served a dual purpose. It not only solicited user opinions but also aided developers in comprehending the desired behaviors, making it easier for them to replicate these animations in the actual codebase.

      • Testing

        In the second test, six people participated: three of them tested the mobile version, while the other three evaluated the desktop version.

         

        We made sure to create a welcoming atmosphere for this activity, where participants felt comfortable. We asked questions like, "How would you go about taking a cardiology test?" or "If you needed to attend a live lesson, how would you use the platform?"

         

        The responses were largely positive. In general, participants demonstrated a good understanding of navigation, appreciated the color choices, recognized the terminology used in the menu, and found it easy to access different areas of the platform. 

        broken image
        broken image
        broken image
        broken image
        broken image
        broken image
        broken image
        broken image
      • Results

        In the second test, six people participated: three of them tested the mobile version, while the other three evaluated the desktop version.

         

        We made sure to create a welcoming atmosphere for this activity, where participants felt comfortable. We asked questions like, "How would you go about taking a cardiology test?" or "If you needed to attend a live lesson, how would you use the platform?"

         

        The responses were largely positive. In general, participants demonstrated a good understanding of navigation, appreciated the color choices, recognized the terminology used in the menu, and found it easy to access different areas of the platform. 

        broken image

         In our evaluation of user-friendliness and attractiveness, we held a mix of interviews with a blend of open-ended and data-driven questions. We were pleasantly surprised to discover that the feedback was strongly positive. It revealed that the platform was both easy to use and had an appealing visual aspect, thanks to its colors, icons, and organization.

        broken image

        The one drawback we noticed was that users didn't engage much with the onboarding process, possibly due to the common belief that users tend not to read instructions. This highlighted the need for us to iterate and find a more effective way to introduce the software to them. However, it's worth noting that they did quite well in associating the colors with Kaplan's identity, and they were genuinely excited about this new release. 

        broken image

        By the end of this project, we gained valuable insights that will undoubtedly contribute to making Kaplan - Step 2 a successful platform.

         

        On a personal note, this project was quite challenging, primarily due to time constraints and the introduction of new medical terminology. It offered me a wealth of learning experiences, and I take pride in the excellent results achieved by my team and me.

         

        Working with the Kaplan team was a joy; they were not only friendly but also extremely supportive in addressing the design-related requests. This project stands out as one of the best experiences I can add not only to my portfolio but also to my memories. 

      • Zaahah

        broken image

        Zaahah is an innovative platform revolutionizing extracurricular activity management and promotion. It guarantees equal access and awareness, prioritizes student safety, and creates a vibrant community. By engaging in real-life activities, students explore their interests and earn digital incentives for personal growth. Zaahah also offers micro-scholarship opportunities, empowering students on their educational journey.

        • Length of project: 4 Months.
        • Rol: Lead UI/UX Designer
        • Company Name: The Possibility Company
      • Benchmark

        broken image

        This project was an absolute thrill and presented an exciting challenge. We embarked on this journey from ground zero, carefully analyzing and studying renowned and substantial competitions like Facebook, Instagram, TikTok, as well as platforms such as Tumblr and Discord. Our goal was not to simply replicate the typical social media experience of mindlessly scrolling through feeds all day.

        We aspired for something far more captivating and extraordinary. We envisioned a platform that offered a delightful and innovative opportunity for personal growth, where users could earn rewards by actively engaging in daily activities. This became the shining focus of our project, driving our passion and determination to create something truly unique and remarkable.

        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

        broken image

        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.

         

      • Scratching

        broken image

        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.

        broken image

        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.

        broken image

        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.

      • Mobile Design

        broken image

        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.

        Web Design 

        broken image

        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.

      • broken image

        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?

      © 2023

        Cookie Use
        We use cookies to ensure a smooth browsing experience. By continuing we assume you accept the use of cookies.
        Learn More