Chippenham Folk

This case study of an event app was made while I was doing an advanced course in Figma UI UX .

Client
Case Study
Service
App Design
Year
2024

‍

‍

Design Brief / Task Flow

Using the random project generator I was tasked to design an event app called Chippenham Folk with a logo of a kiwi bird. First I created a task flow with all the pages needed for this app, including event details, wishlist and a search page etc.

‍

Wireframes

Using the description of the brief I created a wireframe. Having all the details from the task flow. This will give the idea of what the layout will look like for the final design.

‍

‍

‍

Animation

I used variants to create a cool background animation for the welcome screen. I drew shapes and changed the colours, I also added text to appear on the screen with a delay affect.

‍

‍

‍

Colours and Sizing

‍

I used these colours throughout the app because they create a good colour scheme. The plugin I used for the measurements was DesiginDoc this was a useful tool because it shows all the spacing and sizing when making the layout.

‍

‍

‍

Final Design

‍

For the final design I made sure that every page was responsive, for example I made it so that every icon on the website links it to the right page. I am happy with the final design because it's what I had in my mind when making this event app.

‍

‍

‍

Problems

‍

  • The event cards - Making sure it draws people in by having info including date and price,  It took me a little while to be happy with how it looked.
  • Scrolling - It took me a while to figure out how to make the page scroll with the parent.
  • Welcome Page - Making the welcome page was challenging but also fun to make because having to make different shapes to interact in the background while the animation for the text appears, Also having to make button components for login and sign up made the process take longer.

‍

‍

Solutions

‍

  • Event Cards - Having images and a good colour scheme with all the info about the event will make users want to find out more about the event.
  • Scrolling - To make the page scroll I needed to make it scroll with parent and have the overflow set to vertical using scroll behaviour on prototype mode.
  • Welcome Page - To solve this problem I made the button components first so all I had to do is make the animations using shapes this will save time.

‍

‍

‍

Tools I used

‍

  • Figma
  • Components and Variants
  • Color Libraries
  • Plugins - Iconify , Pexels , Unsplash, Content Reels, Invert Color and DesignDoc
  • Auto Layout
  • Prototyping

Chippenham Folk

This case study of an event app was made while I was doing an advanced course in Figma UI UX .

Client
Case Study
Service
App Design
Year
2024

‍

Design Brief / Task Flow

Using the random project generator I was tasked to design an event app called Chippenham Folk with a logo of a kiwi bird. First I created a task flow with all the pages needed for this app, including event details, wishlist and a search page etc.

‍

Wireframes

Using the description of the brief I created a wireframe. Having all the details from the task flow. This will give the idea of what the layout will look like for the final design.

‍

‍

‍

Moodboard / Style Guide

‍

I use a moodboard to decide the overall visual direction of the web page. The style guide is great resource when designing pages for example when I was making the product details I wanted to have different colour schemes to differentiate between that page and the homepage.

‍

‍

Making it interactive

‍

I used prototyping to animate between the pages so that it becomes interactive when users navigate through website.

‍

‍

‍

Final Design

‍


Problems

  • Icons- It took me a while drawing the home icons because of the shape it had to be.
  • Columns - I did't really know how to use columns but I learnt that it is used for aligning objects on a page.
  • Colours - Choosing the right colours for the design was difficult but once I created the style sheet it was a lot easier.


Solutions

  • Icons - Drawing the outline from a plugin.
  • Columns - Practicing using columns through different projects.
  • Colours - Making a style sheet helps when choosing the right colour scheme.


Tools I used

  • Figma
  • Plugins - Pexels, Unsplash, Color Levels Generator.
  • Auto Layout
  • Prototyping
  • Components and Variants.