top of page

Workout Equipment Rentals

Letsercise

Letsercise is a mobile-first website that allows people to try a variety of different ways to stay active by having the necessary equipment delivered to their doorstep without committing to any large expensive purchase. The below designs depict the user flows allowing users to make an account, rent equipment, and return equipment. 

Letsercise - Loading Pg MOCKUP 2.png

Vision

Motivate users by providing access to a variety of exercise equipment delivered straight to their home to use at anytime. One should be excited to live a more energized and healthy life when they choose to.

Letsercise - Product Page MOCKUP (4).png
Letsercise - Filter and Sort MOCKUP.png
Letsercise - Browse Page MOCKUP.png
Letsercise - Homepage MOCKUP.png

The Process

My design process closely reflects the curiculum order of Career Foundry's UI Designer course. Following the course ensured I learned an organized process that requires my conclusions to be supported with research. 

Ideate

User Research

Personas

User Interviews

Gather

Define Objectives

Determine user-centric needs

Crazy 8s

Mid-fi Wireframes

User Flows

Create
Prototype

Clickable Prototype

User Testing

Conclude

Complete

Prototype

Hi-fi Mockups

Ideate

User Interviews, Personas, and User Research

Initially, after conducting user interviews, I hypothesized that users would find more motivation to exercise in a social app. One that would promote users to meet up for workouts together and share their progress with others. However, after creating personas and using the other findings from the user interviews to kick off evaluative research, it became clear that a rental service that delivers workout equipment directly to your door would be far more favorable. 

smartmockups_l8vwjmrr.png
Letsercise - Sign up ScreenS MOCKUP.png

Personas

Before Letsercise, user interviews were conducted. Participants were asked questions regarding how they stayed active, what resistance factors stop them from exercising, and other relevant information about their daily lives. From these interviews, three patterns were found. I developed a persona for each.

#1
Maria, 49

Quote

"Never stop learning, because life never stops teaching."

Demographics

  • Lawton, OK

  • Educator/ Teacher

  • Married with 3 adult children

  • Master's Degree

  • Owns current residence

Behaviors

  • Works both in person and online with students (hybrid)

  • Eats mostly fruits and vegetables in her daily diet

  • Wakes up before 7 am every morning

  • Maintains regular communication with all three children

  • Ends evenings watching TV on the couch with her life partner

Needs & Wants

  • Goal is to increase exercise from 2-3 days to 4-5 days a week

  • Requires convenience or option to multitask if new tasks are added to her busy schedule​

  • Wants to retire and move to Sante Fe, NM

Maria - Letsercise Persona.jpg
#2

Wendy, 29

Quote

"Working out makes me

feel free and alive."

Demographics

  • St. Louis, MO

  • Occupational Therapist

  • Single - no kids

  • Master's Degree

  • Rents a home

Behaviors

  • Works in-person with patients

  • Exercises daily for at least an hour

  • Takes occasional gym classes, but mostly works out at home

  • Highly active social life with friends and coworkers

  • Currently renting, but looking to buy property soon

Needs & Wants

  • Variety in her workouts and daily routine

  • Wants to stop running late to work/gatherings

  • Needs forgiving deadlines

  • Wants to incorporate kick boxing into workouts

Wendy - Letsercise Persona.jpg
#3

Quotes

"Trust the process."

Demographics

  • Dallas, TX

  • Programmer

  • Single - no kids

  • No diploma

  • Rents an apartment

Behaviors

  • Works remotely full-time

  • Works out 2-3 time a week

  • Owns a dog

  • Monitors their noise to downstairs neighbors

  • Some outside social life, but mostly communicates with friends through video games

Needs & Wants

  • Wants to improve work-life balance

  • Wants a girlfriend

  • Wants a promotion by the end of next year

  • Needs to start eating more fruits and vegetables

August, 23

August - Letsercise Persona.jpg

Gather

Define Objectives & Determine most user-centric needs

Gaining a better understanding of the problem space made defining the main objective simple: How to ease the experience of shopping and returning equipment online? Now having extensive evaluative research, it was easy to think of tons of solutions. Therefore, the next step was to prioritize the solutions based on how well they meet the objectives. Other solutions were saved for potential future use.

Letsercise - Confirmation MOCKUP v2.png
Letsercise - Checkout 1-3 MOCKUP.png

Create

Crazy 8s, Mid-fi Wireframes, User Flows

To start the sketching process quickly, I began with some Crazy 8 exercises to start low-fi wireframes of screens I knew I would need (Sign-up pages, Filter and Sort, etc.). Before moving to mid-fidelity wireframes, I created User Flows. Now I had an understanding of what flows to focus on, which pain points to beware of, and a complete global understanding of the project itself.

Crazy 8s

Crazy 8 4.JPG
Crazy 8 3.JPG
Crazy 8 1.JPG
Crazy 8 5.JPG
Letsercise - Crazy 8.JPG
Crazy 8 2.JPG
Crazy 8 5.JPG

User Flows

Tap or click any of the flows for a larger image

Creating an account

Letsercise - User Flow 1 Creating an Account.png

Renting Equipment

Letsercise - User Flow 2 Renting Equipment.png

Returning Equipment

Letsercise - User Flow 3 Returning Equipment.png

Prototype

Clickable Prototype & User Testing

Having made a prototype before, this step took no time at all. However, it became clear just before user testing where several issues hid. The goal of the user test was to make sure main flows could begin within 2 clicks on the iPhone prototype. In the future, I would like to observe more user expectations before and after testing. 

 

Qualitative and quantitative data from user testing the clickable prototype were synthesized. Brainstorming then began to find more user-centric solutions. Attitudinal insights were gained that proved many solutions in the prototype were not as intuitive as anticipated. Therefore, more iterations were needed.​

UI

Letsercise - Logo Row.png

User Interface Design was the most daunting step in this project, but it was where I learned the most. I began by curating a Moodboard. I knew I wanted the site to feel approachable and energetic. Learning color psychology from colorpsychology.org helped me accomplish a more fitness-focused tone. Icon Design became one of my favorite tasks after getting used to

Navy (#232B44) - Power, no-nonsense

Chartreuse (#BADA3B) - Energetic, nature 

Turquoise (#9FDEDE) - Healing, serenity

using Figma's boolean operations. For typography, I focused on accessibility and the readings from Career Foundry regarding the topic. DM Sans stuck out to me as a readable and free typeface. I used my understanding of visual hierarchy when choosing what sections would be bolded or not. Thankfully, the UI Implementation went smoothly as I could exercise my knowledge of Figma components and variants to make the process go quickly.

Conclude

Complete Prototype & Hi-fi Mockups

After some prefrence testing and the input of many piers, a complete prototype was ready make into mockups. Putting together the mockups for presentation was mostly a test of my ease with third-party generators. As predicted, I learned a lot about working around unpredictable issues and have a completed product in exchange.

Key Takeaways

Skills used & Skills this project is evidence of

  • Design in Figma

  • User Research

  • User Interviews

  • User Flows

  • Wireframing Low-fid to Hi-fid

  • UI Implementation

  • Functional prototypes

  • Experience Design

  • Hi-Fidelity clickable prototype

  • User Testing

  • Interaction Design

smartmockups_l8vwkzpl.png
smartmockups_l8vwkizv.png
smartmockups_l8vwk6lt.png

Contact me

©2022 by Ella Hanson.

bottom of page