JUSTIN Z MA

Habittack backup

Designing and developing any application requires skills that many people might not possess. Our audience has been and will be the most important thing. Researching the audience, finding the right appeal, and following latest technology standards led us to a successful and well made application. 

- Fluid - Form - Function -
thehabittack.com

During the past year, me and three others work diligently to produce marketable material for the product launch as well as creating the wireframes for our iOS application, The Habittack. The launch of our application in the App Store and Kickstarter Campaign begins in Fall 2015

My time at The Habittack involved the creation and design of the current website, creating wireframes prototypes, interacting with developers and executive partners, and leading the beta test


You can view the completed and functional prototype here

Wireframing 


Phase 1


Phase 1 represents the general outline of our application. This process was fundamental to what we thought was important. We worked together to brainstorm some of the most important features that required a screen.  After market research of different types of applications, We determined that placement of the navigation controls on the bottom of the screen allowed for easy of access. We also determined the placement of images at key locations of each page for optimal use of space. 


Phase 2


Phase 2 allowed us to bring our sketches into color wireframes. We studied the implications of different colored buttons and their placement. We didn't worry about how good it looked just yet, however we did focus our efforts on trying out new styles and icons. Then brainstorming the theme and color palette of the application itself, we opted for a Orange and Grey based palette. Phase 2 wireframes were made in Photoshop.  


Phase 3


Phase 3 happened because we wanted to modernize the look of the application. As you can tell, phase 2 wireframes looked a bit dated. We matched the most recent iOS design guidelines and used modernize icons in place of the old ones. Using the latest wireframing technology, AXURE 7.0, we created various interactive wireframes. Employing a variety of different user groups, each version was hand tested on hardware and iterated to insure that no button was wrongly placed. 

View the Prototype here

Download it in the App Store     


Phase 4

 

Phase 4 was a side project of mine. After the release into the app store, we discovered that we need to re-evaluate our interface based on user needs. We discovered that the picture feature on the homepage didn't necessarily need to be there. I set off to create a new homepage that was less cluttered on more user-focused.

 

Beta Testing (UX Experience)

Coordinating my first beta test taught me how to organizes and manage beta testers professionally. I started with a group of 24 beta testers, carefully chosen by members of the founding team. I employed a private facebook group to communicate with the group.

We divided the testing into three distinct sections.

 

Initial Report 

We looked for:

  • First impressions on look and feel
  • Clear explanations with tutorial
  • First action taken
  • Purpose of the application

 

Progress Report

We asked users to report on:

  • Problems/Failures encountered and steps to reproduce
  • Interaction Issues and suggestions to better experiences
  • Misc. notes section for any other comments 

 


Post Beta Test

We asked users to complete:

  • Most liked & disliked features
  • Review of the overall application
  • A competitive survey to exist applications
  • Honest Testimonial 



Download the Templates I used below

Initial Questionnaire
Progress Report
Post Survey