Brief
Create a usable calendar for busy customers of a learning gym to easily and seamlessly book classes for their kids. In its current state, the calendar is hard to follow and does not translate to the mobile size. There is not an option to quickly enroll in a class so our challenge was to address these concerns.
Tumbles
Tumbles is a learning gym with locations throughout the US. They want their users to be able to seamlessly be able to book their kids in classes from the mobile website. Their current site has a very complex and ill-fitting calendar, and is very cookie-cutter. The client wanted a site that was as unique and customized as their gyms.
Team
Erinn Beresford - UI Designer
Sarah Melville - UI Designer
Seth Lerner - UI Designer
Shiu Ann Woo - UI Designer
Manish Vakil - Founder, CEO (Client)
Sasha Popovic - Developer (Client)
Role - UI Designer
As one of the UI designers, my tasks included team research, user interviews, mood boards, style tiles, high fidelity mockups, and prototypes.
Toolbox
I used a combination of Illustrator, Sketch and Invision for the design and prototyping of this project. I used Zoom to video conference with the clients and the users.
Problem
In its current state, the calendar is hard to follow and does not translate to the mobile size. It is also not an option to quickly enroll in a class.
Additionally, there is very little typographical or visual hierarchy, and they are having a problem with customers complaining about too much copy. The parents are busy and don’t have time to read 3 paragraphs about each class.
Project Timeline
The first week, we went through all of the onboarding materials the clients provided us with. We then had our initial client kickoff meeting and did our gut test, took that feedback and created a competitive visual analysis, and begun working on our mood boards and style tiles, and tested those with the users.
During the second week, we worked on our 3 key screens to present to the users, and then the clients.
During the third week, we worked on iterating and building out more screens based on feedback and research, and made prototypes to test. Additionally, we did UI kits, and responsive desktop sized key screens.
During the fourth week, we iterated further and built out more desktop screens. Added a polish, and iterated UI kits and built style guides.
Research
First, my team and I put together a comparative visual analysis. A big challenge was the client specifically saying that all of their competitors have boring, cookie-cutter sites, and they didn’t want that. So it was important to look at the competition to see what they did not want, and the elements that were actually working that could be adopted.
We also set up a gut test for our client to get a better idea of what they are possibly looking for, and we set up user interviews where we tested for desirability of each of our style tiles, and usability of our V1 mockups and V1 prototypes. I had mostly positive reactions to my 3 divergent designs, which helped inform the mock-up screens.
Mood Boards
I made 3 divergent mood boards to streamline where I wanted to go visually. Our research showed that a lot of colors, and an overall fun yet educational feel were what both the competition was doing, and what our goal was to appeal to both parents and children. I came up with the following themes to go with the requests of our clients, and the research we conducted. Textured Rainbows, Robots, and Pop Art.
Style Tiles
After converting the 3 mood boards into style tiles, we then conducted our first desirability interviews to see if these themes went over well with the target audience. I had a very good reception for the Pop Art and Textured Rainbow style tiles, and a middle of the road reaction to the Robots tile.
After testing the style tiles, we decided to move forward with the Textured Rainbows theme. It fit best with our design principles, and impressed both the users and the clients the most, when we tested them.
High Fidelity Screens V1
I built 3 key high fidelity screens for the mobile website. Along with my teammates’ screens, we tested these in user interviews and then iterated further. I still had to pare down the color and create better visual hierarchy.
Prototype V1 (using V2 screens), Desktop V1, UI Kit
After receiving more feedback from the clients, we each iterated our designs again, added more screens to create a full user flow, and put them into a basic prototype. We then tested our prototypes.
I also built key screens and a prototype for the desktop sized version of the site. These also got very positive feedback for the layout and flow.
Additionally, I made a basic UI Kit with some of the elements that I used throughout my design. I knew I would be tinkering with the elements, so this was not the final version.
Prototype Final, Desktop Final, UI Kit Final, Style Guide
I did a lot of research into some competitors and other successful designs to see how I could get this to function well while looking polished. I made my changes and submitted the final prototypes, screens, Style Guide and UI Kit and screens to the clients.
Logo Redesign
I redesigned their logo slightly, to match the treatment of all of the other elements on the screens.
Final Deliverable
After presenting my product to the clients one of whom is a developer, they had only positive things to say. They loved how I treated the photos and elements with the “shine” look to add depth. They loved how I used the bright colors, yet kept an overall clean look. They also loved that the calendar made much more sense and the site overall flowed better.
