Brett Barros

Time 2022-09-14 17:29:32

Web Name: Brett Barros

WebSite: http://www.brettbarros.com

ID:314904

Keywords:

Brett,Barros

Description:

Portfolio Expeditions Appointments MindMeld Hooklogic

Scroll or use Arrow Keys

Design Lead

Mobile, Voice, and Web

UX Lead with 10+ years of experience at Google, MIT, and startups at all stages. Here are a few highlights:

Among the top 3% of Google applicants invited to Area 120, the company's internal incubator. Architected G Suite's design pattern platform, establishing a framework for extending Material for work. Founding designer for MindMeld, a 2012 TechCrunch Disrupt Finalist acquired for $125m. My resume is available as a PDF. If you like what you see, you can email me directly.

Expeditions

Google's XR App for Students

What if you could take a field trip to the Pyramids or walk around a strand of DNA? I led design and piloted the latest Expeditions VR/AR app with hundreds of thousands of K-12 students.

Part of Google's $1bn pledge to move America forward, as announced by Sundar. Over 6.5m downloads on iOS / Android. Over 1,000 articles listed on Google News.

Area 120

Google's internal incubator

What if booking appointments was easier? I designed and piloted an app that gave businesses a 2nd phone line with super powers.

Led a team of four Googlers to build and pilot an app within 4 months Launched to XX businesses, achieving 75% user retention over a 6-week window. Powered X,000+ converting actions, worth $X00,000+ in revenue

Mindmeld

Contextual voice search: iOS App

Imagine if Siri background-processed your phone calls. What could you do with statements like, "I'll introduce you to Jordan at Philz Coffee?" As founding team designer at Expect Labs, I designed and launched MindMeld to explore this question.

I presented at Tech Crunch Disrupt, leading to finalist placement and additional funding. I designed everything from the ground up, including this video demo of the product in action. I co-authored several approved patents focused on voice and interaction design.

HookLogic RSX

Ads on eCommerce SERPs

If product ads are effective on Google, how well do you think they'd perform on the search results pages for Target, Sears or Walmart? At HookLogic, I led the redesign of RSX, an ad platform central to the Criteo Acquisition.

I championed the UX and designed lo-fi / hi-fi mocks, commended by senior stakeholders and the CEO I led the front-end development of eBay's self-serve ad platform, a client initiative I architected client-side ad delivery using CORS iframe-window messaging and DFP

Contact Me

Augmented Reality brings magic into the classroom. The teacher app behaves like a media player. Casting expands to broadcast to student devices. Attention can be directed with a spotlight, first set in the teacher app, and then viewed in AR by students. AR Demo AR Demo Lesson Browsing Lesson Browsing Teacher View Teacher View Callouts Callouts Promo Video Appointments Marketing Site I designed and engineered (FE) this page as a marketing asset when recruiting businesses to our platform. It's live at salon.area120.com. Onboarding flow puts the user in control and keeps things simple. Incoming call screens show the call's context before the user answers. Schedule Selection Interaction I designed this in-calendar cursor to help businesses book clients within the context of their workday. Client Center The notification tab handles all client interactions. Salon Brand Page I designed and engineered (FE) this page as a branding page for businesses and gateway to booking their services. Salon Booking Page I designed and engineered (FE) this page as a booking site (and widget) for SMBs. Branding Branding Onboarding Onboarding Incoming Calls Incoming Calls Selection Selection Messaging Messaging Business Page Business Page Web Booking Web Booking MindMeld Waitlist Screen In keeping with a partial-rollout strategy, I designed an auth screen that lets individual users sign up early and see their position in the rollout queue. Multi-Party Video Panel The video screen should be kept simple. The current speaker takes front-center, while video of you and other participants defaults to the bottom of the screen. The video camera button is in a pressed state, showing how the user could toggle camera views. Discovery Panel Just a swipe to the right, users can view a conversation log (left) and preview paper-like results (right) that are pulled from a variety of sources. The icon in the upper left corner shows an audio log being actively processed. Sharing Panel One more swipe to the right and you'll see the conversation's most recently shared item. In this case, you can see directions to (and key meta data for) a local sandwich shop. Any result can be shared with a simple drag gesture. Sharing Scrolled A log of shared items is placed below the previously shown featured item, adjacent to a vertical timeline. This log also contains status messages, for example the entry and exit of conversation participants. Phone Convo Log This iPhone mock has more limited real-estate, so the convo log is broken out into its' own panel. The audio processor (bottom center) is also in a more easily tappable location, and is mocked in its processing state. Phone Results Again appreciating real-estate, results are stacked pieces of paper. I've intentionally designed three visible titles, two of which are large enough to tap, and one large enough for previewing. For more, try my motion design prototype. Waitlist Waitlist Video Chat Video Chat Discovery Discovery Sharing Sharing Archive Archive Phone 1 Phone 1 Phone 2 Phone 2 Watch Demo 1st Wireframe Sample Information architecture can only go so far in the abstract - wireframes create an invaluable spatial context for discussion. This particular shot communicates the organization of content through grouped navigation. 2nd Wireframe Sample This second wireframe communicates more complex ideas, for example the conditional state of the funds block. When a low balance meets a minimum threshold, its visual weight can amplify to draw attention to the key action. Navbar in Action This hi-fi mock shows the various static states of the navigation. The dashboard is active, while reports is being hovered and contains a sub-menu. The iconography livens up the interface and enables visual matching on later encounters. Account with Low Funds An initial requirement was an always-visible "add funds" link in the navbar. This design demonstrates that it can be even more prominent, but conditionally displayed, thus prioritizing the right actions at the right times. Category Dropdown Not every menu is a vanilla select menu. This mock shows an alternative approach to multi-selection and allows for differently emphasized items. I also explore the possibility that some categories could have alerts. Bidding Page Does the design have legs? It's important to explore multiple pages in a redesign, as stylistic consistency can create dependenceies. The headline / input layout carries over nicely, and grouping page contents with short headings still works. UI Prototype In addition to the wireframes and high-fidelity mocks, I translated my vision for the RSX dashboard into an interactive prototype using HTML5, CSS3 and Javascript. I also used Bootstrap for responsive defaults and dateranges, and NVD3 for charting. Lo-fi 1 Lo-fi 1 Lo-fi 2 Lo-fi 2 Nav Nav Low Funds Low Funds Categories Categories Budget Budget UI Prototype

TAGS:Brett Barros

<<< Thank you for your visit >>>

Hot Websites