Slides Customization Enrichment


Incorporating AI-driven enhancements to DrLambda.ai's slide customization feature, facilitating a more intuitive and personalized user experience when building presentations.

My Role

Product Designer

User Research, Information Architecture, Usability Testing, Accessibility Notation, Interface Design, Prototyping


Time

Oct 2023 - Dec 2023


Team

1 Project Manager
5 UX Designer


Tools

Figma, Notion, Pen & Paper






CONTEXT


What does DrLambda do?
DrLambda.ai is a versatile knowledge remix engine designed to easily convert PDFs, webpages, and YouTube content into various preferred formats. 
Dr. Lambda’s slides creation feature is particularly useful for users including researchers, educators, students, consultants, and office professionals, offering a convenient solution for content transformation.

What are the problems?

Despite having advanced AI-generated text content, the current slide templates from Dr. Lambda.ai lack sophistication and customization in design. 

Additionally, with only two templates available, users face restricted options for visually enhancing their slides, indicating a need for a broader range of more sophisticated and customizable design options.








CONTEXT

Team Objectives

Our goal is to enable users to customize slide templates based on their individual preferences and to facilitate the sharing of these personalized designs within the community. 

In addition, we also aimed at ensuring users’ creation process for these slide templates is in harmony with the users' mental models, essentially making the design intuitive and user-friendly.
My Role
As a UX Researcher/ Designer, I take the lead the interface design process and established a design system that spearheaded among all features provided by Dr Lambda.ai. 

During the research phase, I conducted in-depth user research with potential users, designed and tested the prototypes to optimize the user experience and ensure seamless integration with existing platforms.






CONTEXT

Solution Overview
We revamped the current visual design, and proposed a smoother user experience leveraging artificial intelligence to improve the slide customization capabilities of DrLambda.ai, resulting in an enhanced user experience when developing presentations.








CONTEXT


Project Timeline








RESEARCH

Find Problems
01.
What problems do people have for the current website?


To answer this question, we chose to send out questionnaires using google forms to collect users feedback for current website. This method gives us a general overview of problems that users might have.

02.
What are our users’ exact needs?


Considering the user need of different stakeholders, we want to dive into their daily scenario. Therefore, we chose to conduct the in-depth interview to find out the pain-points.

03.
What is a good help page design?


We analyzed 26 public access help pages encompassing search engines, collaborative digital platforms, and higher education institutions to uncover the best practices and areas for improvement.




RESEARCH  OVERVIEW



01
RESEARCH BREAKDOWN

Quantitative Research - 44 Questionnaire responses

In the questionnaire, we ask questions regarding the user's preferences for device selection, frequency of use, and opinions on the current design and features. More importantly, gathering general feedback on which sections of the page are used most will help us prioritize small sections in future redesign.

Here are the summarized results from the questionnaire:



75%

Users often navigates the site through the “Search” function.
.

63.7%

Users think the visual design can be improved.

52.3%

Users find it difficult to locate desired information.

86.4%

Users access the page through Laptops.


Sample questions we asked:





Summarized Insights learned from the Questionnaire:
01.
Search Feature Enhancement


Enhance the functionality and visibility of the ‘Search’ feature.
02.
Information Hierarchy Redesign


Reorganize the IA and prioritize sections based on questionnaire results.
03.
Visual design Improvement


Redesign the visual of the whole website and align with NYU color system 







02
RESEARCH BREAKDOWN

Qualitative Research - 20 User Interviews

In summary, we interviewed various stakeholders to identify their specific needs. We asked detailed questions related to the search function and the current information architecture to receive in-depth feedbacks from the users.


11

students

Students are the main user who navigate through the help website for resources .
.

4

Administrators

Every administrator updates their own content to the website themselves.

3

Residents

Residents work in different labs and introduce the lab to student on the website.

2

Faculties
Faculties link the resources and information from the website to their syllabus.





Summarized Design Actions based on our interview notes:

Enhance Information Hierarchy


01. Information Architecture
There are a lot of repetitive sub-tabs under each section. The side menu is cluttered with too many links, making the navigation complex and difficult to use.

02. Layout and Hierarchy
The current layout design making it difficult for users to discern the importance and organization of content.

Improve
User Experience


03. Visual Designs
The help page layout is attractive and not user-friendly. 



04. Terminology Issues
The terminology of sections is not accurate.
Enrich
Functionality


05. Search Bar
Students find it challenging to access the search bar.



06. Resources
For first year students, it would be helpful to have a better designed floor map.







RESEARCH SYNTHESIS


Define Problems 
Based on our research insights, we used the HMW statement to help us clarify our direction and actions. 
We have two HMW statements as they focused on different directions.

01. How might we optimize the ITP/IMA help page to  improve users' information navigation efficiency and quickly get what they want?

02. How might we  enhance the accessibility in design to ensure inclusivity for all users?



UX DESIGN: INFORMATION ARCHITECTURE


Enhance Information Hierarchy
We reorganized the new Information Architecture, removed repetitive sub-tabs, and rephrased the terminology used for different sections to ensure clarity and efficiency for users.


Current Information Architecture

New Information Architecture




UX DESIGN: ACCESSIBILITY NOTATION


Digital Accessibility Approach
Our design focus

With guidance from Jodi Arlyn Goldberg, we redesigned with a focus on accessibility. 6 major accessibility issues were being identified through the consultation with the NYU digital accessibility team. To address the current accessibility issues, we delved into the problems themselves to find a coordinated solution.

NYU web accessibility policy

NYU has adopted the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) 2.0, Level AA as its standard for digital accessibility.


Accessibility Issues

Missing alt text





Embedded links in the header


Color contrast problem





Pdfs should be accessible pdfs

Heading rank problem





Tab order should match the visual order









DESIGN PROCESS


Design and Validation


We created different types of wireframes and conducted a small scale usability testing to validate the most efficient user flow, after we selected our wireframes, I led the interface design process and established a design system that proposes a more efficient workflow. 



DESIGN PROCESS

Wireframes

We reached out to 10 interviewees from the user interview process. 
Then, we conducted usability testing in-person to observe how our users interacted with the working low-fidelity prototypes.

After the usability testing, we decided to choose option 1 because it presents all the information efficiently in one place, and the length of the website is the shortest, which helps the users navigate quickly compared to the other two options.



  Option 1  




Option 2

Option 3





Design Systems

I created the design systems to align with other NYU Tisch websites. The font and color choices mainly follow the NYU design system, and the format is learned from Microsoft Teams UI.






DESIGN DELIVERABLES


Final Design deliverables
In December, our team pitched this redesign proposal to our product manager Scott, the pitch is very successful, and we turned this volunteer project into a on-campus position for further improvements and implementations.




DESIGN DELIVERABLES

Final Design Overview