https://www.julio.io/global-search daily 0.75 2022-03-03 https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/8e902ac3-5f57-47b9-a21f-c2e1f791357b/IA.png Search - Design Strategy The big idea was one search bar to rule them all. All app content would be searchable with one bar — features, transactions, offers, etc. To design it, we began at the end and worked our way backward by first creating a long-term vision, testing it with users, then breaking it down into multiple small releases. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/30e432e7-c64a-4f20-b408-b21efc0f43cb/Scenarios.png Search - Step One: Inventory Our first step was to map all possible search scenarios. In many cases we had no native journeys to match a likely query. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/20f4a798-9aba-4bc8-933a-f9875623e4fb/Nav.png Search - Prime Real Estate Given the potential for Search to become a primary navigation tool, we moved the entry point from the top of the Home Screen into the Main Navigation — giving it its proper place at the top of the hierarchy. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/075f5fb6-53e7-4758-ac8c-d35dc1ddc109/Landing.png Search - Pre-search With search as a landing screen, we could bubble up relevant content before users even searched. Helpful actions were based on common reasons customers called in after having used the app. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/1c709c30-a187-4934-95ea-fd69876bba0b/Phases.png Search https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/a468b1c5-0883-4213-acad-094f8550a091/Marketing.png Search - Most Searched Expectedly: users were primarily searching for merchant names Unexpectedly: users were searching for content related to marketing campaigns. Since this content was not available in the app, we prioritized a marketing placement on the Search landing screen for early 2022. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/a994b1c6-6e0a-414a-a661-267eb6bc3bc3/Outcome.png Search https://www.julio.io/home daily 1.0 2025-09-30 https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/2c348156-58f2-456c-8eca-dee5b2ddc774/Search+Thumb.png https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/d0d34a75-7c57-44a6-947e-d212b10debfe/Offers+Thumb.png https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/f5f676c5-a34e-4b52-b08a-07c8a8a25a53/Dark+Thumb.png https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/5d98dbf9-7e44-49b9-8031-394335ae3e0b/Wreath+Thumb.png https://www.julio.io/about-1 daily 0.75 2022-03-04 https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/1634493064864-N5UYGS1BQ6A7UYXX0BCG/Red+Lady About - Julio Cesar Gonzalez I am an artist turned designer, who believes great product design exists in the space between art and science — my Goldilocks zone. I combine user research, analytics, and behavioral science with an eye for visual design to produce beautiful digital experiences with impactful business outcomes. https://www.julio.io/dark-mode daily 0.75 2023-01-13 https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/2897c606-7358-41a5-ab54-0a2ca18aa83f/Charts.png Dark Mode - Strategy The first step was to chat with all the mobile designers and get an idea of current and future data visualization needs. The strategy was to design a system we could implement tomorrow but was flexible enough for the future while adhering to brand guidelines and the web channel’s design system. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/c27e0719-e3f8-487f-bd4e-bcd81e169b93/Families.png Dark Mode - Color Families I grouped visualization into 3 color families: General Data Card Member Activity Merchant Categories https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/63f873ab-70e6-452f-9e0c-b7edfdec87b5/Semantic.png Dark Mode - Semantic Colors While I explored adding more colors to our system, the idea of a semantic color system arose. By naming colors based on use rather than hue, the color palette could adapt to modes such as dark mode, high contrast mode, etc. With a shift in the product roadmap, we pivoted from data visualizations to focus on dark mode. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/79e6b92a-c51e-4ec6-84ed-9f863a93607d/Base+Colors.png Dark Mode - Base Palette I began by extending our current color system into multiple shades and tints to make more colors available while staying within our brand guidelines. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/e61bb0e7-5924-442a-81db-989371252851/Semantic+Types.png Dark Mode - Accessibility Then it was time to build the semantic palette. Given that accessibility standards are higher for text than graphic elements, I broke the colors up into two categories: text/icons and layout. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/3644b56b-cb0a-4f07-ab29-58f83f6277dc/Semantics.png Dark Mode - Dark Mode I created a table to document the color system across different modes. The rows were the semantic names and the columns were the modes light and dark. Each column had a color from the base palette that corresponded to the semantic name. Dark mode presented an opportunity to leverage our brand colors rather than simply using a black and gray palette. https://www.julio.io/offers daily 0.75 2022-03-03 https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/523dc917-01b7-4b59-bf24-c8e01daaca51/Audit.png Offers - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/a2175536-1199-4a5c-9ffe-e019c7b30b35/List+vs+Carousel.png Offers - Step One: Zoom Out We collected the project requirements then got to work auditing the current experience, gathering inspiration, and past research. We fleshed out two possible structures: List view with filter and search capabilities Carousels and subpages https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/50b46e75-b2e4-4265-9309-338d67a3c532/Add.png Offers - Add = Hinzufügen Once the long view had been established, it was time to dig into the details of the one-tap mechanism. Because the app serves over 20 markets globally, we were cautious with our use of copy. Given that “add” translates to “hinzufügen” in German, we moved away from an explicitly labeled “Add” button to a less-clear but ultimately more scalable plus sign. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/5a89051e-4cee-49c1-a210-c632da70dcd0/Bottomsheet.png Offers - Bottom Sheet Legal required offer terms to be accessible within a single tap after an offer had been enrolled. We felt navigating to a detail view after tapping the plus button would be an awkward interaction. Instead we landed on using a bottom sheet — keeping the user within context while satisfying the legal requirement. https://images.squarespace-cdn.com/content/v1/6169cb92f2d40507fda1bedf/05e445df-2fac-470f-809f-9b42b6fe7c2d/Outcome.png Offers - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.julio.io/wreath-player daily 0.75 2025-11-19