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 easing the process of booking, which earlier had to be done manually via phone call or personally. A swimming pool has a universal wide target group, which is being created mainly by people in age 16-65 with a healthy lifestyle. An important part of this group is people with disabilities.
Branding
It all started with the logo, which involved evoking the feel of the swimming pool, water sports and joy. The colours 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 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 the whole application.
Grid System
In order to keep the whole application organised and reduce visual chaos, I designed every component on a 4px grid and between 32px side margins.
Booking flow — 1st iteration
As simple as possible should be the main action flow of users booking a place at the swimming pool. Even if after checkout user’s transaction didn’t succeed, all the filled data would be temporarily saved and the user can try again with a 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 immediate feedback from a technology they are interacting with. To strengthen the 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.
The prototype should load below.
Prototype
You can try a clickable prototype of the WeSwim application created in Figma Software. After opening a link, let the prototype fully load.
