Paper Prototype (02/26/14)

When we were assigned to do a paper prototype of our apps, the first thing I did was brainstorm about how my app would function. How would the user navigate? What does the user need first? The location and date were obvious. After that the app gives you the tides, the bar graph, the sun and moon rise and set times, automatically. What would the users do next? Check the tides on the next day, and perhaps any day after that. So my user can just scroll from screen to screen to get the data for the next several days and scroll back to today’s screen or even days before. Using sub menus the user can go to any other date they want. They can also go to other locations, select some favorite lcations and change between feet and meters and time zones. Once I started designing the app I realized that a lot more pages were needed to adequately demonstrate the prototype.

 

After watching the video examples of paper prototypes, I noticed that most of them were very rough sketches being placed onto a phone or phone template. I then decided to print some templates of each page of my app from my wireframes, and organize them in order of how the user would navigate. Both the videos “iPhone User Interface Design, Paper Prototype Study”,  and FinalFinal.com“Mobile Paper Prototype for the Predict the Sky App” by Sofie Dennis showed small cut outs being substituted for each page. After trying this I found it to be confusing. I decided instead to make a page for each screenshot to keep me from going back and forth during my presentation. I added subpages such as locations, favorites, change date, timezone, units and about. As I practiced my demonstration, it became apparent that more pages were needed to in order for it to flow better. After adding more pages I recorded my demonstrated of New York Tides App.

Sources

Dennis, Sofie. “Mobile Paper Prototype for the Predict the Sky App.” Final Final. N.p., 7 Sept. 2012. Web. 23 Feb. 2014. <http://finalfinal.com/sofiedennis/mobile-paper-prototype-predict-sky-app>.

iPhone User Interface Design, Paper Prototype Study. YouTube. N.p., 3 Jan. 2011. Web. 23 Feb. 2014.

Info Arch and Wire Frames (02/18/14)

This week I worked on revising my information architecture. I tried to keep the user in mind while designing. How is the user going to use this app? What does the user need from the app?

From the research I had conducted with the three users of my app, I selected the features most important. For example, the users need to find a location and select a date quickly and easily. The program will then give the users the high and low tides for the day. Another feature I was surprised to find was that the phases of the moon were important to my users. One user found a tide graph very useful. It is a visual representation of the tides and I believe it would work well. With these elements in mind I redesigned the IA using InDesign.

After doing more research I found the screen shot by Antoine Bonnin on Dribbles.com, “App Welcome Flows Overview” helpful in the layout of the IA.

Bonnin, Antoine. “App Welcomes Flow Overview.” Dribbles. N.p., n.d. Web. 17 Feb. 2014.

After reading, UX Booths article, “Designing for Mobile, Part I: Information Archetecture”, I decided that the tabbed view model would work best. It is simple and as the UX Booth article states, it allows the user to “quickly scan and understand the app.” This makes sense. People who will use this app, want to know the place and the tide quickly so they can go about their activities. I also wanted to incorporate how each page would interact. For example, when the app open the current date, location of the user and the tides would automatically be displayed. With a swipe, the following date’s or the previous date’s information would be displayed.

McVicar, Elaine. “Designing for Mobile, Part I: Information Architecture.” UX Booth. N.p., 25 Sept.

 This is my redesigned information architecture:

Also from my research I found that I agree with Matt D. Smith in his January 17, 2014 blog, Wireframing With Illustrator and InDesign. I too prefer to design my wireframing using the programs as opposed to doing hand sketching. Although I am not as fast as Smith claims to be using Illustrator, I do find that I am more comfortable using the program than hand sketching. I like the precision that the programs provide.

Using Illustrator I laid out my wireframes. The main elements were clear in the IA and I was able to follow it in the wireframes.

   

Sources

Bonnin, Antoine. “App Welcomes Flow Overview.” Dribbles. N.p., n.d. Web. 17 Feb. 2014. <http://dribble.com/shots/1307197-Mobile-App-Flow/attachments/182765>.

McVicar, Elaine. “Designing for Mobile, Part I: Information Architecture.” UX Booth. N.p., 25 Sept. 2012. Web. 17 Feb. 2014.

Smith, Matt D. “Wireframing with Illustrator and InDesign.” Run home, Jack. N.p., 17 Jan. 2014. Web. 17 Feb. 2014.

Mobile App Design Process (02/11/14)

This week I continue to work on re-designing the New York Tides App.

I was to develop information architecture and wireframes.

Before I started my own work I did some research.

Behance.net gave an in depth look at the mobile app design process.

Steps: Research; Plan; Design; Build; Evaluate; Visual Design.

Interesting that visual design is last.The Mind Map is very detailed with information on all the steps that need to be analyzed, including the economics like per capita income. I was not familiar with a SWOT Analysis:  Strengths, Weakness, Opportunity, and Threats. I found out it is structured planning method for business strategy.

The presentation  of the steps is very clear and useful.

I went on to read the uxbooth.com article "Beginner's Guide to I.A. It is quoted as saying that the use of information archetecture is ”creating structures to facilitate effective communication.”

Questions: What is the flow of users through our site? How does the software help the user catalog their information? How is that presented back to the user? Is that information helping the customer (i.e.: decision driving)?  The I.A. professional is not merely presenting information attractively, but is ensuring that a user gets what they need from the site and is getting what the designer wants them to get. One quote mentions that a bank web site not only gives information about a customer’s accounts but also gives “security”. The website wants the customer to feel that the bank is protecting them and their money.

The IA needs to have the big picture that crosses or combines several disciplines, designer, project managers, graphic designers. They maintain the vision that ties all the elements of a project together seamlessly. They are only necessary on large projects that manage huge amounts of data in an unusual way. The Project Manager normally fills the role of IA.

IA’s research the audience and business. Decide on the sites primary objective and design or influence the design.

IA’s primary tools are wireframes. There are many tools available to produce wireframes, Visio and OmniGraffle are two of the best.

Dan Klyn video equates how a good building functions well because an architect designed it to. IA is the same, a good web site works because an IA designs it well.  

Reading this made me ready to design my own information architecture for my site.

The uxbooth.com article, “Designing for Mobile Part I” states that there are 6 billion mobile subscribers in the world, 87% of the world’s population 7 out of 8 people. We love our phones. But since they are small and may have slower connections, the design for mobile devices is different. User-centered deign is essential.  The four most popular design methods are: mobile-specific site, a responsive site (that automatically adjusts to the mobile platform), native apps or hybrid apps. Native apps are designed for the device, hybrid are more flexible and give an “app-like” experience.  Each method has its pros and cons but the chart seems to show that responsive sites are the most useful.  

Now is time to get to work. After researching my users I began to design my information archetecture by using a hieracharcy pattern. I thought about what information a user would need.

Next, I began to sketch the wireframes. I laid out the different navigation tools that I thought would be the most efficient way to present my information to my users. I gave a lot of thought how the users would navigate the site.

Sources

Ghodke, Swapnil. “Mobile Application for Job-seekers.” behance.net. N.p., 17 Nov. 2013. Web. 9 Feb. 2014.

Maier, Andrew. “Complete Beginner’s Guide to Information Architecture.” uxbooth. N.p., 10 Mar. 2009. Web. 9 Feb. 2014.

McVicar, Elaine. “Designing for Mobile Part I: Information Architecture.” uxbooth. N.p., 25 Sept. 2012. Web. 9 Feb. 2014.

Interviews

Personas

After last week’s critique I had a lot of work ahead of me to fix my personas, namely the font size and the background image. Before I made my changes  I decided to go back and re-read some of the articles as well as get some inspiration from my classmates blogs. I re-watched the Lynda.com tutorial, “Understanding How Personas Fit.” I wanted to get a clearer feel for the what purpose and benefit of creating a persona would do for the designer. I learned the importance of having a model to be used as a target user and learned the importance of creating this persona right after analyzing the data. I also read The UX Review, “Personas-The Beginner’s Guide”.  It states, “Personas give a great start in understanding about who you are designing for.” I learned that there is no one template for a persona but is important to know the user’s personality and background as it pertains to usability. My next step this week was to go to Pinterest and gather a little more inspiration.

http://www.pinterest.com/jfdiffley/personas/

I looked over my persona data and felt that it had the information I could use to re-design my app. It was now time to do a Type Study. I chose Rockwell 90Pt for the heading, and arial 18 Pt for the body. Both Rockwell and Arial are easy to clean, clear and easy to read. I chose the font size based on the idea that the poster will be pinned to the wall. The font size was easy to see from a distance in a room.

From my color study, I chose colors all in the cyan family. They are easy and pleasant to look at. I also used red for the arrows in the charts to pop out from the cyan.

Sources

“Personas-The Beginner’s Guide.” The UX Review. N.p., n.d. Web. 2 Feb. 2014.

“Understanding How Personas Fit.” Lynda. N.p., n.d. Web. 2 Feb. 2014. <http://lynda.com>.