Skip to content

JazmynFuller/iot-tumbler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tumblër

This is responsive website for Tumblër: a smart device that lets users know and control the status of their clothes in the washer/dryer in their home, or at the laundromat. This site is live here.

Roles

  • Mark Abramov
    • designed wireframes
    • created visual designs
    • developed the websites (HTML, CSS), particularly adapting for mobile devices
  • Jazmyn Fuller
    • designed assets such as logo and product images
    • created site map
    • developed the websites (HTML, CSS, JavaScript) for responsive desktop screens

Tumblër's Social Impact

Tumblër allows users to spend more time with their loved ones or what matters to them, and less time focused on their laundry needs. Checking laundry progress with an app lets them simplify their lives and puts control in the palm of their hand.

Tumblërs can be controlled via mobile phones or tablets remotely – great if they forget to put their wash on before they leave home. For additional convenience, users can have their clothes washed and ready to be hung out as soon as they get in the front door. They can also forget about suffering through the noisy spin cycle; instead they can just set it for when they’re out.

In addition to convenience, Tumblërs are also great for the environment! They can adapt the wash to the amount of clothes that are in the drum, ensuring clothes are washed efficiently no matter the size of the load. Tumblërs can let users know when they needs cleaning or maintaining, which will help the machines last longer.

Site Structure

Our site has a streamlined and well-planned structure to optimize the user experience.

On the home page we have links to all the other pages and content our site has to offer. The links are categorized into specific sections which can contain other smaller categories of content offered on our site. For instance, our "Appliances" link takes you to a gallery of the Washer and Dryers that are sold. This page contains further links regarding the individual product you are interested in, with more detailed content.

Our method guarantees visitors are not overwhelmed by too much information, and that user navigation is intuitive.

Site Map

SiteMap

Assets

  • Logo
    • Created in Adobe Illustrator
  • Graphics
    • Created in Illustrator or Found on iStock photos and modified in PhotoShop
  • Icons
    • Used Font Awesome icon library

Implementation

Initially we agreed on our project idea, did paper sketches, and divided the workload based on our interests and weaknesses. Github was used for version control to share and store all our files for the project, and keep track of our changes. We also used GitHub Issues to organize and list goals we needed to complete for each week. Upon completion, we closed the issue on GitHub, and uploaded a photo (as necessary) to show our progress. We utilized the Bootstrap library to help make our site responsive, and used the Wacom tablet to design the logo. Our prior, and accumulated knowledge of HTML, CSS, and JavaScript this past semester allowed us to complete the assignment in a timely fashion.

Wireframes

Desktop

Home Page

Home Page

Appliances Page

Appliances Page

Product Page

Product Page

Mobile Portrait

Home Page

Home Page

Appliances Page

Appliances Page

Product Page

Product Page

Visual Designs

Without Grid

Home Page

Home Page

Appliances Page

Appliances Page

Product Page

Product Page

With Grid

Home Page

Home Page

Appliances Page

Appliances Page

Product Page

Product Page

Mobile Site Screenshots

Home Page

Home Page

Appliances Page

Appliances Page

Product Page

Product Page

Evaluation

We used several metrics to measure the effectiveness of our site. There are many visuals, and 45-72 characters per line, to ensures our visitors experience a balance of text and images without being overwhelmed.

We laid out our content logically to prevent our visitors from switch-tasking; switch-tasking causes people to forget what they're focusing on, which in the end can turn away sales of our product. We also ensured our colour palette was not overpowering to prevent eye strain and user loss. This is why we used pastel colours, with dark text.

Ideally, we would continue our layout practices and build on the content we have accessible on our website. If we wanted to make additional money on top of selling our product, sensibly placing ads in spots where users will see it but not get distracted would work as well. We would also implement the search box, so if a user wants to look for something specific they can just type it in, and get it right away.

In the end, the most effective yardstick by which we can measure effectiveness of our site is the online sales of our product. A bounce rate of less than 15% would make the project a great success.

About

A responsive website design and prototype for an IoT device

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published