This blog post is about the last week’s class activity in CGT 512. And, I should say that this is by far the best class I have had in this course. This makes me ask – Why not every class was designed like this, Dr. V ? :). The activity was about Sketching and Wireframing for an iOS application for Purdue University Students to check their scores on Black Board. Doek, Kanrawi and John are the people in my team. It was very much practical and made us to implement our learning from the previous classes in this semester, this class would not have been enjoyable if we had not learned anything in them. In short, this activity was like ‘Icing on the Cake’. The 3 hours just flied. What follows is the collage of our Wireframes , Sketches and our process in doing the same. In particular, I understood the importance value of ‘Brainstorming’ and gathering ideas.
1. Discussion of the Idea :
– Before moving in to the phase of Brainstorming, we first discussed the question. i.e., the core idea and theme of having the application. This helped us understand the main goal of design first.
– Then, we moved into the process of Brainstorming. We took utmost care not to eliminate any ideas. We gathered every idea from each of us and noted them down.
a. Scenarios :
First, we decided on the scenarios using the ideas. But, for describing the describing the features – during the process, everyone came up with a mock up UI of their idea. Every idea was different was different, unique but also sensible.
b. Features :
Using the scenarios, we were able to uncover the features of the application by understanding the needs of the persona in the specific scenario. ( This is what I call, User Centered Design. ;). ). At one point we had a confusion while discussing the features, because Me and Kanrawi were Android users, Doek and John were iOS users. So, we had to unify the design language that we used to describe the features, navigation flow and button placements with respect to iOS. Since, this was an iOS application.
3. Sketching & Storyboarding :
After unifying the design language of the application, everyone took a feature and started sketching the UI. We did not have required flow and fluidity in the sheets of paper. So, I divided the board into three sections. One section is for everyone writing their ideas in specific categories. The categories in one section were personas, scenarios and features. This greatly helped us in defining the core ideas. The other two sections were Storyboard and Wireframes.
4. Wireframing :
Since, we had every source neatly organized in our hands and board, it was very simple to design the Wire frames. Then, we organized everything in place for the visit by every other team that followed the activity. Previously, in my workplace I used to draw wire frames. I felt difficulty in doing that. Since, I was the only person who would both program and design interfaces, sometimes I would not have a clear vision. I did not know about personas and scenarios then. Now, I am sure that it won’t happen again.
Following the visit, I felt real happiness in the appreciations by the peers in the class, commenting on our storyboard designs and wire frame designs.