Jr. UI/UX Designer for Bark

In 2019, I joined the incredible team at Bark — a service that helps keep kids safe online. Bark uses AI to monitor texts, emails, and social media for signs of potential issues like cyberbullying, online predators, drug use, acts of violence, depression, self-harm, and suicidal ideation.

 While at Bark, I worked alongside the lead UX/UI designer establishing user flows and visual styles for several landing pages, homepages, email templates, new app features as well as improving experiences such as onboarding and the parent dashboard. I created various sketches, wireframes, mockups and prototypes for both public facing and internal content across the product. I collaborated with a team of designers, engineers and copywriters in order to deliver impactful solutions to users. 

Here are some projects I’ve worked on:

 

What Bark Monitors Page

Role: UI/UX Design, Information Architecture, Wireframing, Prototyping
Objective: Streamline the What Bark Monitors page to better explain Bark’s value in a more clear, concise way as well as serve as an opportunity to educate users on general technical information related to our product.
Team: UI/UX Designer, 1 Copywriter,
Platform: Web
Tools: Sketch, InVision
Timeline: Aug 2019

Background

The what Bark Monitors page is among the top viewed page across Bark’s website. It serves a de facto FAQ of sorts for the routinely asked question: “What do you guys cover?”

The goal here was to optimize what was already existing and make this page quicker and easier to navigate and digest.

Personas

  • Grandma Jennifer isn't tech-savvy and knows that Bark covers some apps, but also may not be super knowledgeable about the apps themselves and wants to learn about them

  • Julie, a mother to 2+ kids has multiple kids with multiple devices and needs know if Bark is a fit for her family

  • John, a single parent just wants to know if Bark covers specific apps as quickly as possible so he can make a decision.

Business Goals

Inform users of Bark’s worth to increase sign ups and account connections

 

How will users access this page?

This page is referenced throughout the Main Site and is referenced in help articles.

Success Metrics

Success will be measured by how the number users who sign up or start free trial from this page revealed through CTA click tracking.

Longtime Support

This page will need to be frequently updated with new apps that Bark covers and will be referenced throughout the site.

 

Breadboarding

Mobile

  • Sections

    • Social media

    • Email

    • Devices

    • Browsers

  • App name

  • Definition blurb

  • Explanation of how app is monitored
    with option to expand for full details

  • carousel for each section

Desktop

  • All of Mobile

  • Explanation of how app is monitored

    with option to expand for full details

  • stacked sections with scroll back to top for lengthy sections

Initial rough sketch

 

Original Page

 

Wireframes

Mid fidelity wireframe mobile v1

Mid fidelity wireframe mobile v2

Mid fidelity wireframe desktop v2

Mid fidelity wireframe desktop v2

 

Final

 
 
 

Top Discussions on Parent Dashboard

Role: UI/UX Design, Information Architecture, Wireframing, Prototyping
Objective: Create a section on the dashboard that displays top conversations to entice parents to click into the community to explore and participate.
Team: Product, Creative team, 2 Designers, 2 Engineers
Platform: Web
Tools: Sketch, InVision
Timeline: Oct-Nov 2019

Background

The goal for this project was to encourage parents to participate in Bark Connect by surfacing the top discussions on the dashboard.

By driving more engagement in Bark Connect we can help grow the community so that parents can really start to find support there.

Personas

  • Julie, a mother to 2+ kids wants to learn more about tech & parenting. Communicates well and might have ideas/experiences that are of value to other parents.

  • John, a single parent looking for any sort of advice on how to be a better parent. Child is struggling with depression and needs a place to share anonymously

  • Grandma Jennifer isn't tech-savvy and needs a place she can ask for help without feeling judged.

Business Goals

  • Encourage overall use of the app and foster more account connections

  • Foster stickier customers and reduce churn

 

How does this fit into the product?

These discussion cards will show up on the dashboard for maximum visibility.

Success Metrics

We felt that 10 new contributors within 4 weeks would mark this as successful.

Long-term Support

We realized we would need marketing along with customer support to manage tagging topics that should be shown on the dashboard.

Breadboarding — at this stage, we determined the functionality of this feature.

Mobile

After breadboarding, I began working on some rough sketches of what this feature might look like

  • Topic title

  • Topic message (limited to some max length)

  • Pic of poster

  • Who’s talking about it

    • Show active commenters

    • Show number of comments

  • Some cta to actually click through to the post

  • Invite them to ask their own questions/add own comment

  • Display tags to organize the topics

Desktop

  • All of Mobile

  • Name of poster

  • Explore cards

 

Wireframes

 

Mid fidelity wireframe mobile

Mid fidelity wireframe desktop

 
 

Final

 
 

Bark For Schools Homepage Revamp

Role: UI Design, Information Architecture, Wireframing, Prototyping
Objective: Streamline/update the current Bark for Schools homepage and add in new value propositions
Team: Bark for Schools team, Creative team, Marketing, 2 Designers, 2 Copywriters, Front end developer
Platform: Web
Tools: Sketch, InVision
Timeline: Jan 2020

Background

Bark for Schools is a free account monitoring and web filtering service used in schools across the U.S.

The task here was to clean up, redraft and reorganize existing sections, update old statistics, and add new partnerships.

Audience

  • Parents

  • Schools

  • Superintendents

  • IT admins

Business Goals

  • Encourage/Increase school sign ups

  • Increase OnCall signups

  • Increase awareness of Bark’s values to schools and parents

 

How does this fit into the product?

This is a public facing page that can serve as a main introduction to this product and Bark’s brand.

How do users access this page?

Users can find this page on the main Bark website navigation or more organic ways such as typing in the url or finding it through an internet search for Bark.

 

Wireframes

We determined the sections, graphics/assets/copy during our kickoff meeting by way of collaborative discussion with both the creative team and the team requesting this landing page.

Original

V1

V2

Final

My time with the Bark family was truly a life changing and eye opening experience. I learned so many invaluable things about the UX/UI process, users, the efforts that go into the use of AI and data science in a product as well as the the varying ecosystems of a tech company. I am thrilled that I’ve had the opportunity to work in the very fast paced, start up world and I also realized that I would love to do more research and user testing to better inform my design decisions so that I am delivering the solutions that enhance the user’s experience based on their goals.

Previous
Previous

Emburse: Product Design

Next
Next

Zest: UI/UX Design, Information Architecture, Prototyping