A case study was performed on the lifestyle app Playbook, looking at ways to improve the user experience. Using a combination of Photoshop, Illustrator, and InDesign, the app was given a redesign to be easier to use. Buttons were utilized more because of this. A challenge was trying to keep elements of the app's identity, while also creating a different user experience.
The choice was made to combine the two pages of "Channels" and "Latest" into one scrolling page. The "Latest" portion at the top is now a left-to-right scroll, while the "Channels" section is an up and down scroll. Certain channels were enlarged to showcase a particular exercise from trainers.
Once a trainer is selected, they are now shown in the "Your Partner" section. I decided to give the "Biography" section of the trainer a proper area since it was hardly noticeable in the original. That section is joined by other features such as "Workouts", "Insights" and "Community" in an area near the top of the page for ease of access.
For the "Workouts" section, the choice was made to have left-to-right scrolling for each workout section. The "Premium" and "Free" workouts are now displayed onto one page rather than two sections in the previous version. I made the workout times easier to see than before by placing them on top of a rectangular strip, which was then overlay onto the image.
When a workout was chosen, the previous version of the app had a very loud and large display for workout times and increments. I decided to make it more subtle. The "Download" and "Share" buttons from before are now placed into an area near the top for ease of access. A summary of the workout could not be seen initially without scrolling in the previous version, so I decided to have it present on first sight. The "Start Now" button was kept from the original, but resized to be smaller.
Under the "Profile" section of the app, I decided to create buttons rather than having different styles of opt-in options. This was chosen to keep a universal theme of having buttons throughout the app. When active, each button turns purple, while inactive buttons remain grey.
This is a style guide for the presentation seen throughout the updated version of the app. I kept the logo's "leaf" look and incorporated it into negative space of the letters "P" and "B" from the app's name, while also creating an "infinity" sign from the letters. Futura PT was the only font used throughout the app, with slight style variations of Book, Medium, and Demi used for body text, subheadings and headings respectively. Icons were changed or modified slightly from the original. Purple was the only spot colour chosen for the app, which was from the previous version of the app as well.
Back to Top