Moving out of ATX, we sold items on Marketplace and Craigslist, but also needed a single rollup that we could send around. It’s a simple site containing an index and detail page, still viewable.
Wil Nichols-Higgins
Staff Designer at Zello
Detail pages were an expanded version of the index’s item card, containing photos, original listings, related items, and a CTA.
Moving out of ATX, we sold items on Marketplace and Craigslist, but also needed a single rollup that we could send around. It’s a simple site containing an index and detail page, still viewable.
The site adapted easily between mobile and desktop form factors.
More could’ve been done to mobile-optimize, but I wanted to keep the DOM as simple as possible.
The detail page adapted easily as well.
I’ve had a few opportunities this year for less-impactful UI improvements in the Zello app. These designs have been floating around since we added the Android main menu much earlier in the year, and I had time at the start of December to complete this in dev.
The icons used belong to a library that Sam Valdez and I have gradually added to since 2022.
Two competing concepts for a live-translation interface were competing: single vs multiplayer. I used this prototype to demonstrate how one’s smartphone could be used between two individuals. Unmute to hear my lovely voice.
We started with assessing whether existing interfaces could be modified as a PoC, but determined that the UX failed to meet minimum acceptance.
Switching to a landscape view allowed for larger text, more legible when holding a phone between two users.
We continued pursuing the two-player model, optimizing for users side-by-side or facing each other The darker palette created the most visible text, presumably on OLED displays.
It was then decided to pursue a single orientation.
We started exploring in-person translations by modifying existing interfaces. Could we trivially adapt an existing surface to two individuals using it in-person, translating between their spoken languages?
No, we couldn’t. I quickly pivoted to a two-player interface optimizing for legibility.
We flirted with more interesting — in this case, “AI-powered” — visuals.
The two-player UI eventually evolved into a fullscreen positioned for two individuals facing each other.
We eventually settled on a portrait screen for two users abreast, not opposite each other.
Few users are aware that they can page over Zello’s talk screen header to navgiate to the next or previous contact, despite it being the app’s most-used screen. This design and proof of concept addreses the behavior's discoverability.
We DIY’d much of our wedding. With 20-20 hindsight it would’ve been a more cohesive package — our colors evolved along the way — but it was fun. I drew out portraits and invitations in Procreate while Darien similarly handled the hand-lettering. The site was statically built with 11ty, used Netlify Forms to record RSVPs, and a combination of local cookies and Netlify Forms plus a webhook to customize the site based on your response. Five different groups of guests had customized content and viewing permissions, all accessed via a handwritten six character code on their printed invitations. Codes were saved as a cookie so that viewers could easily return.
The site was mobile-optimized and reused the same layout on desktop, clamped to a max-width. While the dark theme fit our aesthetic less, it’s a kindness to viewers.
Five groups of viewers had different invitations flows depending on which events they were invited to, their party size, and their dietary restrictions. Submission saved a cookie with their form object so that the site would reflect their immediate suggestions, and then the site would rebuild, reflecting those choices as pulled from Netlify Forms. They were then able to return and edit their selection, seeing their past choices.
Following form submission, the homepage re-rendered depending on their response.
I designed and build a prototype to test a few topical pain points, and walked next door to the Mean Eyed Cat to try it with randos and a beer. It specifically tested whether new users would figure out to connect to a channel, how they would use the talk button, and if they would use the configurable secondary-message button.
After brainstorming methods to ship a voice-commands feature on our Android app, a contributor suggested we use Whisper to recognize voice. I built this prototype to test to what degree Whisper would, out-of-the-box, match our proposed commands and realistic contact names, and wheher I needed to apply a phonetic algorithm to distinguish similar names. The prototype UI reflects which command and contact or channel name Whisper interprets, and returns us Whisper’s trancscription of your speech.
Zello Bridge is a web-based application that allows users to link separate Zello channels, Zello Work channels, and select radio gateways like the JPS. It can even be set up to allow you to use your desktop as a VOX-activated channel member.
Zello Bridge is a web-based application that allows users to link separate Zello channels, Zello Work channels, and select radio gateways like the JPS. It can even be set up to allow you to use your desktop as a VOX-activated channel member.
While Zello Bridge on mobile is more useful for monitoring connections, on desktop the user can create new connections, or drag-and-drop configuration files from our legacy PC app.
In our 2023 hackathon, Alex G, Mike Kiurshin, and I partnered to create an alternate online Zello Work sign up which we split test the following Summer. Rather than a signup form and then exposure to our full work platform, this demo was enabled with users with a single click, giving them exposure to a sandbox-like setup.
In our 2023 hackathon, Alex G, Mike Kiurshin, and I partnered to create an alternate online Zello Work sign up which we split test the following Summer. Rather than a signup form and then exposure to our full work platform, this demo was enabled with users with a single click, giving them exposure to a sandbox-like setup.
At this point, we hadn’t yet shipped our In-App Purchase allowing users to start trials from their mobile devices. Demos were started primarily from desktops.
Building on earlier work, I wanted to demonstrate how a new tabbed navigation could coincide with a current contact toolbar.
Having worked in mid-fidelity through most of the project, a final coat of paint went on over the final month. Both web and native apps offered light and dark themes.
The mobile apps were a later-project addition where we had entirely focused on web. I’d’ve loved the opportunity to pursue a native interface as opposed to a wrapper, but this was the fastest means to a cross-platform build.
We took time testing The Minte’s single-clean and package scheduling flows, anticipating that packges’ drag-and-drop would need validation.
This flow was much less risky, but was included in the prototype for comparison.
The Minte had struggled with teaching users to use their scheduling UI. This prototype proposed a coaching UX.
I created this prototype to demonstrate a main/detail navigation in The Minte’s desktop scheduling screen.
As iOS matured and a consistent and quality OS appearance emerged, we significantly updated Zello’s appearance with a less opinionated, more maintainable look. At this point Zello lacked a strong visual brand, and we leaned into as “stock” of an appearance on our mobile platforms as we could.
Building on earlier work, I wanted to demonstrate how a new tabbed navigation could coincide with a current contact toolbar.
An earlier iteration of this idea explored a way to maintain our familiar talk button in a more compact format.
Moving on from our administrative console, my earliest mobile work at Zello involved designing dark and light themes for our iOS app.
This was Zello on iOS before my visual update.
I was hired by a small Austin company to take their comps through UI iterations and to a usable prototype. They wanted to ship a remote-control for an adult device, requiring impaired and often hands-free app use. The solution relied both extensively on haptics, bright colors, and ambient, reflective light to communicate registered state.
This screen and a marketing brochure were the extent of priming material provided to me.
