Discovering the space

The podcasting market was considered too saturated in 2005– yet its popularity only continues to grow rapidly in 2023.

Momento has 2 products that look at both sides of the podcasting space, creators and listeners. Among the likes of independent podcast apps that came out in as early as 2005 (eg. Overcast) and leaders like Spotify or Apple Podcasts that dominate the current market- Momento exists as a small listening app that helps users through notetaking and discovery features. Despite the podcasting climate, we found that there was still wiggle room to be unique design-wise, and that the challenging length of podcasts meant there were several unsolved issues we could tackle. My summer looked like grand ideas, small iterations, and 14 new Figma files with a hefty number of pages apiece.

Section 2 // Building the design system

Figure 1. Setting up the design system icons

I arrived at Momento with a grand total of zero design files ready to be built off of.

Before starting my first project (redesigning the episode and podcast pages), I had to set up the foundation for our Figma home-to-come:

I started by turning existing hexcodes and token names into color styles, with slight adjustments to things like saturation and brightness to improve readability. Somewhere along this path I also added 2 additional shades of grey to convey subtle borders and lighter fills.

With reference to Material Design’s guidelines, I changed our pure black (#000000) to the recommended one (#121212). This helps reduce eye strain while giving us the bandwidth to add shadows and show degrees of elevation.

In terms of icons, we previously used a mix of Ionicons and Material Icons, however, this performed very poorly in testing. First time users found legibility poor and were unable to describe the actions associated with the icons.

I decided to consolidate our hodgepodge set into Google’s Material Icons, which had excellent readability and expressed our niche use cases well (we commonly go as low as 16px).

Section 3 // Text styles

Figure 2. Screenshots of our design system file

Next, I treated type by tightening letter-spacing/ tracking for titles and loosening spacing for paragraphs- increasing legibility and prettiness. We'd previously used iOS and Android default fonts but felt there was inconsistency between platforms. Later, we switched to Inter for Android because of its proximity to SF Pro, and I did research on some potential new fonts. In the end, we stuck with the default + Inter combo because it satisfied our criteria best. The solution sped up loading times, was free, readable in the face of text-heavy UI, and preserved the professional dependable aura we wanted to give off.

At last, every design system needs components and grids. Our existing components weren’t documented in Figma, so I'd go through the app and recreate them with the help of engineers who had access to specs.

I paired up with our resident developer Andrew Chen to implement a web version of the the design system; re-using the colors from mobile and creating a new minor third type scale. On my end, I’d publish new components from a central file to smaller branches, and on his end, he'd sync Figma with our React library.

Section 4 // Episode/ Podcast Screens

Figure 3. Screenshots of the May 2023 Momento app (before redesign)

Over the summer, I realized that frameworks are just that- skeletons of tools that I can pick and choose in order to solve problems. Despite broadly following the double-diamond process, everything I did was driven by metrics, user motivations, and priorities defined by overarching company goals. We’d skip over parts of the process to work more quickly, later looping back to fix bugs, respond to user feedback, and improve on past iterations.

This was the case on my very first project– redesigning the Podcast description screens. Despite being one of the most used parts of the app, the old flow actually didn’t even include an Episodes screen. Instead, the podcast one would house multiple episode descriptions, presenting several core issues. 1. The play on click behaviour felt unconventional because the episode already had a play button (click usually leads to the episode screen), and 2. actions typically associated with the episodes had to placed on the podcast screen; creating clutter. Issue 3 was that many podcasts have individual episode-level thumbnails. This information was already being pulled by the API, but wasn't even being used. What was meant to be a 2 day redesign had unearthed a bunch of problems to tackle:

The screen does not use progressive disclosure- long text blurbs takes up screen real estate and force scrolling

Layout isn't scannable or visually appealing because of inconsistent spacing and lack of hierarchy

Lack of differentiation between links leads to confusion about expected behaviour for actions

Links and info are missing for individual episodes

I wanted to add several out of scope features that would enable customization: comments that the team whole-heartedly agreed on.

As most Momento users come from an existing podcast app; they need ways to quickly edit information that didn't carry over (ie. episode completion). Unlike Spotify, "bulk mark as complete" wasn't feasible for engineers. To combat this, I brainstormed features like swipeable gestures that would reduce clicks and TT for actions like download and mark as complete. Other functionality we added include more filtering options, methods of sorting, and visual indicators for watch time, download, and completion states.

Recall: I previously mentioned the potential of included unused episode thumbnails, however, we ended up not including these on the podcast-level page. My reasoning was that it prolonged scrolling by taking up too much space, and many podcasts didn't make individual thumbnails. Instead, if a user visits the episode page; we show the individual thumbnail prominently.

We accepted this assumption by researching at Apple and Spotify's top podcasts-- the ones with special contracts and the most viewers. Of 50, only 10 actually created a special thumbnail for every episode. We hypothesized that this percentage would become even smaller as we moved down, and that repetitive episode thumbnails didn’t need to be added.

My redesigned screens have been live for a while, however, during my last week of work, I felt that that they could be improved on. Here were the slight UI adjustments I made (new on left, old on right):

1. clearer CTAs
2. customizing the accent color
3. replacing the old moments card (thus, standardizing the home + info screens) and
4. a shift to smaller text styles

I wanted the episode titles to peek above the podcast fold, and thought that it made sense to take inspiration from Apple Podcast's layout (the platform most users move to Momento from). These new solutions are primarily UI fixes, but they were a clear marker of how much I improved over the summer nonetheless ;)

⚠️ Before you continue

While I have a lot of good content to share, beyond this, I’ll focus more on my learnings and the final work rather than my design process. If you’d like to see how I work-- I recommend my this (app, freelance), this (app, speculative) or this (website, UI) instead.

skip ↓ to the takeaways

Section 5 // Redesigning Search

Figure 4. My iterations, a genres page, and Momento search 2.0

A few weeks into the internship, the founders left California for their accelerator in Oregon, getting the opportunity to meet tech legends like Ali Patrovi and Scott Forstall.

In preparation for their meeting and the demos, we worked on a new super-powered search: exploring trending tags, a new empty screen, and our final direction-- TikTok style transcription cards that made lovely use of our powerful AI. During our second week of shipping this, we had 45% of first-time users scrolling 5 or more times in a 1 week period (20k cumulative installs).

Section 6 // Momento Recommends

Figure 5. Seeing the stats. customization product divide

By far the rockiest part of my experience, "Recommendations" was Momento’s metaphor for an online bookshelf. Here, users would be able to publicize their top podcast picks and listening stats-- yummy! The underlying and vague idea was to have some sort of a shareable artifact with the potential to go viral. My role was heavily involved with scoping and defining product vision; areas I previously had less experience in. The challenge was that we had very little time to execute our vision; and with this, we couldn’t reasonably create anything too ambitious. I found myself scrambling to create a Spotify Wrapped, Goodreads, and everything plus the kitchen sink product that sacrificed UX to say too little.

This led to a huge argument one week into the project (we’d only allocated 2 and a half weeks to design and build it).

It was during this time that I experienced my first big product argument. Being transparent, it was an avoidable crescendo that I'm not proud to have been part of, & it exploded in a very classic designer vs. PM fashion. On one side of the table, I wasn’t afraid to speak up for my users, despite being an intern. On the other side, I was being a bad co-worker. I lacked sufficient maturity, forgetting that we were really on the same side of the table (except I forgot to sit down).

Yes, I was right about some things, but I also didn’t consider many others. Investors, funding, and demos– my PM had been looking at all of this when I hadn't. Furthermore, recommendations were a valuable product experiment– giving us data into a new and unexplored side of the product. Like much of the startup world knows all too well, our final design was born out of compromises, and 4 minute Loom apology videos.

As my co-worker put it- “Deciding what was and was not shareable enough to have in a small space afforded by the card layout was an act of balance. Everyone in the company had a different vision about the importance of each aspect, so combining our visions into a pleasant ball of shareable stats and podcasts was definitely a challenge.”

Figure 5. We ended up shipping this project on mobile, along with a customizable web page for each user that could be shared by link

Section 7 // Momento Studio

Figure 8. Some of the many studio pages I designed, Figure 9. The shipped Webflow landing page

The last leg of my journey involved covering new terrain with the MVP of Momento studio, a web-based dashboard where creators would be able to automatically generate shownotes, moments, and other marketing materials. I designed the entire experience from scratch; from a promotional website and onboarding flow, to a copy generating wizard and vast data tables.

Extras 1 // Graphic, logo, and branding work

Figure 6. A sneak peek at my logo proposals

Testing the landing page

In a very startup-like fashion, the quantity of UI changes and polish we were making led to discussions about a new logo. We initially intended for this to be a quick in-house project that I could do along with my other work, but we later outsourced it when more pressing UX projects arrived. During the few days I did work on it, I ended up wearing my familiar branding hat and making a few logo proposals. We later passed my work and brainstorming along to a few freelancers and would collectively vote on our favourite directions.

Incoming: New app screenshots!

While still in the boat of branding and graphic design, another mini-project I worked on was redesigning the promotional app-screenshots; which ended up being published on our Apple and Google Play storefronts. I helped write copy, create mockups, and brainstorm the overall layout, while David edited and finished everything. Below are my new designs, versus the old portrait oriented designs.

Extras 2 // The evolution of Momento web

Figure 7. Before and after my redesign (2021 → 2022 → 2023(?))

When I first joined Momento, we had a very old web preview you'd get if you shared the link to a podcast but viewed it in a browser. It was using the wrong font, wasn’t responsive, and overall, looked visually unpleasant. The other intern redesigned this, and built a new version that is current live. Near the end of my internship, I had the bandwidth to give his work a slight UI lift, which led to these changes:

Shifting overly large font sizes down

Cleaning up inconsistent spacing

Creating design hierarchy through chunking of sections

Adding some CTAs

Extras 3 // Templates

Figure 10. Template WIPs

Part of Momento Studio involved auto-generating moments (blurbs of texts) from clips and allowing users to export these in different formats– ie. audio, text, image, or video. Here, I was able to put on my graphic and motion design hats to create several templates. I explored different sizes, methods of pricing through watermarks, and file formats. While I was working on this, Apple actually launched their own Apple Podcasts promote, which was definitely a bit of pressure (although I would argue mine is prettier and our templates have more customization. See right screenshot #unbiased).

I prototyped + designed over 20 templates and handed them off to our Remotion dev, who would make the final user experience seamless.

the end...

My takeaways

😍

Automation is wonderful

I’m an avid connoisseur of Figma plugins and found that there were places to use them all summer. I was able to automate my color and text style generation, batch renaming, and detection of little pixel-level errors with Design Lint. Honourable mentions also include the FigJam photobooth plugin and the ever so trusty Autoflow.

🧠

Always take ownership to grow product thinking skills

In past freelance work, adding functionality and deviating from the brief was often seen as a hassle. However, I was brought onto Momento as someone who could propose new features from a user-centered perspective. The team really encouraged me to take complete leadership over the product and grow my product mindset; we often joked that I was a mini head of design. Being this involved also meant that I got to peek into the decision-making minds of a seasoned crew hailing from the likes of Google, Tesla, AirBnb, and Amazon.

I was a small fish learning from big fish, but that didn’t mean my opinion wasn’t valued. Being the only design focused employee actually meant that I'd double check designs and offer feedback before other projects went to production– essentially being a 9-5 Slack design support technician.

🚢

The end goal is always shipping

Industry work (compared to student work) really does take a very flexible approach. There is no exact procedure, and UXR most definitely isn’t done just to check a box. As each day went by, priorities changed, research unearthed new findings, and new engineering constraints came up.

Working full-time in a startup environment felt very different from freelancing because whether my work would or wouldn't be built was completely transparent. My goal at Momento was always to ship rather than create something pretty; even if sometimes all we would use from my designs were layout.

"Your work could be impressive, but the goal isn’t to impress others– it’s to solve a problem efficiently and collaboratively."

🎲

Learning the true meaning of “best in slot”

In the popular video game Teamfight Tactics, there are two approaches to using items. One is called “best in slot,” and refers to waiting for the most ideal set for a character. However, by playing to this strategy– you risk the short-term chance of losing to stronger opponents who have already “slammed items” and invested their resources.

In the first week I came, David was planning on pushing an update that combined 2 navigation tabs, moved the location of “playlists,” and redesigned the search engine– work he’d been able to design and code in a week.

I translate ”slamming items” as making the most of what you currently have. At the same time, I also translate it as the possibility of working too quickly without making the right precautions, which is bound to result in mistakes. While the speed at which startups build undoubtedly means that quality is sacrificed-- I’ve learned that this is sometimes necessary. Reflecting on my own personality, I’m perpetually afraid of making a bad trade-off. In the future, I hope to make better decisions on the fly while knowing when to turn to data science for guidance-- slowing down when needed.

Section 9 // The final word

Momento brought out the passionate, still-growing design side of myself. I faced the most grueling challenges I’d ever seen, worked on incredibly tight deadlines, and took a lot of ownership-- all at once. I can’t say I’m proud of every single thing I shipped but I can say the experience taught me a lot about how the real startup world works. I felt a great sense of community at Momento that I miss when I freelance (including consistently losing every social deduction and racing game we played). The brother-brother banter plus artfully decorated Gather office were wonderful, and I wish the company + David’s guitar skills the best.

Thank you Momento, and goodbye.

To the left...

1 ) Momento offsite at Haidilao-- I promise I don't slouch all of the time :'(

2 ) The state of Andrew

3 ) David's signature move

4 ) The only person I know who chugs the black ramen packets for fun.

Section 10 // An extra special thank you to...

David: Our design syncs were my daily Anchor (haha :) and conversations with you were always insightful + thought provoking-- I feel you single handedly doubled my design maturity. As our resident former UX engineer, you were also the closest thing I had to a design mentor at Momento. Thank you for taking a chance on me during such a crucial stage of Momento’s growth, and for always asking the best questions.

Richard Yang: Perhaps unknowingly, your kindness catalyzed my design journey and career. Thank you, for without your mentorship call, referral, or Medium articles, I don't know where that lost high school student would be now.

Vyomesh: For helping me edit this case study :)

Daniel: Thank you for being funny, driving us to hotpot, and for making me feel very welcome at Momento. You and David saw potential in me and it changed the trajectory of my design career in a way I never imagined.

Gianni: You were a constant source of calm in the office. It was amazing how you took always tried to go to all-hands despite your timezone and busy schedule.

Andrew: You were a very collaborative intern who helped me learn a lot about communication. Additional thanks for helping me edit this, the goodbye memes, and the team collage.

Chris: For being a positive, kind co-worker, and for morally supporting us to hotpot. Hope you're having lots of fun now :)

☺
Moments with Momento

Section 1 // Overview

Background information