Year — 2020

WeSwim Booking

About project

WeSwim Booking is a new application designed for users to ease and automate the process of booking a place at the swimming pool for single swimmers and larger groups.

Industry

Sport & Recreation

Work

Branding / UX / UI — Marcin Krupiński

Needs

WeSwim project required utilizing possibilities of mobile devices, and ease the process of booking, which earlier had to be done manually via phone-call or personally. Swimming pool has a universal wide target group, which is being created mainly by people in age 16-65 with healthy lifestyle. Important part of this group are people with disabilities.

Branding

It all started with the logo, which involved evoking the feel of the swimming pool, water sports and joy. Colors blue and teal represent clean water surface.

Application

After we established the logo design, I started gathering requirements for a mobile application.

Information Architecture

To define a taxonomy and map all the related content, I created Information Architecture. It ensures that data are in places expected by a user.

Wireframe

Based on Information Architecture, in the early stage of a product I draw sketches and low fidelity wireframes of different user flows. As the project goes further – in the iteration before visual styling – I create high fidelity wireframe to present it to the client and discuss some content changes.

Visual design

Going through the steps described before, I can safely proceed to make UI Kit and style whole application.

Grid System

In order to keep whole application organised and reduce visual chaos, I designed every component on a 4px grid and among 32px side margins.

Booking flow — 1st iteration

As simple as possible should be the main action flow of user booking a place at the swimming pool. Even if after checkout user’s transaction didn’t succeed, all the filled data would be temporary saved and user can try again with different payment method.

Booking flow — 2nd iteration

To encourage more users to immediately try again, I skipped the “Checkout failed” screen and guided user flow straight to “Personal Data and Payment” screen with appropriate message. When a user has to repeat checkout, the “Log In” button is also removed. At this point he has already filled in personal info, which is temporary saved so it’s unnecessary to distract him with logging to the application.

Interactions

Users expect an immediate feedback from a technology they are interacting with. To strengthen simplicity of the application it’s important to keep the same motion feel within similar actions.

Prototype

You can try a clickable prototype of WeSwim application created in Figma Software.

Prototype should load below.

🡣

Prototype

You can try a clickable prototype of WeSwim application created in Figma Software. After opening a link, let the prototype fully load.