Multimedia Resource Library

Scope: UX Research and Testing, Journey Mapping, UX/UI Design, Prototyping
Tools: Figma, JIRA, Teams (Usability Testing Sessions)

The Company & The Challenge

Wisetail is a learning and development platform; their goal is to support and strengthen their clients' learners to ensure that their brand promise is delivered to their people and the world. In 2023, Wisetail acquired PlayerLync, a competitor in the industry whose strengths included a succesful multimedia library and offline access to content.

Wisetail faced a challenge in offering tools to help admins organize and provide easy access to a vast array of multimedia resources such as videos, documents, links, and presentations within their platform. This was a big obstacle to leadership's goal of positioning the company as a true learning management platform, a one-stop shop to train, assess, and empower clients' workforces. To this end, we needed to develop a multimedia resource library accessible via both web and a new mobile app, allowing administrators to efficiently organize media assets and enabling learners to easily discover and access relevant content without navigating through learning modules.

The goal was to use PlayerLync's capabilities as a foundation for a product that would set Wisetail apart in the landscape as a truly comprehensive solution for learning and developent needs. And because of leadership timeline, we needed to deliver a fully functional MVP in 5 months.

The Team & My Role

The project team consisted of frontend and backend developers, QA engineers, product managers, and a lead UX/UI designer, all working collaboratively to deliver a seamless user experience. As the lead UX/UI designer, my responsibilities included:

• Meeting with the director of engineering and the product manager from PlayerLync, as well as the Wisetail engineering lead to set up the groundwork, and deliver prelimenrary designs and timeline for the project.
• Conducting stakeholder interviews and user research to understand the needs and pain points of administrators and learners regarding media management and accessibility.
• Collaborating closely with product managers and developers to define user requirements and translate them into intuitive design solutions.
• Designing wireframes, interactive prototypes, and high-fidelity UI designs for web and mobile platforms.
• Conducting usability testing sessions to validate design decisions and gather feedback for iterative improvements.

Design Process & Testing

The design process was structured to ensure the multimedia resource library met the usability and functionality requirements of administrators and learners alike:

• Research & Discovery: Conducted interviews and usability studies to gather insights into user preferences, behaviors, and challenges related to media consumption and management within client's LMSs.
• Conceptualization & Prototyping: Developed initial wireframes and prototypes to explore different organizational structures, search functionalities, and content presentation methods. Iteratively refined designs based on stakeholder feedback and usability testing results.
• Iterative Design: Focused on creating a user-friendly interface that allows administrators to efficiently upload, tag, categorize, and manage media assets, while ensuring learners can easily search, filter, and access relevant content based on their needs.
• Visual Design & Implementation: Established a cohesive visual identity and design system that aligned with the client's brand guidelines and enhanced usability across both web and mobile platforms.

Outcome & Learnings

The development and deployment of the Media Library resulted in significant improvements in accessibility and user satisfaction:

• Streamlined Access: Learners could quickly find and access relevant media content without navigating through entire learning modules, enhancing learning efficiency and engagement.
• Efficient Administration: Administrators could efficiently organize and manage media assets, ensuring content was updated, tagged appropriately, and readily available for learning purposes.
• Positive User Feedback: Usability testing and feedback sessions indicated high satisfaction with the Media Library's intuitive design, robust search capabilities, and seamless integration with the existing LMS.

Key Learnings from the project include:

• The importance of designing for both administrators and end-users to ensure a balanced and effective solution.
• Iterative testing and refinement are crucial for aligning design decisions with user needs and improving overall usability.
• Implementing a scalable and flexible architecture is essential to accommodate future growth and evolving user requirements in corporate learning environments.

In conclusion, the Media Library project not only addressed the client's challenge of organizing and accessing multimedia resources effectively but also contributed to enhancing the overall learning experience within corporate settings.

Data Visualization Dashboard

Scope: UX Research and Testing, Journey Mapping, UX/UI Design, Prototyping
Tools: Figma, Invision, Highcharts, JIRA, Teams (Usability Testing Sessions)

The Company & The Challenge

Wisetail is a learning and development platform; their goal is to support and strengthen their clients' learners to ensure that their brand promise is delivered to their people and the world. In addition to offering a host of content building and authoring tools, they also provide learning insights that aim to empower clients to make data-driven decisions.

Wisetail faced a challenge in efficiently managing and visualizing the extensive data generated by their Learning Management Platform. This included student performance metrics, course popularity trends, and user engagement analytics. The goal was to create a comprehensive dashboard that would enable administrators, especially non-technical ones, to glean actionable insights from the data to improve learning outcomes and operational efficiency.

The Team & My Role

The project brought together a multidisciplinary team comprising frontend and backend developers, data engineers, QA engineers, product managers, and a lead UX/UI designer. As the lead UX/UI designer, my role involved:

• Conducting stakeholder interviews and user research to understand the needs and pain points of different user groups.
• Collaborating closely with data engineers and developers to ensure the feasibility and scalability of data visualization solutions.
• Designing wireframes, prototypes, and the overall user interface of the dashboard.
• Conducting usability testing and gathering feedback iteratively to refine the design.

Design Process & Testing

The design process followed a structured approach to ensure the dashboard was intuitive, informative, and visually appealing:

• Research & Discovery: Conducted interviews with stakeholders to define user personas and gather requirements.
• Conceptualization: Created initial wireframes and low-fidelity prototypes to explore different layout and data visualization options.
• Design Iteration: Incorporated feedback from stakeholders and conducted usability testing sessions with representative users to refine the dashboard design.
• Visual Design: Developed a cohesive visual style guide and UI components library to maintain consistency across the dashboard.

Outcome & Learnings

The data visualization dashboard successfully addressed Wisetail's challenges and delivered several key outcomes:

• Improved Data Accessibility: Users could easily access and interpret complex data through interactive charts, graphs, and customizable reports.
• Enhanced Decision-Making: Administrators and educators could make data-driven decisions to optimize course offerings, student support strategies, and resource allocation.
• Positive User Feedback: User testing sessions indicated high satisfaction with the dashboard's usability and effectiveness in aiding decision-making processes.

Learnings from the project included:

• The importance of advocating for the best design and practices to stakeholders with different points of views and concerns. I experienced healthy tension with an engineer who had strong opinions about data, but was resistant to user experience concerns. This was a learning experience that reinforced the value of adapting your message to your audience, who may not speak the language of design.
• The importance of collaboration across disciplines in creating effective data visualization solutions.
• Iterative design and testing are crucial for refining complex dashboards to meet diverse user needs.
• Balancing data depth with simplicity in presentation is key to ensuring usability and adoption among non-technical users, who were the main user demographic for this project.

In conclusion, the data visualization dashboard for the LMS met and exceeded expectations for clients by providing a robust tool for leveraging data insights to enhance educational outcomes and operational efficiencies.

IRA Financial App

Scope: UX Research, Journey Mapping, UX/UI Design
Tools: Adobe XD

The Company & The Challenge

IRA Financial is financial services company that offers self-directed retirement structures. They have a large digital presence and produce a wealth of content on social media. Their app allows clients to easily establish plans and keep up with the legal requirements of their accounts.

Up until this point, the company had been using third-party sofware to manage client accounts. Although it worked well enough, it had ease-of-use issues we couldn't resolve because we had no access; additionally, it was not the sleek tool the owner wanted associated with the company. As part of the rebranding and update effort, he wanted to move the company into the fintech arena and release a company app. The concept was simple--it was going to be a place branded by IRA Financial where clients could open their desired account, manage and submit all documents related to it, and check their balance. In later versions, we continued to add feautures and refine the design.

The Team & My Role

The team consisted of the owner and a lead specialist who both understood the business, tax law, and all the content that would be needed for the app, and a development team in India. The owner and specialist made rough user flows for both iterations; my role was to refine them and work with the team to translate them into the app, as well as design the UI and UX. I would also continue updating the app as we worked on new features. For the second iteration, a graphic designer joined us who would design illustrations and icons as needed.

First Iteration Design & Feedback

Working closely with the lead specialist, we developed user flows for the first interation of the app. This iteration was designed to tackle the main challenge of the project, giving clients a simple platform clearly branded by the company handling their account to see their balance and take any action needed related to maintaining their account. It was launched in 2019. Clients appreciated the new ease of use and having their accounts handled all in one platform, but reported dissatisfaction with the app's lack of notifications an interaction. This feedback was passed along to the developers to resolve.

Second Iteration Design & COVID-19 Delay

The second interation had three goals: one, addressing a resurfacing challenge for the company, which was giving clients a simple way of knowing which account they need to establish; two, introducing the robo-investing feature, giving clients the option to invest in traditional assets in addition to alternative assets all from one platform; three, lining up with branding updates we had implmented on the site and company materials. Due to COVID-19's impact on India, this iteration's develpment was delayed as has not been launched as of January 2022. As a result, we have not been able to get feedback nor integrate further improvements.

Learnings

Due to the depth of my involvement with the company's websites, it was a challenge having my involvement limited to design for this project. Ordinarily, this would not have been a problem, but it was made difficult by communication roadblocks that, although I continuously tried to resolve and spoke to a higher-up about, were never improved. I asked to be more immediately involved in the contact with the development team and have access to their staging area so I could improve not only the look, but also the feel of the app. I would have been able to test the experience more, which would have allowed be to address client feedback more effectively. Although this was encouraged by the higher-up, there was very little in the way of project organization in place for it to come about in a meaningful way.

Nevertheless, the experience was incredibly formative. I was challenged to think for a different medium and plan for user flows in a way I hadn't before, having never designed for an app. Being the only designer and having no experience doing this kind of project without support from more experienced professionals was scary, but also awesome. I undoubtedly had to find design solutions to many problems that in a more robust design deparment I would have already had solutions to or more guidance to avoid. The experience opened up doors into app development I'm excited to walk though as I continue to grow in my career.

IRA Financial Websites

Scope: Rebrand, Information Architecture, Wireframing, Design, Site Transfer, Development
Tools: Adobe: XD (later Figma), Illustrator, Photoshop; WordPress, HTML, CSS, JS

The Company & The Challenge

IRA Financial is financial services company that offers self-directed retirement structures. They have a large digital presence and produce a wealth of content on social media. Plans can be established using the IRA Financial app.

Although the company was retaining clients and the primary website was doing well, the owner felt their existing brand did not reflect his vision or the values of the company, and addtionally was not unified accross their properties. They have two main websites (two companies under the IRA Financial umbrella) and many other smaller websites. The websites were not optimized and were on an outdated platform, making them difficult to update and integrate new useful feautures. Their wealth of content had capitalized on keywords, but it had led to an overwhelming navigation menu and many pages with little content. Finally, they had a Google Ads campaing that needed to be refined and updated.

The Team & My Role

At first, the digital team consisted of an IT Specialist who wore many hats, a writer who produced all the blog and Forbes articles with the owner’s help, and me. Since then, it has grown into a bigger team. My initial role was to rebrand the company to align with owner’s vision, ensuring brand and messaging consistency, and redesign the landing pages and websites, aiming to improve content structure and navigation. I also architected the websites’ content move to WordPress, including optimization and restructure, and developing the sites.

Research & Pain Points

I performed an analysis of the existing main websites as a user attempting to find information and as a designer looking for content structure, functional, and aesthetic improvements that could be made. I spoke to the owner and head specialists about what the clients liked, what they tended to be confused about, and what they felt was missing on the site or was difficult to find. I reviewed competitor websites and discussed them with the owner to gain insight about what was succesful in the industry and what set his business apart.

I learned that part of the websites' success had come from an SEO company that had used practices that were now being penalized by Google. Fixing this was a priority. Clients reportedly often found the content difficult to navigate, and there seemed to be a lot of confusion among them regarding the company’s main purpose and their services, the details and pricing of the plans, and their digital presence. And although the company had very good testimonials, the look of the site did not inspire confidence despite the generally positive experiences of clients establishing and maintaining plans with them. Additionally, their Google Ads landing pages would need to be revamped to further help traffic and sales.

Possible Solutions & Final Designs

Working closely with the owner and head specialist, I first created a brand package and style guide for the company, which would inform the redesign of the websites. I proposed several ideas for a new navigation and site map that could be more intuitive for users without sacrificing the findability of site content, and started to adress some SEO issues. I then proposed new home page designs that focused on the aspects of the company that were most important for users and company identity, as well as designs for the rest of the site.

Being a small company, we didn't have many resources to perform rigorous testing; however, we did that have the ability to push out changes quickly and test how clients responded to them, improving as we went along by paying close attention to feedback from both specialists and clients. We also got useful data from the Google Ads campaign, allowing us to hone in on the most effective landing page templates and calls to action. I continue to work closely with the owner and team to improve the site and update it needed.

Results, Learnings, & Continued Improvement

Our efforts to better communicate company values, improve user experience, revamp SEO, produce more and better content, and integrate Google Ad campaigns resulted in more conversions and improved client experience and sales. We had a lot of feedback that the site looked great, although we got some good notes about pain points in the content structure, which we continue to improve. One of the most important lessons I learned had to do with the website move--the the IT and I were novices when it came to the SEO details of migrating large websites, which resulted in a temporary loss of traffic. It was later regained, but it was discouraging to perceive our hard work as actually damaging traffic in the short term.

Being an in-house designer, I'm fortunate to be able to continue to make improvements to a project I am very familiar with. It's also been amazing to bring in new people to the team as we continue to grow. The project as such is never really "complete"--it's in a constant state of revision, which can be frustrating in a small company with no established process, but also extremely rewarding. I've really had to learn to iterate quickly and be comfortable publishings things that are not perfect under tight dealines.

Pension Investors Websites

Scope: Rebrand, Information Architecture, Wireframing, Design, Development
Tools: Adobe: XD, Illustrator; WordPress, HTML, CSS

The Company

Pension Investors is is a pension plan administrator founded in 1970. Originally one company with an office in Hollywood, FL and another in Orlando, FL, they split into two companies with different branding and webistes. They were then reunited in 2020 when they were acquired.

The Challenge

Time constraint played a big role in this project, as I needed to complete these tasks fairly quickly. The companies needed to be brought under one unified brand, while not sacrificing the recognizability they had gained in their respective local markets. Their websites needed to be designed to align with this new branding, while keeping their identities to a small extent. They would both need to be optimized for search engines, especially the Hollywood website.

One shared blog site would need to be made to serve both websites in an effort by the company to increase their interaction with their clients and improve SEO. The Hollywood website had not been updated and was on an outdated platform so it would need to be brought over into WordPress, where the other website was built. Google Analytics would need to be integrated and a Google Ads campaigns would need to be established.

The Team & My Role

I would be working with contacts from both companies to get any information I needed for the redesign and development of both websites, in addition to the move to WordPress for the Hollywood website. I would then continue updating as needed.

Research

With help from the contact points of both companies, I gained informaton about what needed to be included in the redesign, what they wanted removed, and what they wanted changed. For instance, it was important that I give easy access to the third party company they used to provide their clients with document uploads. They also had a lot of outdated content on their site they wanted edited or removed. Additionally, I asked them questions about what they and their clients currently had trouble doing and what they appreciated most about the sites to make sure I improved the experience and didn't remove important information and features.

Both companies are small with a loyal client base. Clients and specialists didn't seem to have much trouble navigating content on the Orlando website and generally found it easy to use. On the other hand, althouth the Hollywood served the purpose of their clients, there was a lot of room for structural and visual improvements bacuse it hadn't been updated in so long.

Possible Solutions & Final Designs

I buillt wireframes for the new proposed navigations and layouts of both websites. These were workshopped and improved by the specialists in both companies. I proposed layouts for every page and had those workshopped as well. After the sites were live, I continued making improvements as the contact points for both companies gave me both their and their client's feedback.

Learnings

It was valuable to get experience unifying the distinct identities of two companies that had been seperate and had developed their unique values and methods to complete projects. Speaking to both sets of contacts and finding a way to achieve a unified brand while also being mindful of the ways in which the companies differed was an interesting challenge. Given more time, I would have further developed branding as I feel this part of the project was lacking and needed to be decided on very quickly. This was a much smaller project compared to the previous two, but presented some similar challenges to the IRA Financial websites in terms of rebranding and unifying multiple sites, along with optimizing them.