Forem: Sally Chen

From Concept to Code: How Rive Supercharged My Design Implementation

Sally Chen — Tue, 13 Jun 2023 17:01:53 +0000

for anyone interested in efficient design-to-development workflows

You may have noticed that Contenda’s landing page has undergone quite the transformation recently. As the sole designer handling multiple tasks, finding an efficient way to translate my landing page ideas into a tangible form was a considerable challenge. With my frontend knowledge becoming slightly rusty over time, I needed a solution that would allow me to implement my designs effectively. This is where Rive came into play and made it possible for me to realize my designs. This post provides an insider look how I navigated Contenda’s landing page redesign using Rive.

Rive: The Animation Powerhouse

Rive is a game-changer for creating interactive animations that are platform-agnostic – meaning they can run on any device, on any platform. It offers an intuitive interface, similar to design platforms like Figma, which makes the animation process more streamlined. Plus, its embeddable iframe export options merge seamlessly into our Astro codebase.

Rive in Action: Bringing Contenda’s Newsletter Section to Life

Our recent efforts to overhaul the newsletter served as the perfect opportunity to put these tools to the test. We decided to introduce our newsletter as the ‘Contenda Kitchen’, and what better way to visualize this concept than with a confetti-showered fortune cookie? Not just a feast for the eyes, but a versatile asset for our marketing visuals and landing page design. Just take a look at the before and after below!

To create the fortune cookie graphic, I turned to Figma and used vector graphics. The next step was to breathe life into this static image. I exported the SVG from Figma and imported it into Rive. The striking similarity between Rive’s interface and Figma’s, right down to the preservation of Figma groupings as shown on the leftside panel of the image below, made the animation process a breeze. With a few tweaks and movements on the Rive canvas, I had an animated graphic ready to go. Exporting the animation as a one-line iframe embed code was the cherry on top!

The last step was integrating this animation into the landing page. Our landing page was built with Astro.js, a super versatile JavaScript framework. (Believe it or not, the block of code below actually originated from an Astro file, not a vanilla HTML file!) The implementation process was remarkably simple and largely involved working with fundamental HTML divs. The animation was integrated seamlessly with a single line of iframe embed code from Rive, as shown by the highlighted line of code below.

So, there you have it -

an inside look into how I conceptualized, designed, and implemented one of Contenda’s new landing page sections. Even as a solo designer with limited time, the synergy of Rive with Figma and our existing codebase not only streamlined the process but also ensured a high level of performance and design quality. Rive has redefined what is possible within my design workflow. The next time you visit our website, remember the journey behind each vibrant detail.

Finding Harmony in Marketing and UX

Sally Chen — Thu, 08 Jun 2023 17:02:57 +0000

When we think of teamwork in the world of user experience (UX), we often imagine design and engineering working together. However, the idea of design and marketing working together is not as common. While marketing aims to persuade users to take action, UX is all about meeting their needs and expectations. It can be challenging to balance sell and serve simultaneously.

However, as Contenda experienced rapid growth with multiple ongoing releases, there came a point when I had to tackle both go-to-market and UX efforts as the sole designer. This is my advice to all the solo designers out there trying to juggle a startup’s many priorities.

Embracing a holistic approach

To overcome these hurdles, I decided to set aside the distinction between marketing and UX, and instead focus on the bigger picture. I asked myself questions like:

“What do I want people to remember about Contenda?”
“How can I make our platform engaging, informative, and valuable?”
While seeking answers to these questions, I found that one of Contenda’s biggest problems was the lack of consistency. Take a look below - some pages looked like they were still under development, while others exuded a polished, professional vibe. The colors, typography, and layout were completely different too. This inconsistency was exacerbated by the numerous customer channels ranging from emails to social media to partnership pages. It was crucial to convey Contenda’s value consistently across these touch-points.

By aiming for consistency across the platform, I found that I was naturally able to address both marketing and UX concerns. For instance, while creating graphics for our Contenda Kitchen newsletter, I also considered how those visuals could be incorporated into a fun 404 page. Designing new sign-up forms provided an opportunity to re-examine how I was communicating Contenda’s value proposition and how I can incorporate assets from marketing graphics into banners in our app.

Helpful design practices along the way

Throughout this journey to harmonize marketing and UX, I also discovered several super helpful and handy design practices:

Create reusable components - I transformed most visual assets into reusable components across the entire Contenda ecosystem. For instance, when updating our social media avatars, I noticed that adding a drop shadow to the logo instantly made it more visually appealing and helped it stand out against the dark background. This inspired me to apply the same shadow in other areas with dark backgrounds, like our hero section and soon-to-come new sign-up page! Drop shadows across our landing page and soon to come new sign-up page

Build templates for everything - With a multitude of changes and rapid releases, it’s essential to keep designs flexible yet scalable. Templates, like the branding-related ones I made in Figma, proved to be incredibly useful. Whenever we established a new partnership, someone else could simply drop the logo and export the file to be used in the relevant social media posts. Skeletal layouts for signup/submission forms were also beneficial for experimenting with new designs.

Establish a central hub for visual documentation - This was particularly critical for both the marketing and front-end sides to maintain visual consistency. I found tools like zeroheight extremely helpful for easily pushing changes and allowing the entire team and the public to view our brand guidelines.

The Outcome

I’ve discovered that marketing and UX can indeed work together harmoniously. By focusing on the overall experience and message, I ended up enhancing both go-to-market and user experience aspects simultaneously. I was thrilled to see marketing impressions soar dramatically, while the entire platform began to look more cohesive. But hey, all good things come at a cost - you should see the state of my desktop now!

Salsafying Your UX

Sally Chen — Mon, 03 Apr 2023 00:00:00 +0000

I was in the middle of a writing workshop when my phone dinged - and to my delightful surprise, a box of fresh tacos and nachos was waiting at my doorstep! The tangy tomato salsa, the crispy corn tortillas, and the smooth guacamole all blended together in a heavenly lunch experience that transported me straight to Mexico. I felt like I was on vacation!

Wait, why did you order tacos?

As I reminisce about my wonderful food experience, I can’t help but wonder what sparked this journey in the first place. Was it the tantalizing taste of the cuisine, or was it something else that motivated me to order it?

To my surprise, it was the latter. When I was placing my order, I wasn’t even thinking about Mexican food. But then, like a magical spell, the phrase most ordered near you appeared on my DoorDash app and immediately drew me in. I knew I had to give these dishes a try. They are frequently ordered for a reason, right?

So what do tacos have to do with UX?

As UX designers, many of us are guilty of neglecting the writing aspect of our job. At schools or bootcamps, we were taught to focus largely on the visuals, typography, layout…the list goes on (but rarely includes writing). In Figma, we fill designs with boring placeholder content and devote our time to finetuning the visual aesthetics of our creations.

Have you ever noticed how many times you’ve seen “Lorem Ipsum” (or better yet, AI Ipsum) in a design mockup? Definitely more than zero, right?

However, writing is crucial for a good user experience. There’s even a whole field devoted to UX writing and specialized roles like UX writers. The Nielson Normal Group defines UX writing as “the practice of writing carefully considered information that addresses people’s contexts, needs, and behaviors”. Take DoorDash, for example, their cleverly worded prompts convinced me to try new dishes, and boy, was I happy I did!

How does UX writing play out at Contenda?

Last week, after finishing some designs, I put on my detective hat and conducted a series of user testing sessions for Contenda’s Beta Platform. And let me tell you, it was a wild ride. Some users were left scratching their heads and wondering whether they can only submit specific types of videos, all thanks to the unexplained “blog post” and “tutorial” selections on the submission page. Don’t even get me started on the editor’s hidden gems, like the regeneration icon that transforms paragraphs like magic, that less than half of the users were able to discover.

After diving deep into the root cause of these usability issues. I discovered that a key culprit was dull UX language. In all stages of the user flow, the overly-technical terms and boring captions hindered people from discovering key values that Contenda had to offer and resulted in magnitudes of confusion.

With this in mind, I went back to Figma and turned my inner detective mode on again to investigate every text-filled nook and cranny - from tooltips to form placeholders to headers. After lots of googling for inspiration, I sprinkled some friendly and playful language and emojis to make each page more approachable and fun.

It was eye-opening to see, for example, the signup page radiating with so much warmth and friendliness just after changing a few phrases. Take a look at the two versions below and tell me: which one would make you more excited to fill out?

As a taco-lover, I believe that top-notch UX writing is the salsa and guac to the taco that transforms a mediocre user experience into an extraordinary one. At Contenda, we are constantly spicing things up to give our users the same magical experience. After all, just like how the right salsa can bring a taco to life, the right UX writing can bring a product to life!

Even today, Sally is trying out more delicious tacos at Contenda.