#3 Prototype v2.0

Prototype v2.0

Prototype v2.0 UI Designs

Prototype v2.0 Code

Build Procedure

Prototype v2.0 Conclusion

Prototype v2.0

The central focus of prototype v2.0 was to develop a basic back-end model that would exemplify some of the functional potential displayed in the menu designs created in Prototypes #1 and #2. The prototype was set to work as a basic app that could show essential functionality for creating tasks and challenges, and sort them into a to-do list style in order to help keep the user organized. With editable due dates, names, difficulty, etc. the user is able to create their own unique experience. Although prototype #3 v2.0 lacks most features illustrated in Prototype #2, it sets the example for back-end and functionality potential for profectly as a product.

Prototype v2.0 UI Designs

Calendar & Schedule Menu

Menu w/ Challenge Editing Visible

Menu W/ Task Editing Visible

Representing the back-end of Profectly, prototype #3 was built to exemplify complicated aspects of functionality that were displayed as concepts in the previous front-end prototypes. This prototype specifically focuses on user scheduling with the ability for the user to create tasks, and challenges. Currently, however, they can only make two tasks, and one challenge due to limitations with the coding engine Kodular. With this though, the user can view the "To-Dos" (which are tasks, challenges, goals, events, etc.) for the future seven days and the due dates of such To-Dos. This information is displayed in a list-based format, as seen above, that shows the name of the task, the reward, the due time or frequency, and the type of To-Do (currently Challenge or Task). Using Firebase, all the settings and data saved by the user are stored in a real-time cloud database so that progress is never lost.

Prototype v2.0 Code

(Not all the code, just some important segments)

The code above sorts tasks in the To-Do list schedule based on the time the user sets them to be due. Whichever task has an earlier due time will appear first on the list.

Its hard to see due to the size of the image, but the code above calculates which tasks or challenges should be shown when you click on the one of the seven days in the To-Do list. This is just for the current day (Day 1) in the list. The next seven days are similar in format though.

The code above provides a saving function to the time picker option in the task editor. Essentially, it converts the value that the user sets into that which can be stored in the database and be applied in the form of text in the prototype UI.

This is one of the largest segments of code in the prototype (over 500 blocks), so large not all of it can be shown due to its scale. But essentially, this code calculates and gives the 7-Day To-Do list schedule functionality. It takes the current date and the next 7 days and then applies the values to the UI including the numerical day (ex. 31st) and the day of the week (ex. Monday). It may seem like a simple task but it was difficult to calculate future days and their coinciding day of the week.

Build Procedure

After completing prototypes #1 & #2 using Figma, which were mostly front-end designs, the team began searching for potential options to create a back-end based prototype.
For prototype #3, it was eventually decided that the team would use a block-based coding engine called Kodular which focuses solely on creating apps.
The creation process started by the Profectly developers becoming familiar with the tools available, interface, and code. It was important to have a thorough understanding of how Kodular worked in order to create an effective prototype.
After concluding that the prototype would focus on a calendar/schedule based system to exemplify back-end complexity, the UI began development
First the basic task system and editing was created. There were road blocks especially when it came to saving data in the Firebase cloud, but nothing like future processes.
The schedule list was the created which took a while to build due to the amount of code required to calculate days 7 days in advance and sort tasks & challenges based on there due time.
An additional task option and a challenge editor was then made to allow for more customization
Through out the process, the team utilized various tutorials and often used the community forums to overcome countless obstacles pertaining to the code and UI.
Overall, it took over 25+ hours to build this prototype in the span of 2 weeks.

Tools and Equipment

For the third prototype, Kodular was used to create an effective backend that could provide the functionality to the ideas highlighted in the front-end designs in Figma.

Kodular: An online block-based code app engine that allows the Profectly team to develop and code the backend prototypes. It provides crucial tools for development such as Firebase compatibility.
Firebase: This is the database system that Profectly utilizes in prototype #3. Specifically, prototype #3 uses a real-time database that allows for data to be saved to the database by the users. It's a cloud database and will allow for future ability for users to link their customizations with their Google accounts in the future, allowing for a more unique experience.

Bill of Materials

Rather than using Figma with past prototypes, the team utilized Kodular, a free block-based coding engine for app development, to build a more effective and complex back-end that could exemplify the potential of such. In addition to this, in order to store custom user data, the prototype used a service called Firebase to store all data in a real-time database. This service is free, but there is a fee for using excessive amounts of transfers and storage.

Incremental Testing

Throughout the development of Prototype #3, there was frequent testing of new code, its response in congruence to the UI, and how data was responded to by the Firebase real-time database. Whenever a new feature was added, no matter how small (Ex. Due Date Changer), live testing was performed on an Android device in order to find any bugs with the newly developed code or any oddities that may occur on the UI side of things. This testing was an essential part of the developing process and lead to faster, more effective development.

Build Modifications

The main build modification came with the development of the To-Do list style schedule seen at the top of the main page. Originally the plan had been to develop a more calendar-like interface, similar to that in prototypes #1 & #2, however, a more simplistic 7-day schedule format was designed due to it being better in terms of ease of use but also being far easier to develop, as a full 30-day calendar would require far more time to code and design. Another modification that was made during the development process, was the transition from a local database (stored on the device), to a cloud storage database with Firebase. This, although it would be expensive if many people used the prototype, would allow for higher functionality in terms of accessing data on various devices and having user accounts associated with such.

Prototype v2.0 Conclusion

As the first back-end prototype for Profectly, prototype #3 served to illustrate the potential functionality for what was conceptualized in prototypes #1 & #2 on the UI side of things. It did just this through the complex code used to calculate the time and days, sort user-created tasks and challenges, allow users to edit To-Do's for themselves, and link all saved data to a real-time database using Firebase. Even though this prototype to the longest to develop, it effectively illuminates the potential that Profectly has as an app in regards to the back-end. And it actually works as an app! But only on Android due to Kodular limitations.

Page updated

Report abuse