Project

10 Grounds

AAR Papers

Problem

PAPERS worked, but it read like unstyled defaults: stacked buttons, long paragraphs and plain tables, and its architecture could not change.

Solution

A redesign inside Bootstrap 5 that reorganizes and restyles what was already there, focused on the submission flow and adapted to mobile.

My role

UX/UI Designer at 10 Grounds.

Skills

UX/UI designRedesignDesign systemBootstrap 5Responsive

Methodology

Audit of the existing screens, then the submission flow first, restyling Bootstrap 5 components, and finally every screen adapted to mobile.

Platform

Web, desktop & mobile

Users

Submitters · Chairs and steering committees

Flows

Create paper · Paper session · Roundtable session · Submit proposal · Search units

Tools

Figma · Bootstrap 5

Design decisions

1. Choose first

   The three proposal types became side-by-side cards, each with an icon, a short description and one action, instead of three buttons separated by paragraphs.

2. Status at a glance

   Proposals are grouped as saved and submitted, with badges for type and status and icon actions, in place of a plain table of text links.

3. Two views of your work

   Tabs separate the proposals you own from the ones you take part in.

4. Inside Bootstrap 5

   Every component is a Bootstrap 5 one with new color, spacing and type, so the redesign could be applied without rebuilding the front end.

5. Review in one place

   Chairs and steering members see their units and every proposal sent to them, with type, status and rating, and accept or reject from the proposal page.

6. Mobile, screen by screen

   Forms, modals and lists were adapted one by one, so submitting a proposal from a phone is a full flow, not a squeezed desktop page.