#1 Prototype v1.0

Prototype v1.0

Prototype v1.0 UI Designs

Interactive Prototype v1.0

Testable Parameters

Prototype v1.0 Conclusion

Prototype v1.0

The goal of prototype v1.0 was to create a basic front-end model for the three menu designs we initially planned and designed in Element D, including that of a UI for Calendar & Tasks, User Goals & Challenges, and Rewards. During the build process, though, a basic profile menu was added and such for the future friends/social menu planned for prototype v1.1. The process of the creation of this prototype is displayed by the following build and design procedures and the tools/software to do so.

Prototype v1.0 UI Designs

This is the design, or mapped-out layout, for the first Profectly prototype that displays the front-end designs for the app and how the user interface menus connect with one another.

Calendar & Task Menu

Front end design, with the purpose of demonstrating the UI aspects of giving users increased control over the organization of scheduling and tasks in order to help minimize procrastination.

Challenges & Goals Menu

Front end design that serves the purpose of displaying user potential for the organization of goals and challenges, definable by the user, to streamline the effort to combat procrastination and target other aspects of overall self-improvement.

Rewards Menu

Front end design that presents the UI aspects of potential rewards and reward customization by users. With this it acts out the potential for gaining rewards by users in the back-end as an effort to further positive reinforcement for the users experience.

Interactive Prototype v1.0

Prototype v1.0 link available here as well

Prototype v1.0 is available above so that you can explore it yourself! (Press "R" if needed to restart the app).

Testable Parameters

Testable parameters suitable for this Prototype come in the form of quantitative and qualitative feedback and testing from users and the developers. Because this prototype is a functional piece of software, the most effective way to test is to get the idea in the potential user's hands and allow them to provide feedback from the testing of the prototype. Additionally, applying user stories and their criteria to the prototype will provide another acceptable method of testing. These two measures will be used on all the prototypes (except v1.0 which will be tested with just user stories).

Build Procedure

Initially, UI designs and concepts were created for Prototype v1.0 as displayed in Element D
Various App developers and coding engines were then explored for a potential developing solution
Decided on Figma to create the UI for the creation of Prototype v1.0 and the UI with it
Targeted on creating the three basic starting menus, including goals, rewards, and calendar
Built a basic menu to link them all
Added a basic profile menu and settings for them to add further depth
More menus, settings, etc. were added as extensions to the current three main menus in order to add more depth (Ex. Menu to add new goals).
Experimented with components, a feature that allows for changing individual parts of a menu without affecting the entire thing. This was applied to switches, checkmark boxes, etc.
Organized UI designs in a universal way to enforce unity among text sizes, shape sizes, etc.
Created a basic loading screen that is introduced to users upon opening the app

Bill of Materials

Thus far, the only software/tools used to create the prototype v1.0 have been the app prototyping software Figma, which offers free licensing for users. As a result, no funds have been spent on the creation of the first prototype.

Tools and Equipment

As of now, Profectly has only used Figma for the creation of prototype v1.0. However, A basic wireframe created by Method was used for all the graphic design Elements

Figma: Figma is an online app developer that allows us to create a 'face' of an app to allow the team to create a visual framework for future builds.
Wireframe Kit: "Paper Kit" by Method (for use in Figma)

Incremental Testing

As the first prototype (v1.0), it experienced the most testing in terms of visual formatting, including text and graphic spacing and sizing. Additionally, basic prototype functionality was tested including clicking to move to and from various linked menus and the addition of components was implemented and tested later on. In the case of the profile menu, scrolling functionality was tested and tweaked to increase the number of settings that could be included. In addition to this, basic animations were tested for transferring the user from one menu to another. This was especially evident with the loading screen which has a smooth transition after five seconds of opening the app. Because prototype v1.0 was built to serve as a front-end representation, it lacked key elements that would make for actual functionality, which will be necessary for the future v2.0 prototype which will have a represented backend.

Build Modifications

The Prototype v1.0 experienced several build modifications during the development process, including animations, and spacing. These were the two key components that experienced modification because of the importance they play in improving the user's visual experience. For animated transitions, they were altered to be smart, rather than instant to make for cleaner navigation; however, they have been found to cause more lag on mobile devices which will likely be improved on in the future. For spacing, original designs were more compact, but this increased clutter and made for an overwhelming experience. Instead, objects and text were spread out and simplified to improve the situation; however, there is still room for improvement.

Prototype v1.0 Conclusion

Although Prototype v1.0 was an extremely basic build that was solely front-end based, resulting in a lack of functionality, it still served as the crucial base model for the future prototype v1.1 and v2.0 (with a backend) to be built off, especially in terms of formatting visual aspects and design. Not only this but, once improved in future v1.0 prototypes, it will lead to the development of a more accurate representation of what a perfected back-end and front-end prototype could look like.

Page updated

Report abuse