Phase 1: Logo Design
Author: Kevin Jan
And it so it begins… Team FireMelon.
It’s interesting how things come together. Everyone had already seemed to have their groups set in stone when each of us walked into the room, one by one. We, being the untimely misfits we are, happened to find each other probably because we had no one else to find. However, don’t let the title of “the late squad” fool you.
Introductions
I suppose we were all a little late to group formations. But as soon as we all got together we started throwing ideas around and bouncing ideas off of each other. Our first task: Creating a team name and logo. But before that, let us introduce ourselves!
Starting from the left, we have Kevin, DanHy, Ezar, Luis, Vu, and of course, the person taking the picture is Luc. There was actually another member of our team, but due to personal issues, he had to take leave, which resulted in him having to drop the class. Here’s to hoping everything will be alright for you, Jake.
Our group consists of entirely Computer Science majors, with the exception of me (Kevin), being the only Cognitive Science major in the group. The extent to our knowledge with web development and design is at both ends of the spectrum, with some people knowing nothing and some being very proficient. But hey, we’re all here with the intention to learn, right?
Thinking of a name
After introductions, we hit the ground running. Our plan was to think of a name and a logo first, and then apply that branding to our app idea. We felt that it would be more difficult creating an app idea first, and then building the branding around the app afterwards.
One of our members, Ezar, was already doodling in his notebook during the entire lecture, and he seemed to be drawing geometrically designed butterflies. That’s where our first idea popped up: Flutter. We were nearly set on using this idea entirely, until we decided to not settle and to keep thinking of other ideas. We also happened to all like the color red, so that also drove a lot of our brainstorming and thinking.
Building off of the color red, we wanted to understand what kind of emotions the color ignited. We thought of things such as love, passion, happiness, energy, motivation, power, and anger. On top of that, we wanted to build off of the idea of using fruits or food(like apple), here are some other ideas that reminded us of the color red and/or fruit: Banana, Watermelon, Dragonfruit, Bread, Bred (red bread), Power Rangers, Red Blood Cell, Red Panda, Red Curry, Wine, Battery, some kind of lightning bolt or charge, and of course, mitochondria is the powerhouse of the cell. As you can clearly see, we took into consideration every idea. No idea is a bad idea.
We finally decided on FireMelon, because of the fact that we believe it can be easily branded and twisted in a variety of different ways to be able to fit our application/design. We could basically create any application we wanted to and simply apply some iteration of “melons” or “fire”.
Next Step: Logos
Based off of that, we created our first iterations of our logos.
It was really nice to know that we weren’t confined by a single idea, and that we were able to be creative with our logo designs. Following the initial ideas for our logos, we realized that we shouldn’t polish our logos until after we actually thought of an idea, and that way we could further develop our logos by incorporating the app idea.
Thinking of an App idea
Our biggest challenge was thinking of an idea that had not already been thought of, while also making the app multi-faceted. But the implementation of the app will come later. We just needed to think of an idea. Trust us, there was a lot of sitting around, staring down, and awkward silences during this process. No good idea comes easily.
We started throwing ideas that targeted a wide variety of audiences with a lot of different usability. We thought of a couple of ideas and separated them into categories: Food, Charity, Music, Productivity, Carpool. A lot of our ideas came from different people, and overall the discussion was a pretty open one. Everyone contributed in some sort of way, and we compiled a master list of the things that were brought up.
This was a compilation of, what we believed, could theoretically work as an app. We didn’t worry too much about implementation, because we knew this was a class focused mainly on design and we could just wizard-of-oz most of our functionality.
Following this, we created an online Facebook poll to narrow down the top three choices, and then from there, narrowed it down to one choice.
And just like that, an idea was born.
Communication
Facebook definitely has its uses, but overall it was simply getting way too sloppy for us. So, we created a slack page to keep track of important information and documentation.
Finalizing our logos
So after thinking of an idea to go off of, everyone on the team was tasked with creating one polished logo based off of their previous sketches. This is what we came up with:
Cute, huh? Or that’s what we were thinking when we discussed which logo we should continue developing. Because of the fact that our current app idea is to incorporate a little bit of gamification and exploding melons, we decided to stray away from the “chic” and simplistic logos that seem to be everywhere nowadays. We wanted our logo to be cute and fun, and almost childish to really emphasize the playfulness that we want our app to accomplish. Luis’ interpretation of the logo (top left) was one that we all thoroughly enjoyed, but we want to further polish to add something similar to the explosion in Ezar’s design (bottom left) to further represent our app’s foresighted functionality.
Here’s to looking at this adorable logo every day for the next couple weeks.
Phase 2: Collecting Data
Author: Vu Truong
Brainstorming:
After days of brainstorming for the idea we chose “Exploding Melon”, we came up with two main ideas that we could focus on. First, DanHy’s idea is about creating a to-do list that keep track the tasks and prevent user’s procrastination. Second idea is from Kevin, and it is about preventing users using specific web application in order to save their time. Then, for each of the two ideas, we tried to expand as much as we can for their implementations.
The idea of Kevin is about implementing a water melon farm. On the left side, this is what we came up with
.
.
This is DanHy’s idea, and how we came up with implement all these functions for our our website.
.
.
.
Collecting more data from interviewing:
In order for us to find more ideas and to maximize our application’s abilities, we started planing all of the questions that we would ask our potential users to receive their opinions to improve our website. This is the list of questions from our hard work combined:
As a result, we interviewed many different types of people including college students, high school students, and different people who are working different jobs. Below is some examples of how the interview question was filled out:
Then, we sat together to analyze the user’s needs through our collected data. We kept discussing and typing down all the things that we agree to be useful for our application
There are interesting things that we encounter during analyzing process, such as most users get distracted by social network, and doing their hobby things… Therefore, we thought of what if our application can create some kinds of punishment to the users who spend too much time on their social network. For example, blocking their interesting website or applications if they visits them so many times.
Competitive analysis of existing applications:
Besides, not only did we collect data from our potential users, but also we collected data from comparing the functionality of our ideas to other similar applications. Each of us has been compared at least 2 applications in order to get the most cons and pros between our ideas and their applications. So, below is also some examples:
During our discussion about how to improve our pros and fix our cons, we came up with some possible features, such as friendly competition for group members, backup history of to-do list, drag and drop files, easier ways to input in reminder, cross platform accessible, and set priority by using different melons…etc
Because we have collected a lot of useful data for our website. Thus, we are totally ready for our next step, which will be storyboard.
Phase 3: Personas and Storyboards
Author: DanHy Do
Last week, our team has collected all the needfinding datas from interviewing different people. We now come up with the main theme for our “melon farm” based on the datas that we collected.
FireMelon is a multifaceted to-do list web application that has a simple interface, making it not only easy to use but also fun and motivative with the visual representation of exploding melons. FireMelon will also have these main features:
- Repeating tasks
- Automatically reminding emails
- Receiving reminding texts from friends
- Free time lookup
- Group management
- Backup feature
- Privacy (friends can only see the melon farm without knowing any specific tasks)
For this week, our team has generated different personas based on the needfinding datas that we have collected last week.
Each team member provided unique personas:
- Chloe is an engineer, an online seller on eBay and a single mom. Due to the busy schedule, Chloe has always been overwhelmed by deadlines and emails and different kinds of task. She needs to find some tool to organize the tasks and some effective way to remind her not to miss any deadlines.
- Kent who is a student and also working part time. Kent needs some type of tool that could help him put his schedule quickly as well as being able to backup his datas.
- Jack, a medical student, who has trouble in organizing tasks and needs a way to manage all the deadline as well as being able to look up some free time.
- Tim, a UCSD student, a part-time worker and also an active member of 3 organizations. Tim needs to finish all the tasks by the deadlines and to organize his schedule efficiently.
- Charles, an introverted hard working officer who often faces with deadlines and wants to stay motivated.
- Austin, a carefree student who always likes to keep track of his short-term and long-term goals. Austin needs a tool that is able to help him multitask trivial tasks as well as syncing all the datas to all of this devices.
While each persona above comes with 3 different storyboards, we are discussing and selecting 4 storyboards that focus on the main functions that we are going to implement.
1. Friendly Reminder
2. Free-time lookup
- Jack likes to watch tv on his free time. However, being a medical student he is very busy
- He uses FireMelon app to help him showing when he has free time to schedule other events
- Now Jack is able to find time to watch the games on TV!
3. Group Management
Charles is a hardworking introverted office worker
- Charles is asked to lead a project
- He needs to work with strangers
- He wants to keep track of his new teammates as well as being able to bond with them.
- Charles and his teammates use FireMelon group agenda
- They now can collaborate and track group progress.
4. Backup
Phase 4: Prototype
Author: Luc Ngo
Brainstorming:
This week we are focusing on designing and sketching a low fidelity prototype of our app. In class on Monday, we worked on persona and storyboard and planned to start on prototype after class. However, the persona and storyboard presentation ended up late and some of our members had to leave after class. We decided to have outside group meeting. Finding the time that everyone could meet up together was tough, especially during this tight summer schedule. But everyone was willing to find their time to meet up in order to have it done before class on Wednesday. Except for Luis, he had a court to attend and couldn’t come. And here we are, enthusiastic firemelons’ members!
We were ready to roll! The main idea present in all of the team members’ sketches is a simple app that has delightful design and is easy to use. A list of upcoming deadlines’ view that starts the second you open the app.
Top left corner is the list of features that other apps don’t have, and we want to include it in our app. On the right side are our initial layouts of the main pages which include our homepage, calendar, group, friends. And that was just a start!
The completion of these personas and storyboards gives us a clear picture of what features we need to add, and how they’ll be used by real people. What’s next for us is to create prototype based on the final features that we selected. Then, we kept discussing and sketching all the pages of features that our app has (backup, leisure lookup, social aspects…) Everything went on smoothly. Here is the final picture of our brainstorming.
Look quite confusing right? No worries. We must prototype it. We started dividing the work evenly to all the members of the team. Each member had to sketch several pages as you can see their name written above it. It didn’t take us too long to complete all of these sketches as we already knew our rolls. We sketched all the pages carefully and neatly on pages. Bam! And our prototype was completed. Here are the few sketches of our prototype.
Next step: Setup and solve scenarios of our storyboard
We wanted to put layout the prototype on the board and use arrows to show the process of users’ interaction with app in each scenario. “Tape,” we need it to tape these papers on the wallboard; but we didn’t prepare for this. We stuck! Nah, Ezar came up with an idea to lay down a white board on the floor. Replacing tape with gravity, pretty clever huh? Here are our scenarios.
And we did it. It was great of 4 hours working straight. This would not have been possible without our meetings yesterday, and each member worked harder than ever!
User Testing:
We had interviews with potential users (team Terminal and team ByteU). Initially we asked them to try to use our app without explaining the usage of our app to avoid limiting user experiences with our app. Then we introduced to them the new features that we would like to include in our app. We explained the app step by step and asked their opinions as the same time. We carefully took notes on user experience and their feedback. Interviews between our team members and potential users of our app will help us figure out what our best features would be, what we need on our app, what we don’t need on our app, and what we can improve on. Here is some feedback that we collected from the interviews.
After that, we decided to set up an actual meeting time at the end of the week outside of class so that we can start splitting up roles for development. Based on that feedback from last user testing, we found a lot of improvements and fixes that we can make in our second prototype. Combining users’ feedback with Balsamiq software and the heuristic technique, we got a fuller sense of the quick changes we need to make before we create the final prototype.
Phase 5: Revised Prototype
Author: Ezar Enanda
After we had our paper prototypes tested, we went back to the drawing board and reviewed the interface based on the feedback we received from our testers. Additionally, we looked back into our own design while also referring to the “10 Usability Heuristics for User Interface Design” so that we can find any areas within the app’s interface that could use additional improvements.
1. Visibility of system status
With the social aspect integrated in our app, there are bound to be things that are happening which the user might miss. We decided that it would be best to have a notification area that is visible from anywhere within the app.
2. Match between system and the real world
While the main idea behind our app is to represent the user’s tasks as a farm of melons, it might not be clear to the at first. A possible solution to this could perhaps be a quick tutorial during the initial app usage.
3. User control and freedom
We want to make the process navigating through the different options of our app as simple as possible. Initially, we had a user profile icon placed on the top left corner for users to be able to switch between their personal profile and their group profiles. We found that some users are unfamiliar with the format and we decided to place everything within the sidebar.
4. Consistency and standards
Following standard conventions found in popular apps helps the user in finding the features that they need. The tabbed interface along with the easily recognizable icons for them can be found on both the personal home page as well as the group’s home page. Users should be familiar whether they are at their own home or their group’s.
5. Error prevention
Apps that require user input can lead to errors if the data is not properly inputted. In addition to making sure that users are entering their forms correctly, we want to limit the things they are allowed to enter with the help of pop out menus on fields such as time and assigning tasks to other group members.
6. Recognition rather than recall
Having to input the same things over and over again might become tedious and can make an app unusable. Simple features such as autocomplete for search-bars will certainly allow users to focus more on what that they need to do. With our app having a calendar view feature it is very likely that users will want to be able to tell what to expect from their agenda without having to inspect every individual day. We decided that our calendar should display different tasks on days with simple colored dots/melons.
7. Flexibility and efficiency of use
To be able to complete and dismiss a task should be one of the easiest thing to do in our app. But because it is so easy, we want to let the user to undo their action in case they accidentally marked a task as complete on accident. Our solution was to add a confirmation dialogue that appears after a user completes a task, allowing them to undo their action. Additionally, we found that we needed to include a back button on certain pages as our testers were unable to do so on our initial prototype.
8. Aesthetic and minimalist design
While it is nice to be able to display a lot of information on a single screen, it can get a little overwhelming and ugly after a certain point. We do not want to take away information from the user but rather only show them when they need to see them. For example, we hid the specific descriptions of task from the user’s/group’s home menu but still allow the users to be able to access them by clicking on the corresponding icon of the task itself.
9. Help users recognize, diagnose, and recover from errors
Because we have not actually implemented our app, we do not know for sure what errors we are to expect to encounter. Some possible scenarios could be: “loss of connectivity during synchronization” and “task conflict with other group members”. The handling of these errors should enable the users to be able troubleshoot on their own by giving them a clear detail of the issue.
10. Help and documentation
Our idea to help lost users is to have a specific help page that can be found from the sidebar. The help page would include a search bar where users can find what steps they need to take based on the keyword they inputted.
There are still some room for improvements for our app and we will continue to make those improvements as we go along until our final revision of the app.
Phase 6: The Final Product
Author: Luis Padilla
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.
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.
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.
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.
— Taking this class was definitely an experience that I wont forget. This project had given me the incentive to expand my technical skills, especially in graphic manipulation and also web designing. Being able to put pieces together from scratch felt rather rewarding to me. While I wished that we had more time to do the entire project, doing this project had already made me more confident in working for future projects. Working with these five people had given me the opportunity to taste what it feels like to be a team in a work setting. Starting out from strangers on day one, we have forged a bond that lets us define each of our individual qualities.
— For me, this class was definitely a lot more stressful than I thought it would be. It took me by surprise how fast-paced the last week was. The class started off really slowly, but exponentially picked up speed once we finished our initial prototypes. Overall, the class was a great experience, and has really taught me a lot with working in a group setting, as well as user interface and design in general. The portfolio assignments were great as well. It really pushed me to start something new that would further benefit me outside of this class alone.
— I learn quite a lot from this class: Teamwork, user research, sketching logos, creating prototypes using Balsamiq, Sketch, Invisionapp and making the portfolio. Although doing all of them within 5 weeks was not easy but it was very fun. Seeing our prototypes, which first were hand-sketched, gradually become a real visualized UI is such a strange and exciting experience to me. I can feel this class brings me a real-world kind of experience when we develop our product based on the customer needs.
— During the process of completing our app, I had face many obstacles that I did not expect. For example, because this was the first time for me that I had to interview users, creating user cases, sketching prototype, learning to use different kind of softwares to create a low to high-end prototype (Balsamiq, Sketch, Photoshop). However, I am thankful for that. Because from these obstacles, I had to learn how to use different kinds of softwares, and I also had to learn how to talk and interview with different type of users.
— This project has given me a good understanding of the design process of modern applications. Furthermore, I have learned many new things by working together with my teammates. It was fun while it lasted and I enjoyed being in this class.
Last Phase: Final Presentation and Demo Video
Main features of our app:
Future implementations:
Demo video:
Since the last post, we concluded this session by presenting our final project to our classmates, assistants, and professor. The final presentation went well overall, but we are still waiting for an official review of how well our app did. The presentation slides can be seen above as well as a short demo video that showcases the main features of our app.
Though the session has ended, there is still much room for improvement. For now, our app will remain as is, with the hopes that we might be able to improve upon it and one day see it fully implemented. This has been a great experience for all of us and we will eagerly await to see what the future holds for FireMelon.
