UI Design / UX design
As part of an advanced design course through CareerFoundry, I created a responsive web exercise app called Spark. The app’s goal is to “ignite a love for fitness” by helping users build a solid foundation through easy-to-follow workout videos and instructions.
My Role
Sole UI/UX Designer
4 weeks
Figma, Photoshop, Illustrator, Lucidchart, Paper & Pencil
Spark mockup for desktop

Design Process

Spark design process circles

With a focus on UI for this project, the steps I covered in my design process included user stories, proto personas, user flows, sketching, wireframing, style guides, and prototyping.

I started the first step in my process by defining and answering the 5 W questions.
Spark 5 W questions
After defining the scope of the app, the next step was creating user stories and a proto persona to better understand my users’ needs and goals.
Spark user stories
Spark persona
I then figured out the essential features the app would need to make it successful and useful. I also created a user flow diagram to map out these features and see what kind of pages would be necessary for the app.
Spark essential features
Spark user flow
Next, I started sketching low-fidelity wireframes with pencil and paper. I moved on to Figma for my mid-fidelity wireframes, where I used a 12-column grid to create the initial layouts for mobile, tablet, and desktop devices.
Spark grids and wireframes
Spark mockups for desktop, tablet, and mobile
Style Guide
I made a style guide to show and instruct others on the final choices for all visual aspects, including colors, icons, and typefaces.
Spark Style Guide
I continued to use Figma to create my high-fidelity wireframes and an interactive prototype.
Spark prototype
Mock Ups
Spark mockups
Spark mockups
Next Steps
I would like to test the design with users to validate concept so far. It would be important to find out if the app’s flows and visual design resonate with users or not. I would also like to see where there are areas of improvement because continuous iterations are an integral part of the design process.