COGS 187A — Team FireMelon
Week 1: Logo Design
In the first week, our team comes up with multiple logo designs. We hand-sketched these logos and finally polished and digitized them.
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.
We then finalize the logo to be this one:
Week 2: Collecting Data
We thought of a couple of ideas: Food recipes, Charity, Music, Productivity To-Do list, Carpool. After days of brainstorming for the idea we chose to make a to-do list that can manage tasks and prevent user’s procrastination with the “Exploding Melon” as a visual representation.
I interviewed a high school student, a pharmacy student and an engineer, using the list of questions that our team has listed. After that, our team sat together to analyze the needs based on the datas that we collected from the interview part.
Week 3: Personas and Storyboards
After analyzing all the needfinding data, our team 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:
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.
Week 4: Prototype
There were a lot of fun moments with our team when we first sketched some screens on the board. Everything looked messy and confused at first but gradually became more relevant. Our team used the needfinding data to focus mainly on those 4 features that we finalized last week.
And then here are our hand-sketched prototypes
We use the guide “10 Usability Heuristics for User Interface Design” to be a reference to check our prototype functions.
I learn to use Balsamiq which is so fun and easy to use. I may sound a bit silly but I kept asking myself how the Balsamiq prototype would work if I export it into a pdf file… But it came out better than I thought.
Week 5: Hi-fi Prototype and Portfolio
I once thought Balsamiq was so cool until I know a tool call Invisionapp. This was also the first time that I happen to download and get acquaintance with Sketch — a Photoshop kind of software for Mac user.
Doing anything in the first time is always hard. But I then be able to manage to use Sketch quite well. While other team members are using Photoshop, I did my part with Sketch to design the Home screens, the Backup, and the login one. The screens that I did came out better than I imagined and yeah they took me forever to finish.
I guess if you are reading this post, chance that you link this from my portfolio :-)
I use Bootstrap to create my portfolio. Playing with html and css is very fun to me although it’s not cake as it seems like. My portfolio still needs to be polished a lot but I would say it looks pretty okay now.
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.