Skip to content
All work
UX/UIProduct Design

Project Anvil — UX/UI Ideation & Wireframing

Concept mapping, low-fidelity wireframes and high-fidelity iterations for an app encouraging upcycling and tackling flytipping.

Year
2020 — 2021
Role
MA Design Final Project · UX Research · Ideation · Wireframing · UI Design
Discipline
UX/UI
Project Anvil — final app screens
Project Anvil — final app screens

Design process

  1. 01

    Concept mapping

    Map the problem space — flytipping, discarded materials and upcycling — into features, style and design elements.

  2. 02

    Colour research

    Test which tones people associate with doing good and volunteering, landing on light, bright, nature-led colour with green dominant.

  3. 03

    Style direction

    Set Laviossa Medium for headings and Poppins for UI text, paired with a named palette of Bleached Silk, Deep Green, Sky Fall, Give Me Your Love and Rose Tattoo.

  4. 04

    Low-fidelity wireframes

    Sketch home, onboarding, item selection, sign in and profile screens to fix layout and hierarchy before any visual design.

  5. 05

    User flows

    Chart welcome, sign in and sign up branching, then annotate the main menu to define navigation and interaction points.

  6. 06

    High-fidelity iterations

    Iterate the main feed and profile through several versions, refining navigation, cards, levels and achievements into the final UI.

Slide navigator

Jump between sections, or use the arrow keys to step through the deck.

Project Anvil — final app screens

Project Anvil — final app screens

01/11

Selected artwork

Project Anvil — final app screens
Project Anvil — final app screens
Ideation mind map — concept, approach, style and design elements
Ideation mind map — concept, approach, style and design elements
Initial wireframes — home feed and profile
Initial wireframes — home feed and profile
Onboarding and item selection wireframes
Onboarding and item selection wireframes
Sign in and sign up flow wireframes
Sign in and sign up flow wireframes
Main and profile screen iterations through to final UI
Main and profile screen iterations through to final UI
Colour theory research — light, bright tones for upcycling
Colour theory research — light, bright tones for upcycling
Colour system — Bleached Silk, Deep Green, Sky Fall, Rose Tattoo
Colour system — Bleached Silk, Deep Green, Sky Fall, Rose Tattoo
Type system — Laviossa Medium headings with Poppins UI text
Type system — Laviossa Medium headings with Poppins UI text
User flow — welcome screen into sign in and sign up
User flow — welcome screen into sign in and sign up
Main menu annotation — home feed structure and interactions
Main menu annotation — home feed structure and interactions

Tools used

  • Figma
  • Wireframing
  • Mind mapping
  • Colour theory
  • Type systems
  • UI Design