B2B Website Redesign Focused on Conversions
Master Affiliates
A High-Impact UX/UI Overhaul in Just 6 Weeks
Project Overview
B2B Website Redesign Focused on Conversions, a high impact UX/UI Website, Master Affiliates is a performance-driven affiliate marketing platform that connects businesses with top-tier affiliates to maximize revenue through strategic partnerships.
The previous website had a low conversion rate and failed to effectively communicate Master Affiliates’ value proposition to potential partners. The complex and unstructured content made it difficult for users to understand the platform’s benefits, leading to missed opportunities for engagement and sign-ups.
Adding to the challenge, we had only 6 weeks to redesign the entire website.
To increase conversions by implementing a modern UX/UI redesign and a refined content strategy that simplifies information enhances usability, and attracts new clients.
As the Lead UX/UI Designer, I was responsible for:
- Defining the UX strategy to improve user engagement.
- Redesigning the website structure, layout, and content hierarchy.
- Delivering final UI designs for development and ensuring design consistency.
- Leading a team of two UX/UI designers, who:
✅ Developed a UI Kit to ensure visual consistency.
✅ Created custom images and graphics using MidJourney.
✅ Designed mobile and tablet versions of the site. - Overseeing the design-to-development handoff and conducting QA to ensure a pixel-perfect implementation.
Research & Discovery
Receiving 140 visits per month, yet only 15 users clicked the JOIN NOW CTA, resulting in a high bounce rate of 89.3%.
Through Google Analytics data and stakeholder feedback, we uncovered:
✅ High Bounce Rate (89.3%) – Most visitors left without engaging.
✅ Overwhelming Content – Messaging lacked clarity, making it difficult to grasp the program’s value.
✅ Unclear CTAs – The JOIN NOW button was not prominent, leading to low interaction.
✅ Poor Mobile Experience – Navigation was frustrating, causing drop-offs.
These insights confirmed the need for a content-focused UX redesign to simplify navigation, improve messaging, and increase conversions.
To align with business goals, I conducted a Q&A session with the Affiliates Director to understand key pain points and gather insights. Two competitor websites were provided as benchmarks:
Commission Kings and RevMasters stood out for:
✅ Clear, benefit-driven messaging
✅ Simplified sign-up flows
✅ Engaging, easy-to-navigate dashboards
We refined content structure, UI approach, and navigation by analyzing these platforms to position Master Affiliates as a more user-friendly and conversion-focused platform.
With only 1 week for research, we focused on high-impact changes:
✅ Simplifying content to highlight key benefits.
✅ Enhancing CTA visibility for better conversions.
✅ Optimizing navigation to reduce friction.
✅ Ensuring a fully responsive design for seamless cross-device experiences.
By grounding our redesign in real user insights, we ensured a more intuitive and engaging experience.
UX Strategy & Wireframing
The redesign of Master Affiliates wasn’t just about visuals—it was about creating a user experience that was clear, focused, and built for conversion.
Identifying Structural Gaps
The previous website had a flat layout, vague call-to-actions, and a disjointed content flow. With repetitive messaging and unclear visual hierarchy, users often dropped off before understanding what the platform offered.
Navigation was inconsistent and the user journey lacked momentum—there was no clear direction pushing users toward conversion.
Strategic Reorganization: Sitemap Redesign
One of the first tasks was to restructure the site architecture. The original sitemap gave equal weight to primary and secondary content, and lacked a guided flow.
The revised sitemap streamlines navigation, removes redundancy, and introduces a clear flow from landing to conversion. We consolidated sections and moved less critical content (e.g., legal info) into the footer to keep the core experience focused.
UX Flow & Content Prioritization
We reimagined the site to follow a natural scroll-based narrative:
- Attract with a bold offer and strong visuals
- Convince with clear commission structures and benefits
- Reassure with testimonials and supporting content
- Convert with visible, high-impact CTAs placed throughout
Content was reorganized into modular blocks, each with one clear purpose—educate, build trust, or drive action.
Wireframing & Layout Strategy
Given the tight 6-week timeline, we skipped low-fidelity exploration tools and moved straight into structured layout design, starting with hand-drawn wireframes to align priorities quickly.
This early sketch helped define the core content flow:
- A bold hero section highlighting the key value proposition (XX% revenue share)
- A clear, high-contrast CTA placed early to drive conversions
- A visual slot for imagery or product mockups to reinforce the offer
- A dedicated, scannable Commission Structure section to build trust and support decision-making
From this foundation, we moved into responsive layouts in Figma.
UI Design & Implementation
With the UX structure in place, the focus shifted to delivering a bold and modern visual identity that communicated value, trust, and energy.
Visual Direction
We established a sports-driven visual identity—confident, clean, and energetic. The UI leveraged:
- A dark, high-contrast background for dramatic impact
- Bold typography to highlight the 50% affiliate offer
- Carefully structured sections for visual rhythm
- Custom graphics and imagery that reflected the gaming and sportsbook ecosystem
This look & feel modernized the brand and positioned it competitively within the affiliate space.
Design System
To ensure scalability and speed, we created a modular design system in Figma, which included:
- A reusable UI Kit with buttons, typography, and layout components
- Consistent spacing rules, color styles, and design tokens
- Scalable sections for commission structures, testimonials, and CTAs
This allowed the design team to work in sync while ensuring visual and functional consistency across breakpoints.
Responsive Execution
Layouts were designed responsively from the beginning. Each screen—desktop, tablet, and mobile—was adapted to maintain usability and clarity. We focused on:
- Adaptive grid behavior
- Tap-friendly touch targets and CTA placements
- Simplified navigation for mobile
- Reflowing commission tables for small screens
The mobile experience was not just a scaled-down version—it was intentionally crafted for performance and clarity.
Team Collaboration & Execution
I led a small but focused team of two UX/UI designers. Together, we:
- Created mobile and tablet versions
- Built and maintained the shared UI Kit
- Developed branded hero imagery and UI assets using MidJourney
I took ownership of the desktop layouts and provided direction and quality checks across all visual touchpoints. We worked in fast iterations with daily reviews to stay aligned and on schedule.
Asset Delivery & QA
Once the visual designs were finalized, I led the full handoff and implementation support process, working closely with developers to ensure everything was built to spec.
This included:
- Delivering fully organized and labeled Figma files
- Exporting all necessary assets and layout specifications
- Supporting the development team with behavior clarifications and responsive behavior notes
- Using Jira to document design tickets, assign tasks, and track progress across features
- Creating an Excel QA tracker to document each QA round, detail issues found across breakpoints, and assign them to specific developers for resolution
This structured and transparent approach helped us ensure consistency, avoid missed details, and streamline collaboration between design and engineering—especially critical under the pressure of a tight 6-week deadline.
Results & Reflection
The Master Affiliates redesign resulted in a streamlined, conversion-focused website delivered in just six weeks — with significant improvements in structure, clarity, and engagement across devices.
Results at a Glance
📊 Heatmaps & Behavioral Insights (via CRO)
- 60% of users focused on the hero section, showing strong engagement with the key value proposition and early CTA — exactly where we aimed to capture attention and drive conversions
- High interaction with the top navigation, especially FAQs and the contact email, suggesting users were actively seeking clarity and preferred direct access
- The contact email in the top-right corner received significant clicks — likely due to its simplicity and immediate reward (aligned with present-focus bias and response efficacy)
- The commission structure section also drew strong attention, confirming its importance as a decision-making anchor
Heatmap analysis showed users engaging with the exact areas we prioritized — hero messaging, commission details, and quick-contact options — validating our UX strategy and layout decisions.
Final Visual Experience
The new Master Affiliates website was crafted to deliver clarity, confidence, and action. Every section was designed with purpose — from the bold hero statement that immediately communicates value, to the commission breakdown and testimonials that build trust.
Strong visual anchors like high-impact photography, structured content blocks, and bold CTAs helped guide user attention and create a professional, persuasive journey. The layout was built responsively to ensure consistency across desktop, tablet, and mobile, supporting accessibility and a seamless user experience.
Cross-Functional Collaboration
This success was made possible through strong coordination with a cross-functional team:
- The CRO provided behavioral insights that influenced the layout of CTA placement and UX writing.
- A copywriter and SEO specialist worked together to shape UX writing aligned with clarity, tone, and search performance.
- Project managers handled Jira task creation and helped manage QA cycles, one PM even participated in testing.
- I worked closely with developers from the start, ensuring feasibility, alignment on interactions, and timely handoff support.
This constant communication across disciplines allowed us to iterate quickly and make confident decisions throughout the process.
Collaboration under Pressure
This project reinforced the value of cross-functional collaboration and staying adaptable under pressure. Leading the design while aligning closely with business needs helped me stay focused on what truly drives user and business impact.
Aligning Design & Development
One key takeaway was around grid alignment. While we used a 12-column design system, the development team implemented layouts using percentage-based Flex and Grid systems, which led to implementation inconsistencies. In future projects, I’ll prioritize early alignment on layout logic to prevent issues and streamline development.
Wireframing for Speed and Clarity
Although the timeline was tight, wireframing early on allowed us to define structure, flow, and hierarchy quickly, enabling fast alignment with stakeholders and smoother transitions into UI design. It proved to be a crucial tool for maintaining momentum without sacrificing clarity.
Despite the challenges, I’m proud we delivered a high-impact, responsive experience—on time, and with a scalable foundation for growth.
Before & After
Designing a User-Friendly UI for Music Creation
This case study focuses on the design of a user-friendly music UI for Easy Tunecraft — a platform created to simplify music-making for beginners and casual creators. The challenge was to craft an interface that feels approachable, intuitive, and creatively empowering without sacrificing functionality.
From user flow planning to clean layout decisions, the process emphasized usability, accessibility, and the emotional rhythm of digital music creation.
Overview
Increasing visits by 430% on the new landing page
1500+
With the new design the average of tunes crafted increased significantly.
Timeline
Feb - Oct 2022
Platform
Responsive Webapp
My Role
UI-UX Designer
Tool
Figma
UI Process
From a Moodboard to a Prototype
1. Introduction
TuneCraft was designed with simplicity and user-friendliness. It allows anyone to dive into music composition regardless of musical background. This intuitive platform breaks down the barriers to music creation, making it accessible and enjoyable for all. Users can craft unique, royalty-free tunes perfect for various applications – from digital marketing to personal projects. Here is the UI Process.
We followed WCAG accessibility guidelines to ensure the interface was inclusive and legible across devices.
My Role
I led the design, user testing and development of this project from end to end. I collaborated with one product designer during the early ideation stage, one UX Designer, one Project Manager, and one Developer.
Problem
Agencies in the modern digital landscape face a significant challenge in sourcing royalty-free music for their video productions. The options often involve expensive licensing fees or limited options.
The client previously created an app for mobile but its lack of design and UX process resulted in an abandon rate of 75%.
Goal
I aim to boost user interest in the UI design I’ve developed, showcasing its unique, user-friendly features to enhance their experience with the tool.
2. Impact
Analytics indicated a remarkable 450% increase in visits, totaling 30,000 in the first three months alone. Furthermore, there was a substantial decrease in the abandonment rate, dropping from 75% to 37%. These figures reflect the team’s efforts’ success and underscore the new design’s positive impact on user experience and retention.
3. Early Ideation
Moodboard
I have carefully curated a collection of images that encapsulate my vision for the app’s look and feel. This moodboard harmoniously blends sleek interfaces, intuitive layouts, and a color palette that reflects TuneCraft’s innovative and user-friendly ethos.
Low Fidelity Wireframe
This sketch is a first glance at the user interface design, mapping out the essential elements and their interaction. At this stage, the focus is on functionality and layout rather than visual details.
Medium Fidelity Wireframe
I developed a medium-fidelity wireframe, a vital step in the UI design process. This wireframe balances basic structure and more detailed elements, providing a clearer view of the layout and user interaction without the intricacies of high-fidelity designs.
4. Style Guidelines
In crafting the style guidelines for TuneCraft, accessibility stands at the forefront of our design ethos. We strive to create an inclusive environment where all users can navigate and interact with the app comfortably and effectively. Our color palette is chosen to appeal aesthetically and accommodate various forms of color vision deficiencies. We ensure sufficient contrast between elements and backgrounds to aid readability and ease of use.
5. Final Designs
The previous design, primarily centered on mobile, fell short in adhering to design best practices. This oversight led to a visually unappealing interface that failed to resonate effectively with users. The design’s aesthetic appeal and functionality limitations highlighted the need for a more thoughtful and user-friendly approach.
Before
After
Loading Page
We wanted an elegant and clean landing page.
Welcome Page
On the Welcome Page, we created options in order to let the user create a new project or load the latest.
Adding First Track
Adding a track was designed as an easy process.
All tracks added
All the tracks were successfully added.
6. Prototype
This prototype brings the wire flow to life, showcasing a dynamic and interactive representation of the user journey within TuneCraft. It illustrates the process from the landing page to a fully layered session, allowing users to actively engage with the interface by adding tracks. This interactive model is key to understanding the practicality and responsiveness of TuneCraft’s design, providing a real-world feel for the user experience.
7. Testing
Four tests were conducted on-site, and four were carried out virtually. Each session was meticulously screen-recorded while participants employed the think-aloud protocol, verbalizing their thoughts as they navigated through the app.
The on-site tests provided me with a direct observation opportunity, enabling immediate engagement with the participants. Conversely, the virtual tests offered insights into how users interacted with the app in their natural environment. The combination of both testing environments, complemented by the think-aloud commentary, granted me a comprehensive understanding of the user experience. The feedback collected is now a cornerstone for iterative design enhancements, ensuring that TuneCraft is tailored to meet the users’ needs with precision and empathy.
8. Tunes
To optimize TuneCraft’s user experience, I spearheaded a series of rigorous testing sessions—four conducted on-site and four carried out virtually. Each session was meticulously screen-recorded while participants employed the think-aloud protocol, verbalizing their thoughts as they navigated through the app. This method yielded deep insights into user behavior, preferences, and usability challenges encountered during their interaction with TuneCraft.
Trópica Tica: Web product
Overview
Trópica Tica: website design
Space Lab hired me to be a UI consultant for one of their VIP new clients, Trópica Tica — a Costa Rican company offering landscaping services for industrial parks and free zones. The project focused on a responsive website design for a tropical brand that needed a modern, accessible, and digitally aligned presence. Their previous website did not meet WCAG minimum standards, so we set out to update their look and feel while improving usability and compliance with current digital trends.
I undertook a rigorous testing regimen for every color, ensuring as much as possible AA compliance under WCAG guidelines. I curated a color palette that wasn’t just compliant but also visually captivating. By employing well-thought-out color schemes and contrast ratios, I aimed to create a design catering to a broad spectrum of visual needs. This endeavor is a testament to my commitment to marrying aesthetic appeal with inclusivity and user-centric design.
Client: SpaceLab on behalf of Trópica Tica. Users: Trópica Tica's clients. Timeline: Aug 2023 - Nov 2023. My role: UI solo designer. Team: one UI Designer (me), one UX Designer, one SEO Analyst, and two developers. Tool: Figma.
Problem
Tropicatica was losing leads on its website because of its issues in the SEO and accessibility low standards. Space Lab contacted me for my design POV as a UI consultant. After analyzing the site, I noticed a lot of concerns regarding their digital presence since their site's primary color palette wasn't AA compliance.
Solution
I decided to focus my work on improving the accessibility of the site to make it AA-compliant. So, this was translated into an improved UI with a new accessible color palette, better contrast in the images, UX improvement in the form.
the work
Image creation in Midjourney
In creating my website design, I used Midjourney and Photoshop to cut costs and streamline the process. Midjourney’s AI helped generate unique images, eliminating the need for an expensive photographer and subsequent editing. I then used Photoshop to refine these images, ensuring they matched the website’s aesthetic and UX goals, resulting in a cost-effective, visually striking design.
the work
Accessible style guideline
I’ll show some of the work I did in a design style guideline I created to hand off the project to the developer in charge of this. Also, this will help the client to keep consistency with future updates.
- Color palette
- Typography
- Grids
- Spacings
- Buttons
- Shadows
- System feedback
1. Color palette & accessibility
I prioritized accessibility in the Trópica Tica website design. I rigorously tested every color to ensure they met AA compliance under the WCAG guidelines and carefully curated a visually appealing color palette. I employed distinct color schemes and contrast ratios to cater to diverse visual needs. This work showcases my dedication to inclusivity, aesthetic appeal, and user-centric design.
2. Typography
For this project, typography was pivotal in mirroring the leadership in landscaping services. I chose “DM Serif Display” for titles, leveraging its elegance and sophistication typical of serif fonts, creating a compelling visual hierarchy. For body copy, CTAs, and other content, the modern sans-serif “Inter” I used, ensuring readability and a contemporary balance. The careful pairing and sizing of these typefaces across devices provided an accessible and refined user experience.
3. Breakpoints
I ensured a seamless user experience across various devices. I established specific breakpoints tailored for desktops, tablets, and mobiles, optimizing the visual layout and interactions for each. This meticulous planning ensures that the content is both aesthetically pleasing and functionally intuitive on any device or screen size.
3. Grids
I employed a versatile approach tailored to each device type. On desktop, I utilized a 12-column grid, providing ample flexibility for layout configurations and content placement. For tablet views, an 8-column grid was implemented, striking a balance between structure and adaptability. Lastly, for mobile interfaces, a streamlined 4-column grid was chosen to ensure clarity and ease of navigation. This structured grid approach ensures a consistent and harmonious layout across all platforms.
4. Spacings
I adopted a modular approach rooted in a 4px base unit. This foundational unit offered a harmonious rhythm and consistency throughout the design. Whether margins, paddings, or element spacing, everything was scaled and determined using multiples of this 4px unit. This method not only ensured visual cohesiveness but also facilitated predictability and ease in the development phase, promoting a uniform user experience across all elements and sections.
5. Buttons - Carbon Design
In refining the user interface, I have embraced the Carbon Design System for the button design. This choice aligns with the system’s strong reputation for intuitive and visually compelling interfaces. The button now exhibits a refined, modern aesthetic consistent with the established design language. Significantly, I modified the button’s color scheme to harmonize with my unique color palette, ensuring a seamless integration while adhering to Carbon’s standards of accessibility and usability.
6. Shadows
In the design process, shadows were crucial in adding depth and visual interest to the interface elements. I utilized the plugin “Beautiful Shadows.” It allowed me to craft subtle yet impactful shadow treatments, enhancing the overall UI’s depth and making elements more distinguishable. By leveraging this plugin, I ensured the interface had a modern, layered appearance, elevating the overall user experience.
7. System feedback
The system feedback was integral for intuitive user interaction in the design process. For text field inputs, I introduced icons to offer feedback, eliminating sole reliance on colors. This is especially beneficial for users with color vision deficiencies. Additionally, I included notes next to input fields, which appear when issues arise, giving users clear, actionable insights to address any discrepancies.
8. Components
During the design process, I meticulously crafted each component using Figma. Every element, from buttons to galleries, was developed with precision and consistency. I established a style guideline in Figma, which ensured both reusability across the project and a clear framework for potential future iterations. The detailed and organized components in my Figma file underscore the depth and thoroughness of my work.
The final design
Tropica Tica design
The handoff to the developer is a critical phase in ensuring the design’s integrity is maintained during the development process. After finalizing the designs in Figma, I prepared a comprehensive package for the developer in charge. This package included all the assets, style guidelines, interactive prototypes, and detailed specifications for each component, including dimensions, colors, typography, and spacing.
Using Figma’s collaboration features, I also set up interactive design views, enabling the developer to inspect elements, retrieve CSS values, and understand animations or transitions I envisioned. Throughout the handoff, I maintained open communication, addressing any queries and providing clarifications to ensure a smooth transition. The goal was to facilitate a seamless design integration into the development environment, minimizing discrepancies and ensuring the final product aligns closely with the original design vision.
Desktop view
The emphasis was on desktop since the data revealed that 77% of the site users come from this type of device. Still, that didn’t mean I missed the other breakpoints, but for purposes of my portfolio, I’m concentrating on this breakpoint.
Tablet and mobile
As I mentioned, the primary traffic of the site comes from the desktop breakpoint. Still, I wanted to show here the other 23% with examples. For mobile, it was 19%, and for tablet, 4% for tablet.
The handoff
Design ready for the developer
The handoff to the developer is critical in ensuring the design’s integrity is maintained during the development process. After finalizing the designs in Figma, I prepared a comprehensive package for the developer in charge. This package included all the assets, style guidelines, interactive prototypes, and detailed specifications for each component, including dimensions, colors, typography, and spacing.
Using Figma’s collaboration features, I also set up interactive design views, enabling the developer to inspect elements, retrieve CSS values, and understand animations or transitions I envisioned. Throughout the handoff, I maintained open communication, addressing any queries and providing clarifications to ensure a smooth transition. The goal was to facilitate a seamless design integration into the development environment, minimizing discrepancies and ensuring the final product aligns closely with the original design vision.
Artist App UX Design Case Study | Conexart
Overview
Conexart: An artist app design
In my role on the Conexart project, I was integral in developing a user-centric prototype for job applications within the app. My tasks involved deep user research, designing wireframes and interactive prototypes, and collaborating closely with developers and new designers to ensure a cohesive and intuitive design. I actively engaged with stakeholders, incorporating their feedback to align the product with user needs and business goals. Post-launch, I refined the app based on user feedback and performance metrics, ensuring it met the project owner’s vision and real-world demands.
Client: Conexart. Users: Artists (musicians, painters, cosplayers, poets, dancers, actors, sculptors. photographers, writers, illustrators, digital artists, etc.) Timeline: March 2023 - June 2023. My role: UX designer. Team: One UX lead, two Product Designers (I was one), a research team, one Senior Project Manager, and two Senior Developers. Tool: Figma, Optimal Workshop, DALL·E 3, Photoshop Beta.
Problem
Due to the pandemic’s unprecedented impact, most artists have lost employment opportunities. In the aftermath, these artists face significant challenges in securing new job opportunities.
Solution
We developed an app designed to offer job opportunities. Its simple and intuitive interface ensures artists can effortlessly apply and find suitable roles.
the process
Phase one
In the content below, I’ll only list the deliverables I was in charge of working on
- Research and interview with the Product Owner.
- Personas.
- Benchmark
- Desired Information Architecture (alpha)
1. Research & Interview with the Product Owner
We interviewed the product owner, capturing crucial insights and comprehending their vision. Additionally, our research team conducted a study on the pandemic’s impact, yielding several alarming results.
After posing several strategic questions to the product owner via Teams call, I understood the product better, distinguishing between essential and desired features. This insight allowed me to craft an initial paper prototype with sections including home, jobs, publish, calendar, profile, notifications, and search.
I developed a swift paper prototype to present to the client, ensuring it was straightforward to comprehend. This approach was instrumental in demonstrating that we were on the right track, providing a clear and tangible representation of our progress.
Pandemic
Findings
Our research team conducted a study on the pandemic's impact, yielding several alarming results
Event cancellations
Live events canceled or postponed and 70% of art venues closing temporarily in 2020..
Economic Hardship
Freelancers experiencing contract disruptions
Mental health
Reporting increased anxiety and stress
I conducted in-depth interviews with 15 artists to understand their unique circumstances and needs comprehensively. This valuable insight enabled me to create well-defined user personas, reflecting the diverse experiences and preferences within the artist community.
2. User personas
To thoroughly understand the diverse needs of our users, I crafted three distinct user personas. This process involved analyzing various user characteristics, preferences, and behaviors. Each persona represented a unique segment of our target audience, providing valuable insights into their requirements and expectations.
3. Benchmark
The client requested a competitive analysis segmented by features.
Conclusions
User Collaboration is a Gap
Fiverr and Upwork, despite being major platforms, lack features for user collaboration, suggesting a potential area for differentiation. Providing robust tools for user collaboration could fill this market gap and offer a competitive advantage.
Financial Consultancy is Rarely Offered
None of the platforms, except for Fiverr, offer financial consultancy services. This presents an opportunity to provide unique value by integrating financial guidance for freelancers and gig workers, which could be a strong selling point for the platform.
Opportunity for Enhanced Hiring Processes:
While most platforms have a functional hiring process, there's an indication that this feature could be improved, especially with the "Helping Partner" platform. Streamlining the hiring process and making it more user-friendly could significantly improve user satisfaction and platform usability.
4. Desired Information Architecture (alpha)
We meticulously crafted a complete information architecture by Drawing on the insights from in-depth research, strategic interviews with the product owner, and detailed benchmark analysis. This architecture was enriched with all the desired features, ensuring a robust foundation tailored to fulfill our users’ comprehensive needs and preferences.
5. Conversation with the development team.
Before working on the wireframes, we checked the IA with the dev team. They talked about their concerns regarding the amount of content, and it would take a lot of money and budget, so the content in phase two was scratched, so we had to redo and simplify the project.
the process
Phase two
- Card Sorting & New Information architecture (beta)
- Userflows
- Wireframes
- Prototype
- Testing and refining
- Lessons learned
1. Card Sorting & New Information Architecture (beta)
In this phase, I developed an initial information architecture “alpha” using insights from the interview. Subsequently, I conducted card sorting via the Optical Workshop tool. The results informed refinements, creating the “beta” version of the information architecture.
Card Sorting Matrix Results
Utilizing the card sorting technique, we gathered valuable insights from participants, helping us discern patterns and preferences. This methodological approach facilitated the identification of a potential initial structure, providing a foundational blueprint for our content organization and user navigation.
New IA
After talking with the dev team, they told us a lot of features listed on the phase one desired IA weren’t possible, so we updated it to this final one.
2. Userflows
This initial user flow depicts a comprehensive navigational blueprint, allowing seamless access to all areas of the app through the newly structured information architecture.
This second user flow is tailored for job-seeking users. It guides them from utilizing the search bar to discover opportunities to apply for positions that pique their interest with a streamlined, intuitive process.
3. Medium Fidelity Wireframes
The wireframes I designed are the blueprint for our digital interface, capturing every user interaction and visual layout. As our design’s skeletal structure, they detail the user’s journey, ensuring intuitive navigation. Each screen is thoughtfully laid out, balancing aesthetics with functionality. Through feedback and iterations, these wireframes were refined to prioritize user needs, acting as a strategic guide for an engaging and seamless user experience.
4. The Prototype
The initial prototype was crafted to serve as a clear demonstration of the user’s journey. It outlines the intuitive steps and interactions a user would experience while searching for a job, emphasizing a straightforward and user-friendly flow.
5. Testing and Refining
5
Remote tests over a zoom call
4
In-person sessions
Objective
Measure the success rate of the flow to find a job.
User
I performed these tests in real future users such as musicians and artists in general.
Think aloud
Testers were required to speak during the test.
Process recorded
I've recorded the video calls and I took notes on the on-site tests.
A recurrent pattern emerged: many users initially sought a job application feature on the bottom bar. However, the jobs icon was placed on the top bar, leading to confusion and hesitancy.
Armed with this insight, I made a strategic design decision: I relocated the jobs icon to a more intuitive position, placing it as the second option on the bottom bar. The results were palpable. In a subsequent round of testing, this tweak alone bolstered the success rate by a significant 30%.
6. Lessons Learned
Balancing Comprehensive Features with Simplicity
Striking a balance between a comprehensive feature set and a simple, user-friendly design is vital, especially under tight deadlines.
Iterative Design and Rapid Prototyping
Embracing an agile approach and being open to iterative improvements based on feedback can significantly enhance the development process.
Market Gaps
onducting thorough market research and identifying unmet needs can provide a competitive edge and create unique selling points.
Lessons learned
1. Understanding User Needs is Crucial
- Insight: Deep user research and interviews were essential in understanding the challenges artists faced during the pandemic, such as job losses and mental health issues.
- Lesson: Prioritizing user needs and understanding their unique challenges can lead to more effective and empathetic product design.
2. Flexibility in Design and Business Model
- Insight: Adjusting the payment and registration model to lower upfront costs led to a significant increase in user registration.
- Lesson: Being adaptable in both design and business strategy is key to meeting user expectations and improving engagement.
3. The Importance of Collaborative Teamwork
- Insight: Collaboration across different roles, including UX designers, developers, and project managers, was fundamental for the consistent and intuitive design of Conexart.
- Lesson: Effective teamwork and leveraging diverse expertise contribute to the success of complex projects.
4. Balancing Comprehensive Features with Simplicity
- Insight: While the app aimed to be feature-rich, there was also a need to simplify the MVP to meet tight deadlines.
- Lesson: Striking a balance between a comprehensive feature set and a simple, user-friendly design is vital, especially under tight deadlines.
5. Iterative Design and Rapid Prototyping
- Insight: The team used agile methodologies and iterative feedback loops for quick prototyping.
- Lesson: Embracing an agile approach and being open to iterative improvements based on feedback can significantly enhance the development process.
6. Identifying and Filling Market Gaps
- Insight: The benchmarking process revealed gaps in the market, such as the need for financial consultancy for artists and user collaboration features.
- Lesson: Conducting thorough market research and identifying unmet needs can provide a competitive edge and create unique selling points.
7. Prioritizing User Safety and Trust
- Insight: The importance of a fortified payment system was recognized as crucial for user trust.
- Lesson: Ensuring user safety, especially in online transactions, is essential in building trust and credibility.
Extra: Promo video for sponsorship
To resonate with the audience, the client entrusted me with crafting a video that narrates an artist’s journey. Given full creative freedom, I centered the story around the challenges faced by artists during the pandemic, many of whom lost their livelihoods. The narrative highlights how the Conexart app emerges as a beacon of hope for these artists, offering them new opportunities.
I diligently crafted all assets using Midjourney for this video, ensuring character consistency throughout. I lent my voice to the narration and expertly composed the accompanying music using Logic Pro.
Storyboard
Contact Center UX Design Case Study | POM Digital Product
POM - Website
UI / UX - Digital Product
Overview
A collection company
Its offer is backed by an extensive track record, providing solutions in credit portfolio management, which streamline cash recovery processes and strengthen corporate finances.
Client: POM. Users: POM's clients. Timeline: May 2023 - September 2023. My role: UX and UI solo designer. Team: solo project. Tool: Figma.
Problem
POM needs to grow in the collection market in Costa Rica and win over their competitors. The problem was they needed a solid digital presence to gain potential customer trust.
Solution
Creation of an attractive, user-friendly, and accessible website so that they could earn their potential customers’ trust. Also, a brand refreshment.
Responsive
All of my websites use responsive web design principles. This ensures your online presence remains stunning and user-friendly across all devices, from desktops to smartphones. With fluid layouts, flexible images, and tailored styling, your website will captivate audiences seamlessly, providing an optimal experience on every screen size.
CMS
I exclusively leverage WordPress, empowering clients to edit their websites using a user-friendly content management system effortlessly. Your website remains controlled, ensuring easy updates and content management without technical hassle.
SEO
I consistently integrate fundamental SEO parameters, granting my clients access to essential metrics through Google Analytics. This empowers them to analyze detailed reports, make informed decisions, and rapidly enhance their website's traffic.
Mobile
Explore the mobile view of our website design in action. Witness how our design seamlessly adapts to mobile devices, ensuring a captivating and user-friendly experience.
Tagline
Analyzing Competitors:
I conducted five user interviews with some clients they currently have. My idea was to catch what these customers thought about the competitors. I wanted to get insights into what the clients felt the competitors were doing well, what they thought they would need in a site like this, and what could have been improved.
Here are a couple of examples of POM’s main competitors, with the feedback I got from the interviews:
Gesel:
- It needs to be clarified what applies to Costa Rica.
- They dislike that everything is on one page.
- The colors look like the “INS” Costarrican institution.
- There is overlapping text at the top right navigation bar.
- White texts are not legible with a light green background.
- Some texts are cut in ways impossible to read such as: “Distingu – e”
- There are modules with a lot of info in it making them difficult to read.
Gestionadora de crédito:
- It looks outdated.
- The content feels boring.
- It doesn’t give them confidence in a site like that. It seems like a scam.
The Work
Based on the insights gathered from the user interviews, I decided to create an easy-to-use site with a modern look.
Step 1
Sitemap
First, I started with a quick sitemap to have a better understanding of the sections it should have.
Step 2
Userflow
Then, focusing on the user contacting POM for their services, I created this user flow to see the logic behind that scenario.
Step 3
Low-fidelity wireframes
I made this to have a quick reference for the client. The problem was that the client needed to understand this purpose and started to be concerned because it was vague since they weren’t designers.
Step 4
Style Guideline
Since the client needed a high-fidelity prototype to understand the design, I created these styles to make the final UI easier and better organized. Since I’m also a graphic designer, I also did a refreshment of their logo.
Step 5
High-fidelity wireframes
To help the client understand the look and feel, I created this prototype. This also helped me test my design and think about developing the site.
From Low Fidelity to High Fidelity
Logo before and after
Conclusion and lessons learned:
It’s crucial to consistently reflect on past experiences and lessons as a UI/UX designer to ensure continuous growth.
Effective communication
You need to understand your clients to help them comprehend your vision. The idea is to adapt to change and their design level so you can create the best design solution for them.
Accessibility
Accessibility is the key for UI designers. That's why I focused my design on AA compliance. A challenge was to convince the client to let me change things to reach this, but it was a win in the end.