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 detailscarousel 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.