Responsive Web Design

Art NYC

🔨 Project Overview

Problem

In a time of rapid technological progress and changing societal values, the financial industry finds itself needing to adapt. The audience it serves is rapidly evolving; a younger generation has emerged as a formidable driving force, challenging the status quo and demanding financial services that align with their desire for a playful and sustainable future. Traditional standards of exclusivity have long generated an aura of inaccessibility that repels young people seeking a more inclusive and egalitarian approach.

Solution

Design a digital brand focused on providing a more accessible approach to fine art investment, specifically targeting and engaging a younger audience.

Timeframe

6 weeks

Contribution

UX + UI Design, Visual design, Branding, User flow, Research, Prototyping + Testing

Team

Individual project mentored by Anna Brenner

📣 User Interviews

Gain a better understanding of user needs buy talking with users

Four individuals were asked their experience of the barriers and difficulties of navigating current investment platforms. Despite the significant interest in long-term investing, all four interviewees encountered obstacles and frustrations when starting this process. The primary cause of their frustration stemmed from the lack of clarity surrounding the procedures and costs involved in working with many popular brokerage firms. This information helped paint a picture for current user pain points and how to go about designing to resolve them.

👫 Personas

Explore who would connect most with the brand

Personas were made to understand the unique qualities, preferences, and behaviors of the people most likely to connect with the brand and its services. By using these illustrations, the brand can understand its users better and customize its approach, resulting in a more enjoyable experience.

🔎 Competitive Analysis

Research major competitors in order to gather insight on current provided services

Three websites dedicated to fine art investments were analyzed in order to compare the strengths and weaknesses of direct competitors in this field. My goal was to gain a better understanding of what is currently offered, the areas in need of improvement, and to identify any unfilled gaps in the industry

🧭 Information Architecture

Site map and product requirements

Competitive analysis and user interviews revealed that existing websites are difficult to navigate with cold and unwelcoming UI. Bearing this in mind it was important to move away from traditional financial motifs to create more playful and accessible user experience.

The site's goals were divided into three categories: “must-have”, “would-like to have”, and “later iterations”. With these goals in mind, the focus became designing a user-friendly and inviting interface. Looking to the future, the website would be designed with the intention of allowing for more options for customization.

🧱 Wireframes

Ideating and early stages of design

Wire-framing became focused on designing engaging screens that resonated with younger and more inclusive audience. From the information gained in the user interviews it became clear that people wanted financial services that match their values and make a positive difference. The wireframes were designed with a community driven approach that brought a fresh perspective to conventional financial designs.

📈 User Testing

Iterating and improving designs

A single-round usability study was conducted to evaluate the functionality and user experience of the low-fidelity wireframes. Participants were asked to complete a series of tasks, with a follow-up interview given following the prototyping. The study focused on answering the following questions:

  • How easy was it for individuals to navigate the website?

  • What level of ease was there in understanding content?

  • How did the information and content make them feel?

  • Did individuals encounter any difficulties when executing their tasks?

The following insights were gained from the study results and used to make improvements to the wireframes:

  • Users felt that certain headers felt cold and pretentious

  • Users wanted more content focused on lesser known galleries and artists

  • Similarities between the two plan pages caused confusion with some participants

  • Users would like more ways to see related artists and galleries

🥀 Visual Design

Brand identity and visual language

Many financial platforms implement a one-size fits all approach for their website designs; often appearing cold and outdated. Research shows that younger users are looking for more relatability and modernization from their financial firms. Art NYC was designed with a visual identity that not only reflects the brand's values but also resonates with users on a deeper level.

The website utilizes a subtle, linear layout which draws user attention to important content. While color and typography are used to modernize and add a sense of playfulness to standard financial motifs. In general, the design aims to strike a balance between visual aesthetics and informative significance.

Typography

After exploring different combinations the final font pairing was an elegantly playful serif and a strong sans. The sans gave an elevated authority to the heading while the serif added dimension and fun to the body copy.

Color

In keeping a classic typography it was crucial to incorporate visual elements of warmth and playfulness throughout the design. The primary color chosen was Almond, a deliciously creamy off-white shade that exudes a sense of elegance and sophistication. Complementing this refined hue, the secondary and tertiary colors pop with vibrant tones of red and orange. These lively shades infuse the design with energy, elevating its editorial nature resulting in a warm and inviting design.

🏠 Homepage

Finalized designs for web

The homepage was designed to guide individuals through Art NYC’s investment options while simultaneously showcasing partner galleries and introducing users to a diverse range of artists.

Utilizing a playful, editorial aesthetic the homepage draws user attention to investment offerings and content with clean, straight-forward headlines and descriptive body copy. User research provided a driving force to include more relatable content about upcoming artists, partner galleries, and customer stories.

🏦 Investment Plans

Explanation and guide to investment offerings

While the website maintains a cohesive visual style, the investment plan pages were kept intentionally minimal to ensure clear user comprehension and navigability. To further support user experience small design elements were brought in to provide novelty and playfulness to the experience. While the two pages have similar layouts there are differences mirrored in placement and color to add clear delineation between the two plans.

🎨 Artists and Shows

An index of artists and upcoming exhibitions

Due to Art NYC’s modern approach to art financing it was important to design a page that made it easy for users to access and explore a diverse index of artists and shows. Users can discover by location or search to find a specific artist or show. Differences in the visual affordance were made to make filtering and sorting scannable and easy to read. What’s more, images were scaled to emphasize the exhibition spaces and artwork in keeping with the open, editorial experience of the website.

🧑‍🎨 Artist Bio

A page dedicated to both the background and body of work of an artist

Art has a subjective and expansive history which spans time, space, and culture. For this reason I wanted to create a way to learn about artists and their work that was approachable and gentle. The artist details page presents information with ample amounts of open space and visual aids to make the experience enjoyable and fun. Users can read a short synopsis of the artist, view their body of work, and explore similar artists they might enjoy.

🤝 Partners in Art

Collection page of partner galleries

A diverse and extensive partnership page was designed to showcase both established and emerging galleries. Users can broadly scroll to discover new galleries, or refine their search by filtering according to their preferences. What’s more, users can learn more about galleries by expanding the info tabs at the bottom of the image. Headlines were kept intentionally simple to allow the visual content to stand out.

✍️ Prototyping

Experience how users navigate the site and adjust for improved usability

During prototyping users were asked to move through the website and to complete onboarding. Starting from the homepage the flow was completed when a user successfully submitted an application to Art NYC. Users were also asked to explore the site and discuss how they felt, and if they would return to the site.

The following insights were gained from these results:

  • Users took an average of 40s to move from the homepage to submitting a application

  • Users focused their exploration to the homepage and the financial plan pages

  • All expressed that they would return to the site

“The color and the images are so bright and exciting. It’s refreshing to see a new take on content that so often feels dull and boring.”

- Emma, 33, test participant

Reflection

Takeaways

Designing for this project posed the unique challenge of modernizing content in an industry that has traditionally been perceived as dry and intimidating. It forced me to think outside the box and find innovative ways to make the information easily accessible and engaging. I had to carefully balance strong information architecture with a playful visual language to create a product that was both elegant and effective. It was exciting to push the boundaries and prove that design can be both functional and enjoyable, even in seemingly less exciting fields.

Future improvements

I’d love to explore how this website could continue to grow and serve its user base. Here are a few areas that I think could be further improved upon and actions that I would take to create an even more effective product.

  • Develop more investment plans, opening up more possibilities for a wider income base

  • Adding more artists and gallery partners to further diversify and grow

  • Conduct another round of user testing to identify pain points and user needs