Naomi Ling

A Yale student reimagining human-centered design, particularly in startups and Edtech. 


Currently · Co President of Design at Yale
Currently ·  Lead UI/UX Researcher @ dbrand x YUCG
Summer 2025 · Lead UI/UX Designer @ Dayli, an AI-powered startup that simplifies group scheduling 
Summer 2025 · Product Management Intern @ Yale University Press, conducting web usability testing 
Spring 2025 · Project Designer @ Yale Intramural Sports x Design at Yale
Spring 2024 · Cram Presentation Designer (<10% acceptance) @ Fiveable, which has helped millions of students study for AP exams 



Email · LinkedIn · Instagram
© 2025 NYL STUDIOS.  MADE WITH 💌 & CHAI.
Back

dbrand: Mobile + Web Case Study


Overview

My Role: Lead Frontend Designer

Duration: September 2025 — Present 

Tools: Figma

The Challenge: To redesign the mobile and web experience for a tech accessory manufacturer and streamline the skin purchasing process. 


I. Understanding Research Goals 

At the beginning our project, YUCG and I traveled to Toronto, Canada to visit the factory of our client, dbrand, and learn about their production processes. The frontend team specifically interviewed several dbrand employeees to understand more about their current web/mobile design and needs. 

We took away four overall goals for this project:
  1. Conduct web usability tests with 50 random people who are unfamiliar with dbrand.
  2. Based on feedback, optimize and streamline the current skin purchasing flow. 
  3. Create low-fidelity prototypes for the homepage, skins discovery page, and individual skins page. 
  4. Create a low-fidelity prototype for a potential B2B custom skins portal for other companies. 

II. Defining Research Questions

In order to gain the most valuable feedback from potential customers, we aimed to design user surveys that were as focused as possible. We sent out a survey to the entire Yale student body and received over 800 user responses. 

Our comprehensive questions included but were not limited to:
  • When using a product customization tool for your personal electronic device, which approach do you find more appealing? Please rate on a scale from 1 to 5. 
  • When you view a customizable product online, how concerned are you that the actual physical texture and color won't match the digital image? 
  •  When exploring a website to decide a product to buy, which style of browsing do you prefer to start with? 

These questions probed both customer’s aesthetic preferences and usability needs when exploring a website like dbrand. After analyzing all 852 survey responses, we synthesized the pain points and suggestions into hypotheses that we could use in our next step—ideation. 

Keeping both user personas in mind, we also created journey maps for both tech and non-tech enthusiasts to inform us of feeling that might arise when customers browse the current website. 



III. Ideating 

In our brainstorming stage, I took charge of researching and finding inspiration for the custom B2B skins portal, which I would wireframe by myself. I analyzed competitors’ websites, consulted dbrand designers to clarify what features they envisioned, and read design manuals specifically for portals. 

Additionally, my team and I also collaborated on the ideation of a new skins purchasing flow. Having collected hypotheses from real students, we translated them into real design actions that we could implement onto the current website. For example, many survey responders complained that the homepage incorporated too much scrolling, so we decided to simplify the homepage into a few panels of large categories rather than many individual panels. 

IV. Intermediate Deliverable 


Low-fidelity frames of the B2B custom skins portal
In November, we presented our intermediate findings, which consisted of a fully fleshed-out frontend and backend report as well as a low-fidelity sketch of the B2B custom skins portal. I took the lead on drafting the portal flow, outlining core features such as uploading product templates, selecting materials, previewing custom skins, and managing bulk orders. These early frames helped the client visualize how a dedicated B2B experience could streamline their internal workflow and expand their enterprise partnerships.

Alongside this, I worked closely with both the frontend and backend teams to ensure the report reflected not only user-centered design considerations but also the technical requirements needed to support them. 

Our team received positive feedback from the client, who was impressed by the depth of our research and the creativity of our design ideas. They liked the direction of where we were going in regards to the skins purchasing flow, and gave us suggestions for how to create our mid-fidelity prototype. 

V. Final Deliverable 

In December, we presented our final deliverable to multiple dbrand project managers and directors from both the frontend and backend processes. 

The final frontend report consisted of a full Figma mockup of the redesigned skins purchasing flow as well as research-backed explanations of each design choice we made. I wrote a script and presented the homepage and navigation bar, which I was in charge of. The dbrand designers were impressed and had no questions or comments for us. 

VI. Conclusion and Future Directions

With the possibility of our project being extended into the spring semester, I am very proud of the whole team for putting forth our full efforts despite having Thanksgiving break and finals around the same time. However, there is always room for improvement in the design process, and reflecting back, I know I might have considered some decisions differently. 

Here’s a few lessons I learned:
  1. It’s okay to pivot. Although I designed the low-fidelity B2B custom skins portal for dbrand in the intermediate deliverable, they ended up not recommending it in the final deliverable because they did not believe it was feasible for them to implement at the moment. So instead, I focused my energy on helping the rest of the team with the skins purchasing flow in the final half of the semester. 
  2. Sometimes the simplest solution is the right one. While brainstorming redesigns for the homepage of dbrand’s website, we drafted multiple wireframes before settling on one that our client liked the best, and it ended up being our first idea.