Wireframing My Breakable Toy

[fa icon="calendar'] 11/24/14 12:27 AM / by Alnoor Pirani

At Launch Academy, one of our major projects is the breakable toy, a personal project where we can apply the web development skills we’ve learned and use the product as a portfolio piece. I’ve been kicking around the idea of creating a review website for pre-workout supplements for the past few months and decided to use this opportunity to build it. I believe it’s an ideal project for me to apply what I’m learning and push myself to create something useful. I’m excited to embark on this project since it combines my love for fitness and technology while preparing me for my career in web development.

I’ve been a fitness enthusiast for about 20 years and have done a great deal of research on the web to help with my training and supplementation so I’m familiar with the domain. It turns out that the majority of product information for supplements is marketing hype. For the average consumer, it’s difficult to find the information needed to make a well-informed decision, that can positively or negatively impact health. Given the rise in interest of pre-workout supplements, there’s a real need for unbiased information directly from users as well as information about ingredients, including what they do and their safety. I see this site as an information hub dedicated to helping fitness enthusiasts supplement safely.

From a technical standpoint, this project is ideal for learning about database design and querying with a web interface. Databases are ubiquitous on the web and power the majority of web apps. Building a review website would be a great way to learn about how modern websites are structured.

After coming up with the concept, I crafted user stories to guide my development efforts. I structured the stories in such a way as to answer the questions who, what and why for each aspect of the website. I then followed by listing acceptance criteria that must be met for the user story to test whether it has been implemented completely.

Here is an example of a user story and acceptance criteria for my review website:

As a user
I want to see detailed information about a product
So that I know enough about it before making a purchase


* Information about the product includes: product name, manufacturer, average cost per serving, potency, flavor, color, ingredients, photo
* Reviews are presented alongside the product
* Similar products are shown alongside the product
* Review summary is presented alongside the product"

In addition to user stories, I also created wireframes for some of the pages of my site to help communicate the user interface and information presentation. I plan to use them to obtain feedback from my classmates and help with the design process at an early stage before decisions are more difficult and costly to change (with time being the most valuable resource). Below is my low-fidelity wireframe of a product page.


One of the challenges of creating a site like this is the database design. I expect there will be a variety of tables in the database to cover users, reviews, products, companies and ingredients. The book I read on database design will be an excellent resource for when I begin designing the data model and I feel this will be the most challenging aspect of the project.