Maryin Ortiz
I enjoy creating simple, friendly and practical User Experience.
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.
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
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...
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.
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?
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.
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
Samsung TV
We created numerous flows to comprehend the platform's behavior and distinctions among devices.
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.
Roku Prototype
Mobile Wireframes
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
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
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.
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.
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.
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
Now
The new visual and functionalities has been received with lots of greetings. People like it more, the user experience was improved a 100%
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.
Length of project: 4 Months.
Rol: Sr UI/UX Designer
Company Name: Intive
Workshop
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
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
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.
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.
Mobile Design
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
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?
