http://www.kellymcmanus.design/about daily 0.75 2024-09-09 http://www.kellymcmanus.design/portfolio daily 1.0 2024-08-17 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/c81438b7-c4a6-4561-b8b1-c8abce6cf7e8/RobertIndiana3.png Portfolio - ROBERT INDIANA • UX/UI • Front-end development • Redesign • Catalogue Raisonné https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/62ae0530-8797-4055-94d3-d9fb1e0ec0e1/GuyHepner.png Portfolio - GUY HEPNER GALLERY • UX/UI • Front-end development • Redesign • Optimization • E-commerce https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/0abefa8f-fc2d-4a8e-8adf-2707b486dc9f/exhibitegif.gif Portfolio - exhibit-E • Product design • New features • SaaS https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/1e76b700-5f53-4e4a-b677-b177466ceaa0/Kenzo.png Portfolio - KENZO NAPA • UX/UI • Front-end development • Redesign https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/e77cd308-645b-4ce3-bae4-508331b763ec/Wildflower2.png Portfolio - WILDFLOWER • UX/UI • Front-end development • Redesign • Real estate developer • B2B https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/c92aa9db-c433-4d8a-9d54-c93c7d597855/RacehelUffner4.png Portfolio - RACHEL UFFNER • UX/UI • Front-end development • Redesign • Branding https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/a293c592-3350-4cb8-92df-ecffa88a262b/1.png Portfolio - LIFE STORIES • UX/UI • Front-end development • Redesign • Nonprofit • Educational Resources http://www.kellymcmanus.design/robert-indiana daily 0.75 2024-08-13 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/c2641f5b-9b1e-4ea0-8e0d-1071d7108bf1/7.png Robert Indiana - ACCESSIBLE DROPDOWNS This large site necessitated an overhaul of how the client presented its large library of content. A new, accessible dropdown menu was designed and developed - not only just to the benefit of the Robert Indiana Foundation, but also to be rolled out for all future clients. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/e86c20f8-d18e-4909-b113-4511b17b7af7/blank-small.png Robert Indiana - OVERVIEW The official website of renowned artist Robert Indiana is dedicated to his life and work. Inclusive of rare archival footage, and in-depth articles which are shown using dynamic scrolling and scaling animations. The various effects complement the comprehensive look at Indiana's profound impact on the art world. The previous website faced technical limitations in showcasing the extensive body of work and lacked a defined design direction. The goal was to create a new website that blends visual impact with a narrative approach, seeking to heighten awareness and appreciation for the prolific artist. The website needed to handle substantial content, enable user-friendly navigation, and support a diverse range of back-end capabilities. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/30fd0c3c-52ed-4b3a-8296-56526cedb0cb/10.png Robert Indiana - LARGE ARTWORKS Limiting the grid to a single column maximizes the impact of the images being showcased. This approach ensures each image receives full attention, enhancing the viewer's experience and highlighting the intricate details effectively. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/97a87e4f-1b80-4579-a5cb-34ebc6e05b1b/blank-small.png Robert Indiana - INVOLVEMENT • Lead Designer • Front-end Development • Collaborated with Engineering and Product Teams • Aligned with Senior Leadership and Stakeholders http://www.kellymcmanus.design/guy-hepner daily 0.75 2024-12-20 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/e4fe4eba-3356-4e1d-b5f4-838b64589d98/blank-small.png Guy Hepner - STRATEGY TWO Large thumbnails with associated thumbnails revealed upon click • Controlled Exploration: Users may prefer clicking through and exploring the collection in a linear fashion. • Limited Overview: Users may not be able to quickly gauge the diversity of the collection without an initial broad view. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/68527a1c-268a-470b-aeab-d346ab7f4ec9/blank-small.png Guy Hepner - OLD VERSION OF THE ‘ARTISTS’ PAGE https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/23055a89-00ef-433f-b714-2eed3ba8008e/0.gif Guy Hepner - USABILITY TESTING Key A/B tests were conducted to understand if the new designs improved the categorization of a large artwork collection. I created clickable prototypes and led usability testing, identifying both advantages and challenges. Based on the valuable feedback “strategy one” was implemented. To mitigate visual overload in this strategy, we limited the number of displayed images and added a “view more” button, allowing users to load additional content as needed. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/5c207f4d-0306-45b5-b298-a270f38494d6/1.png Guy Hepner - RESPONSIVE DESIGN By taking a mobile-first approach, I ensured that users on smaller screens have an optimized experience while creating a scalable design. Focusing on mobile-first allowed me to address constraints like screen size and bandwidth early, resulting in simpler, faster, and more efficient solutions across all platforms. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/667b6d41-5d3a-4588-8e6d-dd806f44f5fa/copy-of-11+copynew.jpg Guy Hepner - BEFORE & AFTER https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/c6b81da3-6cdc-4d7d-b2dc-f6e6c6f739c6/blank-small.png Guy Hepner - OLD VERSION OF THE ‘SHOP’ PAGE https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/889ff042-bf65-43b7-ae4f-88f107d2f3af/blank-small.png Guy Hepner - INVOLVEMENT Lead Designer Front-end Development Collaborated with Engineering and Product Teams Aligned with Senior Leadership and Stakeholders https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/f01cfe9f-dd19-411a-a140-b209f45ccee3/blank-small.png Guy Hepner - STRATEGY ONE Displaying all thumbnails with links at the top to sort • Quick Navigation: Users can easily jump to a specific category by clicking on the links at the top. • Visual Overload: Having too many thumbnails displayed at once can overwhelm users, making it difficult for them to focus on individual artworks. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/971e23b1-5bd6-47a4-bcc6-fa3a7d76f8af/5+copy+2.png Guy Hepner - 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/57d362da29687f1a257ccd80/4a73e7dc-2814-43af-86d3-31d4357fff07/blank-small.png Guy Hepner - OVERVIEW As part of a small but mighty design team, I played a pivotal role in reimagining all user-facing touchpoints, including landing pages, e-commerce, CTAs, responsive design, and performance optimization. My contributions spanned the entire design and development process, including user research, ideation, wireframing, visual design, user testing, and front-end development using Sass, HTML, JavaScript, and Git. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/fc89f76b-5587-408d-8eb4-da440995354c/blank-small.png Guy Hepner - NEW VERSION OF THE ‘SHOP’ PAGE https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/f778e8dc-f60b-44f9-9aa2-e96f3b611e82/blank-small.png Guy Hepner - NEW VERSION OF THE ‘ARTISTS’ PAGE https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/eb637152-67fc-4b0a-b9af-03e946a13037/4.png Guy Hepner - E-COMMERCE Partnering with product and engineering teams, we are now able to keep the entire transaction within the new shop to ensure a consistent user experience, which has translated into tangible financial gains for the gallery. Based on our research, avoiding redirects to third-party payment pages is crucial, as 58% of consumers will abandon a purchase if the payment process is complicated. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/800c4e37-e3cc-4102-8479-db8aa195129f/28.png Guy Hepner - 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/57d362da29687f1a257ccd80/1ea34e24-82bf-4527-8fcd-361c26424a88/2.png Guy Hepner - PERFORMANCE OPTIMIZATION Implementing AJAX requests for dynamic content loading was essential in preventing information overload and maintaining a seamless user experience. This approach has reduced page load time by 40%, which is especially important for our mobile users on varying network conditions. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/bd5a5392-a8a3-4db7-a5de-56f46e6cbbb3/styleguie2.png Guy Hepner - STYLEGUIDES Once the design was finalized, I created style guides in Figma using components and auto layout. These guides include annotations, text notes, and measurements that automatically adjust with any design changes. This serves as a valuable reference for designers, developers, and other stakeholders involved in both the creation and maintenance of the site. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/b6a8f7f6-65f9-4909-a0b4-5970405df36b/19.png Guy Hepner - 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/57d362da29687f1a257ccd80/d1a53b38-e0db-4954-9d55-27fe786474a8/blank-small.png Guy Hepner - IMPACT The previous site was outdated and lacked e-commerce capabilities. The redesign introduced a fully scalable site with a new shop section that significantly drives sales and revenue growth. Additionally, we enhanced the overall design to align with the brand identity, boosting engagement and creating a more cohesive user journey. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/e4d3e818-daff-4866-8b0b-abb06ae721ad/site+architecture.png Guy Hepner - SITE MAP Following the initial kick-off meeting to assess the client's needs, I mapped out the full user journey. The primary focus was streamlining the checkout process, which I reduced from 7 steps to 3 through multiple iterations: 1. Cart review (with edit capabilities) 2. Shipping and payment info 3. Order confirmation Key Features: - Integrated a 'buy now' button for single item purchases - Added progress indicators to provide context within the flow https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/4d15a4d6-e569-452b-ba9a-33f403c3a1f3/discovery.png Guy Hepner - TYPOGRAPHY ITERATIONS I explored visual directions through moodboards to determine font styles that aligned with the brand. The ideation phase featured a workshop with team members to review and refine early concepts. “Version 2” emerged as the frontrunner for its readability and high-end fashion influence. We established a typographic hierarchy with three text styles for consistency. I then gathered feedback from key stakeholders to ensure alignment before moving forward with creating mockups. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/c7e9ba78-61fc-48d8-9b33-d0e69c857080/Screen+Shot+2024-02-09+at+10.36.54+PM.png Guy Hepner - 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/57d362da29687f1a257ccd80/4502aebc-d7eb-4adf-adf3-c0fddbfb5da7/development.png Guy Hepner - WORKFLOW Based on the sitemap, I can determine the best approach for developing the custom admin for the client. This is preformed using a proprietary platform that encompasses diverse modules with varied functionalities for different content types. For each module, I have the flexibility to customize the design using CSS and JavaScript. The code itself is written within Visual Studio Code and undergoes processing/management through a Git workflow. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/22dacb74-8315-4bd8-8bf3-e5272693e17b/27.png Guy Hepner - 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/57d362da29687f1a257ccd80/100332a0-041a-44d2-8444-174835fdfa5b/18.png Guy Hepner - 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/57d362da29687f1a257ccd80/5f46e6b4-aec1-4852-994a-75b81a4e7261/17.2.png Guy Hepner - 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/57d362da29687f1a257ccd80/bb8c15a1-3dda-4f61-b0b6-ada2860851db/17.1.png Guy Hepner - 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/57d362da29687f1a257ccd80/83538a0f-9c25-40b6-bc5d-315fc2b56d7d/3.png Guy Hepner - NEW FEATURE / WCAG AAA STANDARDS Collaborating with the Engineering Lead, we successfully built an interactive map into the existing codebase using a third-party solution. Additionally, the footer was updated with a more subdued color scheme, enhancing the overall aesthetic and aligning with the gallery’s branding, while ensuring all color combinations meet WCAG AAA standards. http://www.kellymcmanus.design/process daily 0.75 2024-08-21 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/52de46c9-9f45-4e8f-b3d1-d68b3168be4e/blank-small.png Process - PROTOTYPES Interactivity is an excellent way to engage clients with their upcoming site. Whether through microinteractions inspired by other sites, click-through prototypes in Figma, or quickly assembled HTML CodePens, providing something clients can physically interact with is a powerful method to keep them involved and encourage valuable feedback. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/909e0ff8-6d44-4de0-a8f5-0a28fb3dbfe3/blank-small.png Process - USER TESTING A fantastic tool for obtaining detailed feedback as well as qualitative insights on more abstract aspects, such as art direction and imagery. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/817ea467-13bf-4aca-a1a2-a7937c0758a4/blank-small.png Process - 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/57d362da29687f1a257ccd80/098219b9-09a8-41e3-8f5f-373753cb204c/blank-small.png Process - A/B TESTING A valuable method for gathering data, such as through Analytics, to provide a scientific basis for design ideas and help persuade stakeholders of proposed changes. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/761cbc23-7b9d-4658-a229-44bee878c626/blank-small.png Process - WHAT IS THE POINT? Defining objectives, both from the client's perspective and internally as a business, should be an early consideration. Are there specific KPIs or performance metrics the client is aiming for? If so, the process can be tailored internally to support those goals. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/a473e2f0-51cb-4b98-8f87-83a234222b07/blank-small.png Process - MOODBOARDS Comparing a client’s potential future site to their competitors—whether in terms of branding, layout, or information hierarchy—is effectively visualized through a moodboard. This creates a tangible and interactive reference to guide the discussion. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/bf2af24a-f223-4634-8cf9-65d84cafdfc4/blank-small.png Process - IS THIS POSSIBLE? It is essential to integrate feasibility considerations into each design decision made during a project. Whether a designer possesses technical expertise or developers are directly engaged in design reviews, the key is to present clients only with options that align with the agreed-upon scope. This approach helps manage expectations, ensuring that what is presented is technically achievable and contributes to the overall health of the project. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/479bc1d8-baa7-403e-a0f4-b11627f5c3b9/blank-small.png Process - INTERNAL/EXTERNAL FEEDBACK All feedback is valuable. As a designer, it’s crucial not to become too protective of a project. It's easy to become narrow-focused on a single solution, so incorporating criticism and feedback is essential for finding the best approach. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/35297917-9328-47fe-8905-472e719bb9bc/blank-small.png Process - BUG FIXES Essential for any polished product—testing for bugs across a wide range of browsers, systems, and devices. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/b914ef8a-1e67-4ea4-a429-597bc89492dc/blank-small.png Process Navigating the design process is a nuanced endeavor. It often involves striking a delicate balance between a meticulously structured approach, characterized by well-documented tasks and strategic automation, allowing seamless collaboration within the team. Yet, there's no universal formula. Imposing an overly rigid structure may stifle creativity, leading to generic and formulaic outcomes. This underscores the importance of maintaining a healthy equilibrium — a flexible process that can adapt to the unique demands of diverse clients and projects. It's this dynamic harmony that fosters innovation and ensures a bespoke touch in every endeavor. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/3bca817b-ef96-48a3-96fd-ab30ff070127/blank-small.png Process - HiFi VISUALS This is the culmination of many prior processes—establishing a solid foundation for well-crafted, high-quality designs. These designs require time, and so do any changes to them. That’s why it’s crucial to build a strong foundation beforehand. Ideally, at this stage, feedback should be minimal, quantitative, and easily actionable. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/2ba8dce2-84df-457a-90b9-1e7dffcf1312/blank-small.png Process - WHAT NEEDS TO BE KNOWN Gathering crucial information, whether during the discovery phase, design kickoff, or initial discussions, is imperative. The chance to ask fundamental questions should be done early in the process to ensure thorough understanding and effective planning. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/bcf127ba-a8c8-40ca-b1ba-9ace39c8fd46/blank-small.png Process - WIREFRAMES Wireframes provide an initial glimpse of a site’s potential in terms of page and content layouts. Their level of detail varies depending on the project. While grey boxes offer a basic framework, it’s essential to consider the specific content that will eventually replace them to fully understand the design. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/45b1f6b2-0bf7-4106-a287-46e705372410/blank-small.png Process - CONTROLLING SCOPE During design reviews, whether with clients or internally, it’s easy for feedback to stray into unproductive areas. While it’s important for people to feel involved and heard, feedback is only useful if it addresses feasible and relevant aspects of the design. http://www.kellymcmanus.design/exhibite daily 0.75 2024-12-20 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/59dcc79d-367d-422e-b1f5-3e654cd14a0c/scale.png exhibit-E - QA Collaboration with developers during the hand-off process is essential. I provided ongoing support to ensure a seamless implementation of the design. The frontend underwent multiple rounds of QA testing to identify and resolve any bugs or glitches. By addressing potential issues proactively, we were able to deliver a polished and reliable interface for all users, regardless of their device. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/5f694a46-6bef-4436-9d20-94fd57752f69/01.png exhibit-E - LAYOUT PROTOTYPE Working closely with the Head of Design, we developed a prototype to showcase the full range of layout options. This framework was instrumental in driving decision-making, defining the product scope and priorities, and was utilized across exhibit-E to translate opportunities into potential enhancements. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/fc0dcfc8-2d82-4dac-969a-374147a7ea3f/5.5.png exhibit-E - USER RESEARCH By partnering with designers and engineers we explored customer insights to effectively implement a data capture form in exchange for access. Our research shows it benefits both the visitor and the gallery. • It allows galleries to build lasting relationships with people who might not have signed up for a mailing list or inquired about artwork otherwise. • Visitors stay updated on relevant exhibitions and artworks and gain access to high-quality content without payment or subscription. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/1713918903835-79IQ53UEXJT0YNSXX6ZC/2.png exhibit-E - PRODUCT STRATEGY I contributed to the overall product strategy and direction of the "View on a Wall" feature. This functionality allows visitors to preview artworks in a virtual space with exact dimensions, helping them better understand the scale and visualize the piece in their own gallery or home. By enhancing the digital storytelling experience, this feature fosters a personal connection with the artwork, boosting interest, inquiries, and ultimately increasing conversion rates by up to 40%. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/1713976933068-LHYFBTDKNXZGOMHSHCA0/2.png exhibit-E https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/1713976934410-5NK12HW49AQ2PLLXQAZQ/3.png exhibit-E https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/1713974987719-WDR1RWMT4UUIA3R7W6IR/1.png exhibit-E https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/1723306788991-5P0C3NQ51GJ4C6OMO61T/3.png exhibit-E https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/aed2d980-8d4b-42f5-9e84-89e6b46da3a6/blank-small.png exhibit-E - INVOLVMENT OVERVIEW https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/0c2dde6e-498f-4ff9-b877-609ef2d1287c/blank-small.png exhibit-E - OVERVIEW Within the product design team, our role was to envision possibilities, open minds to new ideas, and push boundaries. We advised on content creator tools, data capture capabilities, virtual reality, and much more. Working cross-functionally, we founded new product visions and built prototypes to validate concepts. We partnered with research, engineering, and strategy teams to align innovations with business needs. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/1713918854414-QORUSY5NWZ2874PQDG78/1.png exhibit-E https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/1713918661650-401JJW9LK15U5AIXNEGN/3copy.png exhibit-E https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/c667b5a7-3ec4-40a2-86af-4966337bea55/VRgif.gif exhibit-E - HIGH-RESOLUTION COMPOSITIONS I led the design of 30+ custom viewing rooms with dynamic layouts and elegant animations that seamlessly integrated videos, audio, quotes, and information. By presenting these concepts to executives and stakeholders, I secured buy-in throughout the project lifecycle, resulting in increased website engagement and a threefold increase in sales inquiries. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/75adae1c-8e09-416a-9464-2a1b478ae09e/blank-small.png exhibit-E - IMPACT As part of a collaborative team effort, I played a key role in reshaping the future of art businesses by launching features for viewing rooms that turned them into major revenue streams and top marketing resources. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/69c9f710-bfe6-4628-9ca0-95ff39e18e19/5.png exhibit-E - USER FEEDBACK Integrating "inquire" call-to-action buttons throughout the viewing room enables galleries to collect valuable buyer information, leading to a boost in potential sales. Based on user feedback, adding the ability to create custom thank-you messages directly from the CMS has enhanced platform functionality, increased sales, and fostered more personalized user interactions. http://www.kellymcmanus.design/rachel-uffner daily 0.75 2024-08-09 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/7c4a5953-af5d-4179-a6cf-4810b6c58859/blank-small.png Rachel Uffner - INVOLVEMENT • Lead Designer • Front-end Development • Collaborated with Engineering and Product Teams • Aligned with Senior Leadership and Stakeholders https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/58810aac-027f-489d-9fc7-63837f24a2c2/2.png Rachel Uffner - DYNAMIC LAYOUT Creating a dynamic homepage featuring larger images and curatorial options has significantly boosted user engagement. The enhanced visual appeal and improved navigation encourage visitors to explore more content, leading to increased time spent on the site and higher interaction rates with the new features. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/b724bc8f-3678-4ee1-993c-5a554df5d959/1.png Rachel Uffner - SIMPLE INTERACTIVITY Most galleries maintain long lists of artists they showcase, but Rachel Uffner Gallery, a long-standing presence in the art world, takes a different approach. With a carefully curated roster of artists, we can shift the focus from the names to their beautiful imagery by applying a simple rollover which reveals a full bleed image. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/e9d2f26b-ec07-4688-a1ea-939105c4e7bd/3.png Rachel Uffner - BOLD TYPOGRAPHY The typeface Troover represents Rachel Uffner's broader objectives for their new site by delivering a contemporary, bold, and clean aesthetic. By integrating Groover, the website not only aligns with the gallery's sophisticated brand identity but also ensures a seamless and engaging user experience. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/8dd1bcf2-5c44-47df-8366-270d963f4e3a/blank-small.png Rachel Uffner - OVERVIEW The primary goal of the new website was to improve the functionality across devices and to enhance the visual appeal. The updated site is fluid and has a strong use of bold serif fonts that are cohesive to the gallery's brand. These elements are designed to evoke a lively atmosphere while creating a captivating and memorable experience for any visitor. http://www.kellymcmanus.design/wildflower daily 0.75 2024-08-13 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/74823b37-ca6f-4936-b2be-1d7ffa88e194/blank-small.png Wildflower - INVOLVEMENT • Lead Designer • Front-end Development • Collaborated with Engineering and Product Teams • Aligned with Senior Leadership and Stakeholders https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/84ed3a82-242a-4e15-9017-cfd791293c2f/wildflowermovielarge.gif Wildflower - HOMEPAGE ITERATIONS The homepage iterations incorporate bold minimalism, creating a striking yet uncluttered visual experience. This design approach enhances user engagement by focusing on essential elements, providing a clean and modern aesthetic that aligns with Wildflower's contemporary brand identity. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/02b43273-ccc3-432d-8c20-aec1699d852d/blank-small.png Wildflower - OVERVIEW Wildflower develops sustainable infrastructure in New York City. In terms of the website, less is more, there is no need for clutter and chaos. Wildflower Studios is a great example of this theory, improving their user experience with a minimalistic approach to reduce load time and increase readability. The design is polished and simple incorporating small statements that are centered and prominent making them impactful and resonant with users. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/a6af6b8b-dfbe-4145-9313-6e105c361794/7.png Wildflower - BREAK THE GRID Offsetting items from the standard grid alignment is unexpected and creates a more interesting content flow. This approach is easily applied to other elements creating visual cohesion with other pages. http://www.kellymcmanus.design/life-stories daily 0.75 2024-08-13 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/b0c8fd98-3856-405e-b168-c98d4988942d/blank-small.png Life Stories - INVOLVEMENT • Lead Designer • Front-end Development • Collaborated with Engineering and Product Teams • Aligned with Senior Leadership and Stakeholders https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/9086f32e-8da2-4f5a-b48b-5af29e7b30f1/1.png Life Stories - SUBNAVIGATION Extending the subnavigation beneath the hero section creates a visual break while maintaining its position above the fold. This strategic placement not only enhances the aesthetic appeal but also serves as an intuitive prompt for users to scroll down, encouraging deeper engagement with the content as soon as they arrive on the page. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/9128d407-bfa1-4d96-81d7-f56f74860fe1/blank-small.png Life Stories - OVERVIEW Life Stories (formerly Kunhardt Film Foundation) creates documentary films and educational resources about influential and inspiring individuals. Their website design is crafted to honor the diversity of personal experiences, with a blend of compelling visuals, effective filtering options, and beneficial sign-up forms, the design invites users to explore, connect, and share their narratives in a meaningful way. http://www.kellymcmanus.design/kenzo-napa daily 0.75 2024-08-13 https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/0848f49f-9570-42af-8a6a-7501eba0183c/blank-small.png Kenzo Napa - OVERVIEW Kenzo Napa's website provides a glimpse into the world of exceptional hospitality and unmatched gastronomic innovation. The website features distinctive headers paired with secondary information which is subtly offset, creating an effective break from the grid and adds a pleasing visual appeal. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/df9072da-085c-46c6-a1ae-20b2f8553d64/4.5.png Kenzo Napa - OPTIMIZED VIDEO Rich video content isn't limited to desktop devices—background videos can be optimized to perform seamlessly on mobile devices. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/e6ea4b7b-6ce4-4741-a3c9-1d8f4d34cdf1/1.png Kenzo Napa - FILTERS Using horizontal filters, rather than a sidebar menu, optimizes screen space for navigating through the food and wine offerings. This approach creates a dynamic and intuitive way to explore culinary options, enhancing engagement and ease of selection. https://images.squarespace-cdn.com/content/v1/57d362da29687f1a257ccd80/40465633-71eb-48ee-9292-db8b4c37a310/blank-small.png Kenzo Napa - INVOLVEMENT • Lead Designer • Front-end Development • Collaborated with Engineering and Product Teams • Aligned with Senior Leadership and Stakeholders