Case Study: FIGS & WINE

Objective: Create a dynamic, feminine corporate brand and website for an illustration studio.

Presented for my Masters’ Website Design + Wordpress module. Grade: 90/90

The brief

  • Develop a 'look and feel' that matched the client’s slogan: custom illustrations for the freshest and boldest.

  • Add three types of personalized entries: corporate history, portfolio and blog

  • Design according to GDPR regulations

  • Optimize for various screens

  • Balance high resolution of illustrations with their optimization

  • Include a custom user account for the Project Manager

My role

  • Create original illustrations on theme

  • Edit illustrations into website assets and mock-ups and optimize their size

  • Investigate the market

  • Decide on the brand, logo, colours, typography and tone of voice for the brand

  • Sketch, wireframe, design and prototype the homepage on Figma

  • Developing pages (standard + 404 + maintenance) on Elementor via Wordpress according to the design

  • Creating two types of custom post types for dynamic updates

  • Adapt site to GDPR regulations

Research

To figure out the direction of brand and website, I carried out the following activities.

  • Desk research

  • Inspiration gathering

  • Exploration of trends

  • Competitor analysis

  • Moodboarding

Brand Design

Following the illustration style, the brand was created to feel fresh and fun. The colours were tested for accessibility, as were the typographies and colour combinations.

Web Design

With the brand ready, I got onto the sketching, wireframing and prototyping of the home page.

Development

On WordPress, I used the following plug-ins to deliver every point in the brief:

  • Custom Post Type UI

    Purpose: Create and manage two custom post types (CPTs) and customize WordPress language for user-friendliness.

  • Advanced Custom Fields

    Purpose: Customize fields for the CPTs, such as adding multiple images or associating a color with a custom entry.

  • All-in-One WP Migration

    Purpose: Backup and migrate the site’s design and content efficiently.

If you caught this, hello. I know this isn’t the most efficient use of website. Sorry!

  • Elementor + Elementor Pro

    Purpose: Design the website from scratch, add motion effects, and ensure responsiveness across devices.

  • GDPR Cookie Compliance

    Purpose: Manage cookie consent in compliance with GDPR, allowing users to select their cookie preferences.

  • User Role Editor

    Purpose: Edit and manage user roles and capabilities to control what different users can do on the site.

The result

You are free to browse the site here, or check out website screenshots just below.

Conclusion and next steps

Ahead of an official grade from my teachers, I can say the project met all the criteria we outlined during the briefing stage, and all parts of the website are functional. If this project were to develop further, and I had more than the initial 40 hours prescribed, there are things I would like to build on.

  1. Develop a marketplace function

  2. Analyze user behaviour with heat maps and A/B tests

  3. Create more portfolio entries

  4. Improve download speed on mobile