The FireMelon Experience

During the summer of 2016 I was working on a productivity app called FireMelon. Along with 5 other students, we began our project by coming up with a logo. Initially, these were the designs I came up with. As you can see, they are rough sketches that were eventually scrapped.

After receiving feedback, I was able to come up with a new logo. As shown below, my new design was ultimately chosen as the final design for our app.

Next, we did some need finding to gather information about our users. This helped us see what people want and what issues they wish to resolve through our app. Here you can see my specific interviews.

after conducting our interview we began working on our prototype. This was done by creating a paper prototype and then moving on to a low-fi design to show off our functionality. After working on the prototype, I began designing a few screens.

After this we were able to put it all together. In short the final product can be discussed in detail here:

My specific role for the final presentation was described below:

Phase 6: The Final Product

Author: Luis Padilla

Finishing Up 8/30/16

As I am writing this post, we as a team are working vigorously to finish up the final touches for our application. All of our hard work this sessions is finally beginning to take form and we are all very proud of this. The road was long but we are close to reaching the end. However, the process of completing our app was not as straightforward as we would have hoped it would be. During the past week, we ran into many different obstacles and encountered some flaws in our design. This, of course, lead us to redesign our application by adding new features and scraping other features in exchange for a smoother flow and a user friendly interface. In this post, I will describe the process of implementing our final design.

Low-fi Porotype Screens

Earlier this session we were tasked with making a prototype in order to receive user feedback and design a basic template for our product. As you can see in the screens above, our original low-fi prototype was very minimal. Its only purpose was to mimic functionality and give us an idea of how our app will flow. Thanks to this outline, we had a great example to follow and build upon. To undertake this task, we developed a strategy which was as followed:

Step 1: Improve the aesthetics

Step 2: Implement the features

Step 3: Redesign if needed

Starting with the first step, we decided to improve on the static pages of our prototype by adding color and laying out basic elements of our screens. To do this, we decided to use Photoshop to design the screens. Each one of us was assigned the task of improving a few screens of our prototype. After hours of working, we needed to put it together to get a glimpse of how it would look. Instead of using Balsamiq to generate the screens, we took a step up and jumped to InVision. InVision is an online service that allows users to build mock prototypes in order to generate a view into what a potential product will look like. The interface was easy to understand and collaborating as a group was made easy. Below are our initial designs implemented with the InVision app.

Mid-Phase Designs

By this point our app was starting to take shape, however, because everyone was working on their own screens, the design was not very consistent throughout. Thus, we decided to redraw the screens following the style of the home screen but before we started redesigning, we moved to the second step which was to implement the features. Doing this required us to think of various scenarios our users might encounter. This included simple functions such as logging in and deleting a task as well as more complex tasks like creating a group or adding an event to the schedule. By trying to predict the behaviors of our users, we were able to add certain features we never would have thought to include such as a help menu and an easy to find navigation bar. Because of this, we were able to move on to the third step of our process and redesign some features that were a bit broken. Little by little we began to repeat the three steps of our design process until we reached a final product.

Final Design Screens

The above screens draw from the same prototype as the other screens shown in this post, however, it is very apparent that by going through these steps, we came up with completely different iterations despite the source being the same. In the end we ended up with a very pleasant design which shows off well what our application is all about. Of course, this post only shows a few samples of our final product. As we begin to finish up all the final additions of our app, we are now shifting our attention to the final presentation. Overall our team is satisfied with the progress we made this session. Everyone had a role to fill and everyone brought a different perspective which helped make our app a success. Now we wait to see how well our product fairs during the presentation.

App Description:

FireMelon is a great and easy-to-use productivity app that allows you to keep track of all of the important events and deadlines in your life by uploading your schedule to one centralized location. Aside for this, FireMelon doubles as a fun and engaging social game where you manage your very own melon farm and compete with your friends to see who can complete the most tasks and expand their farm. Get FireMelon now and get on track today!

Takeaways:

— This session turned out to be a very enjoyable and rewarding experience for me. At first I was uncertain whether or not I would even be a part of this class, but in the end I ended up joining it because it seemed interesting to me. I have worked with many teams before this, but the people I ended up working with seemed to work very well together. This made the experience bearable in my opinion. Throughout this session I was able to learn a lot about the importance of the design process and how following it makes it easier to visualize the final goal. I was able to improve my team working skills as well as my own personal communication skills which only helped to strengthen the technical skills I possess. Besides this, working on my personal portfolio was a great way to put myself out there. Overall, this was a great session and I hope to continue to build upon the skills I acquired in this class.

Overall, we were very satisfied with our product. In the end, I am very honored to have been part of this experience. It was a very enriching project.