DEV Community: Lisa Sy (she/her)

Responses to AMA as Lead Product Designer at Forem

Lisa Sy (she/her) — Fri, 16 Oct 2020 17:47:23 +0000

Hey everyone,

The other day, I posted this AMA post to get some questions to go over in our Twitch livestream.

I’m Lisa Sy, a Product Designer at DEV/Forem - AMA

Lisa Sy (she/her) for The DEV Team ・ Oct 13 '20

You can watch the recording here on YouTube, but if you want to read through some of the AMA responses, I wrote this handy post for you:

Sung M. Kim • Oct 13 '20

Hi Lisa. Thank you for the AMA :)

What is a Product Designer role and how does it work?

I'd love to hear what the day to day would be like as one :)

A product designer defines and creates the user and product experience to give value to people or an organization. A product designer helps the team envision what that value could look like by gathering context on why we want to provide this value (informed by user research & data, business needs), generating ideas on how we could do this (ideating, brainstorming, generating design ideas), and then working with the team of engineers and PMs to make it real (polishing and shipping). But it doesn't end there, because a product designer is concerned with if their solution provides value, they'll care about measuring their impact of their work. They'll also rely on a healthy dose of research and data to inform their work.

Typically, a product designer isn't expected to know front-end-development, but because Forem is pretty small, our design team (just the 2 of us) both do that here. The benefit of knowing how to code is that it helps us collaborate with engineers and developers better.

Ben Halpern • Oct 13 '20

Can you tell us about your journey to get here as a designer for Forem? What professional/personal experiences influenced you most along the way?

My childhood consisted of Geocities, AIM chat rooms, Neopets, Xanga, Myspace, and internet forums, as well an obsession with drawing and the visual arts (DeviantArts, anyone?). When I entered university, I had no idea what career path I would pursue, but I thought I could never pursue anything creative because it would be impractical - I didn't want to be a starving artist. Long story short, I really hated my Econ class but would spend my free time learning Photoshop off of tutorials like these and making graphic design flyers for my friends' theater shows and bands.

Those graphic design flyers led to learning web design and making Wordpress themes. Around this time, I began to learn more about what UI and UX design was and studied that. Eventually, I worked on my first opportunity as a product designer in 2012 with @peter and @ben on Texts.com! That eventually led me to work at thoughtbot and Facebook, as well as freelancing, before I ended up full-circle at Forem with Peter, Ben, @jess, and the rest of the team.  

When I joined Forem, I knew I found the right opportunity I was looking for at this time in my career. Spending time in large corporations made me miss working in a smaller environment where I could try more things with fewer risks. Working at thoughtbot taught me that I definitely appreciate doing front-end while I'm designing, because if I code my designs, I don't have to make as many specs for engineers :P Working at Facebook taught me about how rewarding and challenging it is to design communities at-scale. Freelancing with startups helped me learn that I wanted more agency and converage in my role and work.

Gracie Gregory (she/her) • Oct 13 '20

Throwing it back to DevDiscuss Season One with my question. What are some of your absolute favorite design tools? Or just web tools in general.

Lucky to have you here at Forem, Lisa!

Here are a few things I use a lot:

Figma for screen designing, creating diagrams and user journeys, collaborating, and prototyping.
Paper + pencil for planning out wireframes & sketches.
Loom for video and screen recording.
Any word document tool for writing out a project brief, a user research script, and the endless possibilities :) We use Google Docs at Forem.

Stiv Marcano • Oct 13 '20

Hi Lisa, thanks for the AMA!

What is your educational background as a product designer?

Do you think it's possible to make the move from developer to product designer?

What are some key skills you think you need for your role?

Do you think it's possible to make the move from developer to product designer?

Yes, I've seen it happen, often with devs with an eye towards design, and want more agency and confidence in building something from scratch. When they could come to me and ask advice on how to make the transition, I tell them that if they're currently in a developer role at their company, they should try to work more closely with their designers, and even take on small design tasks when they can. If you can gradually improve your design skills at work or with people where you have some support, it will feel much more encouraging along the way.

What are some key skills you think you need for your role?

Here are a few ones:

Fundamental art principles (color, typography)
Communication
Knowledge of UX fundamentals and web design
Appetite for user research and data

It could differ based on what specialty of design you want to focus on (are you more of a visual designer or will you care more about building design systems?).

Shaiju T • Oct 14 '20

What steps a software developer should take to become a creative UI designer ?

Start to analyze why something works well and why. Take notes.
Visual design is all about acquiring taste. Ira Glass talks about "the gap". Collect as many visuals that inspire or move you, almost like an archive of inspiration for you. I'd keep these in my Tumblr, Pinterest, Dribbble, and re-visit them whenever I needed some inspiration.
Take screenshots of Apple products and re-draw everything from scratch using Figma. You can do this for any apps you think are well-designed. This will help you close "the gap" and force you to pay attention to small details.

I hope this was all helpful. Reach out to me if you have any questions and follow DEV on Twitch to be notified when we start streaming in the future.

I’m Lisa Sy, a Product Designer at DEV/Forem - AMA

Lisa Sy (she/her) — Tue, 13 Oct 2020 21:04:32 +0000

Hello, I'm Lisa Sy, a Lead Product Designer at Forem.

I’ll be joining Nick Taylor and Christina Gorton tomorrow on Dev's Twitch stream to talk about what I do as a product designer at Forem, Forem’s design system, the design process, and more.

I would love to answer any questions you have about working as a product designer, my design process, design systems & tooling, and more.

Feel free to ask any questions you have in the discussion thread below!

And don't forget to join the stream tomorrow, October 14th at 5 PM UTC. Details:

This listing has expired.

What does it take to create a strong password?

Lisa Sy (she/her) — Wed, 02 Sep 2020 14:55:45 +0000

At Forem, you might have seen some recent updates to our sign-in flow.

We're working to make it empower communities to provide whichever authentication methods best serve their need — whether that is social authentication (Twitter, Google, Facebook, etc), and/or email and password. We've typically leaned towards encouraging people to sign up using social authentication because 1) that doesn't require storing passwords on our end and 2) we think that requiring social auth prevents spam and harassers from profligating on our platform. But it's not enough just to provide social oauth as an option: some communities and people want to sign up with a good ole email and password.

How do we build out email/password authentication while ensuring that we mitigate as much spam & harassment as possible?! Ideally, we'd want to create and store their passwords with a password manager. But in the more common case where people don't want to use a password manager, how can we nudge them to create secure passwords? Here's where this idea comes in:

A contextual password helper

📹 Watch the video recording here

Questions:

What are your general feedback around the video you see?
Should requiring numbers, lowercase and uppercase characters, and symbols be part of our requirements?

Thank you!

Debugging my installation of Elasticsearch

Lisa Sy (she/her) — Thu, 23 Apr 2020 19:15:13 +0000

Yesterday, I was running into much frustration installing Elasticsearch on my Mac machine. After a lot of Googling, I patchworked a solution that worked for and want to share it with you.

After installing Elasticsearch with Homebrew and running elasticsearch, I ran into this issue:

org.elasticsearch.bootstrap.StartupException: java.lang.IllegalStateException: Unable to access 'path.data' (/usr/local/var/lib/elasticsearch)

Hmm. I googled this line and found that others encountered a similar issue. When I attempted to locate this folder, it did not exist, so I learned that I needed to 1) create it and 2) give myself permission to write into it. I did this by running these two commands:

sudo mkdir /usr/local/var/lib/elasticsearch/
chmod -R $USER /usr/local/var/lib/elasticsearch

After attempting to run elastic search this next time, it worked!

elasticsearch

Phew, that worked! I was happy to resume the work I'd been doing. I hope this is helpful to anyone who is experiencing the same issue I had.

Follow-up: your feedback on the home page 👋🏼

Lisa Sy (she/her) — Mon, 10 Feb 2020 17:18:54 +0000

You might remember when Paweł and I asked for your feedback and input on the home page last week. Yup, we’re the design team at DEV and we want to improve your DEV experience so that we make the most out of our community here.

Hello again. It's time to do some work!

Paweł Ludwiczak for The DEV Team ・ Feb 4 '20

#meta #design #ux

What we heard from you 👂🏽

Based on what you told us, here are the main issues you have with our home page:

1️⃣ The home page is visually overwhelming

We’re hearing that the home page is pretty visually overwhelming for a lot of you.

“There's too much information competing for my attention. Combine that with all the various forms of buttons, and half the time I'm not sure what I can click on and what I can't." - @akajb84

“The fact that it's not easy to identify the purpose of the areas in the sidebars at first glance. They look too similar to each other and this requires me to scan a lot of content.” - @olistik

2️⃣ Some things are inconsistent and confusing

In addition to the hodgepodge of different button styles on DEV, we’re also hearing that you see other inconsistencies as well…

“The "newest listings" section has borders around every listing whereas when I look at the different sections for the tags that I follow there is only an outside border.” - @torianne02

📝 See our full audit here (Figma, Jan 10, 2020)

3️⃣ You’re not seeing enough content from people and tags you’re following

“I wish the homepage would default to showing me a feed of My Tags, as opposed to everything. I think that's my only ask.”- @gatlingxyz

4️⃣ You keep seeing things you’ve already read or liked

Why clutter your homepage with things you have already liked or read?

“I have read a post or liked it, I shouldn't see it again on the homepage.” - @vaibhavkhulbe

5️⃣ You’re not discovering new, interesting content

You may already be following awesome people and tags on DEV, but you don’t want to miss out on other interesting content.

“It should have more relevant and should have a section of recent/trending articles or authors so that I can discover new content easily.” - @vaibhavkhulbe

Your ideas 💡

Above are some issues that you’ve been encountering with the home page. Some of you recommended interesting ideas for solving these problems and improving the home page. Here are some of the ideas we want to call out:

Improving our mobile experience

@cristinaruth noticed that our sidebars are not very accessible on mobile, and has ideas for how to make that information more accessible...

“... maybe scatter the listings on mobile throughout the feed like reddit does? I haven’t thought this through so there are likely holes in that idea.” - @cristinaruth

An “Explore” page for discovering new creators and tags

With a wealth of creators and tags sharing their content, you want a way to discover new people and content.

“Have a page "Explore" where we can see all posts and all tags” - @bairrada97

"I much prefer a recommendation page like on YouTube based on the creator I follow and like, while keeping the week / month / infinity ..” - @axelledrouge

Making use of screen real estate better

Though some of you expressed liking our three-column layout, others envision different possibilities for how we can lay out our content on the home page...

“Would be nice if the content took advantage of my widescreen monitor and not ride a single small column down the middle.” - @skryking

Reminding you of your reading list

Do you sometimes save articles in your reading list, but don’t remember to visit it? @cristinaruth has an idea for reminding you about these articles...

“Maybe even start showing me articles on my “to read” list if nothing else to show me? They pile up and I actually forget about them but I do visit the home page a lot.” - @cristinaruth

What we’re doing

We’re taking note of your feedback and turning them into actual projects at the company. They include:

North Star ⭐️ We’re envisioning an ambitious design of what DEV 2.0 might look and feel like. We want to think big-picture on how we can create an experience that helps bring our community closer, while also improving the UI & UX through updates in style, spacing, typography, color, and much more.
Feed 💻 In parallel with the north star, we want to optimize what you see in your feed and how it's displayed. There are several things we could do to help you find and enjoy the most relevant content. This will mean both algorithm and UI/UX improvements.
Low-hanging fruit optimizations 🍒 Okay, those two are pretty meaty, systems-based work, but there are several things we could do almost immediately, such as fixing slight typographic inconsistencies and improving our visual hierarchy where the fix is obvious. This is basically a cheaper and easier version of the North Star project.

What’s next

Rolling out low-hanging fruits optimizations 🍒

A couple of days ago, Paweł opened Chrome Dev Tools and started playing with CSS, trying to figure out how much work there would be to improve some things visually. He tried to take a screenshot every few minutes to document the process.

Here's what we did:

De-emphasized sidebar widgets. Right now they are pretty heavy visually, stealing lots of attention.
Cleaned up cards. We use cards metaphor for everything - feed posts, sidebar widgets (well, not anymore after I de-emphasized them), and smaller UI elements. Because of some mixup of border with box-shadow they kinda look blurred sometimes.
Unified typography. ¯_(ツ)_/¯
Played with rhythm. By rhythm I mean paddings, margins, and generally all types of spacing. We tried to unify that here and there, especially in feed cards.
Widened the page. Ok, this one is a side effect of me going too far in dev tools. We're probably gonna skip this change for now, but eventually it would improve our responsiveness.

Before vs after below:

We’re currently figuring out how we will roll out these changes. If you have any questions or thoughts, please drop us a comment, question, thought, or idea below :) Looking forward to it.

✌🏽
Paweł & Lisa

Attending Figma Config 2020

Lisa Sy (she/her) — Mon, 10 Feb 2020 16:10:30 +0000

Attending Figma Config 2020

Last week, I attended Figma Config, the premier user conference for folks who love and use Figma. If you're not familiar with Figma, it is the popular open-source design and collaboration tool that we use at DEV. It's popular for a few reasons:

It's designed for the browser.
It's collaborative.
It champions open-source design.

The day featured many talks and workshops, and here are some specific nuggets I took away from the talks:

Getting feedback from the community is important

Whether we're designing cities or developing software, we rely on feedback from our community to figure out which solutions work best for people. This is the main theme of Devon Zuegel's talk. She illustrates the unexpected parallels between the designers of the Elm programming language and designs of Paris' infrastructure. In both situations, the designers attempted to involve their community's input some of the time, but missed chances to gather their input in other pressing times.

Whenever we're building anything, we're always making tradeoffs. It's important to gather feedback from the larger community, but how do you separate the signal from the noise?

At DEV, we highly value the feedback we get from our community. We know that we won't always be able to enact each and every single issue that people bring up, but we're interested in solving common pain points you experience here.

Peopling

Zen Lara (queer.tech & AKQA) walked us through best practices on establishing strong relationships with your collaborative peers. They talked about how it's important to communicate and set expectations with your peers on how to work best together.

I thought that their talking points are advice we can bring into both our professional and personal relationships. Since I started going to therapy a few months ago, I found a lot of their message to resonate with things I've been thinking about.

Naming a design system

Jules Forrest (Credit Karma) talked about the importance of naming in design systems.

Using a generic design system name (e.g. Dropbox Interface Guidelines) makes sense for if you're starting off with fewer stakeholders and dependencies, but as you grow the design system to external stakeholders and even develop multiple design systems, that's when it might benefit to use something more playful and unique (e.g. Spotify's Encore). As we're organizing and evolving our design system at DEV, we find these tips valuable.

The importance of community

Conferences like Config bring together community from our day-to-day Twitter feeds, Slack conversations, and office buildings into real-life. In addition to the talks and workshops, I also enjoyed running into friends and past colleagues. It goes to show how important relationships and community are sustaining this long journey we're on. It's a journey of building services that people love and find valuable, and of growing and learning from one another.

An illustrated guide to running effective team meetings

Lisa Sy (she/her) — Tue, 07 Jan 2020 17:30:38 +0000

This was previously posted on Medium.

Does your weekly meeting with your product team seem to always go over in time? People rushing to cover last points? The need to schedule another meeting just to talk about what wasn’t covered?

Not all meetings are created equal, but I’ve been in enough of them to see that these 30-minute meetings attempt to cover too much in a short amount of time. One of my favorite things about these team meetings is that they bring together all of your cross-functional peers into a single room: the engineers, data scientists, researchers, designers, and PMs. However, it’s easy to cram all of the conversations you want to have with all of these people!

In order to maximize the communication amongst your team and to drive focus to building great products, it’s key for your team to be clear on these three questions:

Are we heading towards where we want to be?— strategy
What people are working on to get there? — status
Are our products working well? — quality

Assuming you and your team have a 30-minute time block to cover all of this, here is monthly schedule for how you can structure your weekly team meetings that optimize everyone’s time:

Week 1: Gut-check on strategy & goals

Are the projects we’re been working on laddering up to our ambitious, half-year roadmap that we had set forth? Are we on the right path, or is this a moment for us to think about re-positioning our focus?

Week 2: Status Updates

Tactical! What’s on people’s plates for the next two weeks? Are there any upcoming blockers or unknowns?

Week 3: Product Quality Bug Bash

Before thinking about building new features, what’s not working properly with our existing products? The responsive menu not opening and closing properly? Mis-alignment of a text wrap on the secondary button? Hover states not working?

Let’s use this time to review the numerous bugs we’ve found and prioritize how we’ll address them. Sometimes, these exercises will reveal larger issues with our product ecosystem, which may ladder up into the strategic conversations that take place during Week 1.

Week 4: Status Updates

Tactical! What’s on people’s plates for the next two weeks? Are there any upcoming blockers or unknowns?

This nets out to 2 hours worth of blocked meeting time with your product team.

Pairing this with other communication norms, like stand-up, Slack, and the usual will maximize everyone’s time and energy.

When I piloted this with my last team at Facebook, I got feedback that they appreciated the level of focus it brought to our meetings and our understanding of our product: zooming into the details when it was appropriate, but also zooming out when it made sense. It helped ensure we gave our time and energy to the most critical conversations at the most appropriate times.

This may not be right for all teams and companies, but here’s a quick take, and I hope you enjoy.

DEV + Product Design 👋🏼

Lisa Sy (she/her) — Mon, 09 Dec 2019 21:34:07 +0000

I'm excited to announce that today is my first day working with the DEV team as their first product designer! 🎉

Having worked with @ben and @peter on a past project, I'm excited to champion product design to create memorable experiences that bring people together on DEV.

Why DEV

Like many others, I've lately been pondering on the role of the Internet (with a capital I) in our society. In our day and age where we're faced with rampant reminders of social media's toxic consequences, it's easy to underwrite the other aspects that connectivity has provided us. Through forums, websites, platforms, blogs, and so much more, the Internet allows people to find one another for support, knowledge, common ground, and a sense of belonging across geography, timezones, languages, belief systems, and background. Whether I was learning easy hacks for memorizing French conjugations through YouTube, or navigating how to come out as queer for the first time on LGTBQ forums, or building my first websites that would end up becoming a career for me, I leaned into the richness of the Internet to find a way to be my best, empowered self.

DEV is one stunning example in pursuit of these ideals. By bringing community together to help people in software development, DEV also gives people a way to tap into their creativity. When the team approached me to join their team, I knew that this was a once-in-a-lifetime opportunity that I couldn't turn down.

A bit about me

I am a designer, illustrator, artist based in sunny Los Angeles 🌞. Prior to DEV, I've worked in product design at places like Dropbox, Facebook, and thoughtbot (where I learned all of the quickest Vim shortcuts). When I'm not thinking about product design, I enjoy climbing 🧗🏻‍♀️, spending hours in bookshops 📚, riding my bike 🚲, and painting in parks 🎨.

Where you can find me

Follow me and my adventures building product design at DEV here, as well as on other social media:

DEV Community: Lisa Sy (she/her)

Responses to AMA as Lead Product Designer at Forem

I’m Lisa Sy, a Product Designer at DEV/Forem - AMA

Lisa Sy (she/her) for The DEV Team ・ Oct 13 '20

I’m Lisa Sy, a Product Designer at DEV/Forem - AMA

This listing has expired.

What does it take to create a strong password?

A contextual password helper

Questions:

Debugging my installation of Elasticsearch

Other links I tried

Follow-up: your feedback on the home page 👋🏼

Hello again. It's time to do some work!

Paweł Ludwiczak for The DEV Team ・ Feb 4 '20

What we heard from you 👂🏽

1️⃣ The home page is visually overwhelming

2️⃣ Some things are inconsistent and confusing

3️⃣ You’re not seeing enough content from people and tags you’re following

4️⃣ You keep seeing things you’ve already read or liked

5️⃣ You’re not discovering new, interesting content

Your ideas 💡

Improving our mobile experience

An “Explore” page for discovering new creators and tags

Making use of screen real estate better

Reminding you of your reading list

What we’re doing

What’s next

Rolling out low-hanging fruits optimizations 🍒

Attending Figma Config 2020

Attending Figma Config 2020

Getting feedback from the community is important

Peopling

Naming a design system

The importance of community

An illustrated guide to running effective team meetings

Week 1: Gut-check on strategy & goals

Week 2: Status Updates

Week 3: Product Quality Bug Bash

Week 4: Status Updates

DEV + Product Design 👋🏼

Why DEV

A bit about me

Where you can find me