Inspiration

Reflection

In the course of these two projects I feel that I learned a lot. I was really excited to apply the knowledge that I learned at my internship to these projects. In the beginning of the projects it especially came in handy because I had a base understanding of how to approach each of the steps. It was exciting to be able to grow upon these skills.

One of the ways I felt I grew the most was through critiques. Creating something and having others look at them and give feed back is one of the best ways that you can grow. I am so excited that I had that opportunity and I feel that by looking at my UI’s in both of the final prototypes you can see a growth and a more professional look. I am very happy with how everything came out.

Also, I was able to grow with my testing skills. I have had a lot of testing experience in the past with beta testing programs in computer science, and usability tests at my internship. I was able to apply this information to the tests I conducted in this class. The more tests you conduct, and analysis you make to those tests, the more you are going to learn from them. With each test I conduct the more I discover how truly important it is to the outcome of your product.

With this, I learned about paper prototyping. This is something that I had never heard of before. At first I found it to be a little strange, and I was worried to how my users would react to it. However, after some practice and several paper prototype tests, I was able to really grow these testing skills and see the benefit of them.

Lastly the videos we recorded for this class. With the final prototype video, I learned how to screen capture a video. I also developed some of my presenting and video recording skills. I practiced each of my videos several times until I ended up with a product I was happy with. It was really important to speak clearly, interestingly, and quickly, so I could explain the purpose of my application without loosing the interest of the viewer.

Overall I learned a lot through this course. I am very excited to build more upon these skills in the future.

rAlbum Prototype

When starting to create my prototype for rAlbum I made sure to think back to all of the things that I learned the last time I did this step. One of the biggest things that I took out of that experience knew the size requirements of the screens for the program I was using to create my prototype, before completely all of the comps. Last time I did not do this, and it ended up costing me a lot of time. This time I was conscious of this and it was much more efficient. I decided to inVision again because it worked out for me so well the first time.

The next step I did was to watch my first video to see how I conducted the prototype. I was very happy with the outcome last time so I decided to follow a very similar pattern.

Next I looked up another prototype so I could see if there was anything else I wanted to add to my prototype this round. The example I found was not very good. While I really liked the visual choices made to the UI especially the color scheme I didn’t feel that the prototype did a good job of explaining and showing the application. For starters there was no voice over, so there was no explanation as to what was going on. Also it was hard to keep track of. The zooming in was also very distracting and I felt like I was supposed to be looking at something particular but I didn’t know what.

Lastly, I watched this great interview of the design lead at Google. He gave some great insight into what is important in prototyping for applications. He said that it is extremely important to have several iterations, which is something I made sure do in the process of making this application. I did this with user testing and class critiques where I would get feed back on my work and go back and change it. This is an extremely important part of design so you can come up with the best product possible.

He also said that prototyping is very important because it gives the look and feel of the application. It is the best way to visually see the flow of an application and from there you can go back and make the appropriate changes.

Overall I found some great information. I applied everything I learned last time and after several attempts I came out with my final video.

The video can be seen here:

Screen Shot 2014-05-06 at 8.41.44 PM

rAlbum Paper Prototype Test

This week I started my user testing to see how my users react to the flow and layout of my application. I conducted this test with all of the knowledge I learned from the first round of paper prototyping.

For starts I made my wireframes very clear and defined as possible. I knew this was going to be extremely important for this round because my tester was going to be a senior citizen and I wanted everything to be clear and readable for them.

Next I made sure that the prototype was accurate to size. I was carful to create the prototype to be the actual size of the iPad. I even used my family’s iPad to compare the size, so I could ensure I was accurate with that.

I also did a little more research just to see if I could find any more examples of a paper prototype test. The video  I found was very nice. It had a couple of great tips, especially because they also used a tablet for their prototype. One of the things that they did that I really liked was using a piece of cardboard to make the paper tablet a little more weighted and more real. He also suggested using separate pieces of paper for the scenes, which I did in my last paper prototype test. I completely agree with this. Although it makes things a little confusing because there are so many of them, I feel like it makes more sense to the user. He also printed out each of the ui elements that he thought he may need. I also found that this was helpful in my testing. He also used tabs with his elements, which is something I may try in the future.

Overall I found this to be a very informative video. I highly recommend it for those who are paper prototyping for the first time.

I also took a look back at my first paper prototype tests, and critiqued them. I noticed a lot of improvement with my second video from the first one.

When testing I tried to encourage my user to express how she felt about the tasks so I could get a feeling of if I should make changes to my flow or layout.

Some of the things that I asked my user to complete took her a little while, however most of that was because it was the first time she had used the application. When certain tasks were repeated later on in the test, the user remembered exactly what to do to complete the task.

Her feedback was very positive. She felt it was very simple to use and felt she would have no problems using it in the future.

Although she had no negative feedback, I took note of the features she struggled with, for instance the ‘other’ button and have to consider if I want to change the layout of this feature.

Overall the font size seamed to work great. The only one I may want to make larger is the ‘comments’ because I noticed her getting closer to the prototype when reading the, Overall I was very pleased with my test. She was able to figure out all of the features and I was able to understand how she would use the application.

Here is the paper prototype video (click to play):

Paper Prototype

First Three Comps

This week I began to think about the user interface of my application. I weighed many different options and researched different interfaces for the iPad and for applications using books, since that is a common theme with my application. From the research I designed three very different look and feels for my application.

The research that I found were the following pictures:

link1 link2 link3

 

link4 link5 link6 link7 link8 link9

With those I began to design my comps. My favorite part of the design for each of the comps was designing the shelf for the albums. I enjoyed this so much because not only is it a key feature of my application, but there were so many different way that I could design it.

The first idea was one that was more of a realistic look. I got my inspiration for this by researching existing book applications today. Most of them used shelves and pages that looked like a real book would. I liked this for an older demographic because it would be more familiar to what they know. However I feel it is not very original and is somewhat over done.

The next idea I had was more of a sleek look. I used a black background and used more abstract images with bright colors for the items and writing. I was not a fan of this look for this composition at all. I think it visually did not translate as it looked in my head. Also, I feel that my demographic for this application would be very confused trying to use it. I may consider taking certain elements from this stage, however I do not plan on taking this approach.

The last idea I had was somewhat in the middle. I wanted it to look familiar enough for the users to recognize what was happening on the screen, but I wanted to put a creative spin on the app so it was separated from the others. I used light colors that I felt gave it an older feel. It is also very easy on the eye on like my second set of comps. This is my favorite of the designs I came up with.

Here were my comps for my application:

comp1

 

 

comp2

comp3

Overall I was very happy with this step. I was able to be very creative and think of completely different concepts for the UI for this application. Even though I was not happy with how one of them came out, it was a great process to be able to rule out that idea.

This time around was pretty similar to the last time. One main difference was that the first time I designed comps I was very focused on one theme for the app and had a difficult time thinking of three completely different ideas. This time I believe I accomplished this much better. I also made sure to avoid making my app look like wireframes and instead the user interface of what my application will look like.

Before I moved onto my compositions, I made updates to my information architecture.

Although I thought I had a better idea of how the information architecture was supposed to be formatted this time around it turns out I was still a little off. Even though I had the flow of the application all mapped out I needed more description of what each part of the application allows the user to do and how the user should interact with it.

After making my adjustments here is my new information architecture:

InfoArchRedo

Updated Persona and New Information Architecture and Wireframes

This week I first adjusted my personas. Although I was happy with the content of my personas, the layout needed a redesign. I changed the design to fit something that I think will be more similar to the look and feel of my application. I also added some more information, which will be helpful down the road. More information is better because the personas truly appear as a real user of the product.

Here are my updated personas:

Howard Lois

I also created my information architecture, and my wireframes.

Creating my information architecture for this project was much different from the previous time. In some ways it was easier because I had a better idea of what I was supposed to do and how it was supposed to look. However, it was also much trickier.

It was more difficult because this time I had nothing to go off of. Even though my last design was a redesign and I was changing the flow of the application, I still had something to work from. This time however it was completely form scratch. Although I had all of my user research to help guide me in what I found my users would like and would not like, it was still challenging to develop the entire flow of the application.

To do this I opened up a word document and wrote everything out. This was helpful because I was able to think out everything I wanted to allow in my application and the link between each one.

Here is my information architecture:

InfoArch

The wireframes were more of a similar experience to the first design of the mobile application because the first time I gave the application a completely different layout and look. The part that different was the amount of space to work with. In this design I am designing for an iPad and the last design was for the Samsung Galaxy.

This was very interesting because I had to think about how I was going to take advantage of the space. While before I was thinking about how I could save space.

Here is my wireframes:

 

Wireframes

Overall this was a great experience. I am very excited to see this come to life in the next couple of stages.

More User Research and Personas

For this week I went back to find some more user research. Although the information that I found last week was a good start, I knew that I really needed to talk to some users before going ahead with this idea.

To do this I contacted three senior citizens and interviewed them, and contacted three people from the baby boomer generation and interviewed them with a few additional questions about the future.

I was able to find a lot of really great information with this set of interview questions. I made a few charts of data and further analyzed the information that I found in the report below:

Click Here to view it!

This was a much more helpful set of information because I heard it from the users themselves, and was able to find out the specific information that I wanted to hear.

I also had the chance to hear their reactions to my concept for the application itself. This would have been extremely difficult to find strictly searching online.

With this information I was able to create my two personas. Since I had experience creating a persona from the last time I created them, I was able to dive right into after analyzing my user research.

Although the strategy for finding my user research was much different this time then the first time, I feel they were both very useful. It is always useful to watch a user use a product and talk about it. However, the interviewing that I did in this week gave me a lot of great information to start of my application with.

The last time I went through the design process of the application I reflected back to my personas and user research several times, so I know how important these steps are to the future of this project.

Here are the two personas that I created for my new application:

personaHoward
personaLois

 

 

New App Idea & User Research

This week I started to brainstorm about more possible ideas. I decided to go in the direction of a different application idea. This app would target grandparents. The app would be a digital photo album where grandparents could flip through photos of their family. To make the application simpler for them to use, family members will upload the images from their end of the app. All the grandparents have to do is look through the album.

There will be some additional features such as audio recordings, video recordings, and ability to comment on photos, ability to add media to a different album.

I thought the next important step would be my user research. For this step I started to research how senior citizens use technology. The first article that I found said the top best tablets for senior citizens. It also expressed the needs of senior citizens. It said, “But people do grow older, and as we do, our priorities tend to change. Senior citizens often find themselves looking for products that are powerful yet easy to use, not only out of a desire to simplify, but also because older buyers can often afford exactly what they want.” With this in mind I will have to make sure that I make this application very simple to use and easy to learn. The popular tablets that senior citizens use were the iPad mini, the Kindle, and the Nook.

The next article I looked at had some great statistics. According to the article, “more than 50 percent of seniors going online.” This means that more and more senior citizens are using the Internet. Along with the increase in Internet we could assume that other technologies are getting more popular in their age group. I started to take a closer at what specifically these users use the Internet for. The article says, “Email…is widely used, with 86 percent of Internet users 65 or older using it, and 48 percent of them doing so every day.” This means that senior citizens like to use technology as a way of keeping in touch with others.

The next article I saw gave a supported the statistic of 50% of senior citizens using the Internet. It said that, “This is changing the way people gather, share, and create information. And it is changing the way they communicate and act in groups.” This is really important to keep in mind. The way that people keep in touch today is changing. My application would provide a great way for them to stay in touch. It is an app that falls into the interests of the users. The site also had some great graphs of statistical information seen below:

slide-3-1024 slide-6-1024 slide-8-1024 slide-11-1024 slide-12-1024 slide-13-1024 slide-22-1024 slide-23-1024

According to the next article, “ability to help seniors stay engaged with current events and find information quickly with the click of a few buttons. Additionally, the women reported going online to seek out old friends, connect with new acquaintances and find support through social networks.” Again this gives me insight into what senor citizens like to use technology for. Practical uses are the major benefit for them. Ways to keep contact with others is a major use for people of this age range.

The last article I looked at concentrated on women senior citizens. According to the article the Internet has many major benefits to those that age. It said, “Internet use among older people reduces loneliness, increases social interaction and may result in a significant reduction in depression.” These benefits show the importance that technology can have in someone’s life. As tablets become more and more popular and app like this meant for connecting with family and memories can be used often. Women over 60 are using social media to stay connected and meet people. The convenience that technology provides is fantastic.

After my research I have a better idea of how my user would use the product and the sorts of things that they would be interested in looking for. I will make sure to reflect upon this research as I continue along with this process.

Here is a compilation of some of the important information about my users for this application:

user research

A New Tablet App: Three Concepts

This week I started to develop different concepts for applications that I could create. To do this I brainstormed about things in my life that give me problems, that way I could try to think of an app that would solve that problem.

The first idea that I came up with was one to help with grocery shopping. The idea came to me when my roommate and I were struggling to find just a few ingredients at the grocery store, when we had to hurry back to our room.

Here are some links to some of the competition I could have if I followed through with this idea:

http://www.talkandroid.com/guides/beginner/best-android-grocery-list-apps-to-help-you-organize-shopping-trips/

http://www.androidauthority.com/best-grocery-list-apps-101625/

Although the there are some competition for applications like this one, they mostly have outdated interfaces, and do not have all of the features my application would provide.

The next app was inspired by the service fraternity I am in. There are times that it is very difficult to find places to volunteer. This app would be for those who are looking for a place to volunteer, or organizations who are looking for volunteers. People would be able to search and communicate with those in the area.

Here is a link to some of the completion:

http://appadvice.com/applists/show/apps-for-volunteering

Again, the other apps are different then the concept of this app. Many of them are for a specific organization.

The last concept was inspired by a story I saw in the news. The story was a bout mothers who take their children to the park and lose track of them because they are distracted by their mobile devises. After doing more research I found many articles and stories similar to this one.

The applications would remind users to look up and check on their children. This way they do not lose a track of time and dangerous situations could be avoided. I could not find any applications similar to this one.

Some of the new stories and articles I found could be seen here:

http://www.nbcnews.com/health/parenting/put-down-cellphone-study-finds-parents-distracted-devices-n47431

http://www.cnn.com/2011/LIVING/06/14/phone.addicted.parent/

http://www.wfsb.com/story/23756291/west-hartford-moms-blog-post-goes-viral

http://newyork.cbslocal.com/2014/03/10/study-smartphone-obsession-leading-to-more-examples-of-distracted-parenting/

Here are my three ideas in more details:

concepts

Healthy Recipes Prototype

I looked more into detail about the different options that I had for my prototype. The one I decided on was invisionapp. I chose it because it had a lot of flexibility and was also very organized and simple to use. I was very happy with the way it turned out. I wish I had found this before I started designing my UIs though because I had to resize all of the screens. This seamed like a task that could have been easily avoided. I will make sure to be carful of this in the future.

After all of my tests I made my final changes to the UI design. I took into account all of the feedback I received during critiques, as well as the data I gathered through my tests.

I watched a few videos as inspiration for my video prototype. This was the first video. I felt looked very professional and put together. I really liked the layout and style they chose for the application. However there were no words in the video and instead distracting music. I feel a voice over would have made it more clear to the viewer as to what was happening.

Another video I saw was interesting because it was a working version on the phone. I like how the app could be tested on the phone, however again there was no voice over explaining what going on. I felt very lost watching the video.

From these videos I learned the features that I liked from their strategies and the parts I did not like. Mainly the fact that they did not explain the application was a big down fall. In my video I will make sure to give a clear description of what I am doing with my prototype.

My prototype video can be seen here:

Prototype

Paper Prototype Testing Round Two

This week I went back to the paper prototyping stage and perfected it. There were many things that I learned from the first attempt of prototyping that I wished to change.

The first was the actual paper prototype itself. Although the paper prototype is meant to me a wireframe so you can catch mistakes in the early stages, my first prototypes were just too much of a wireframe.

It interfered with the results of my testing because I could not tell if my user was confused because of the functionality of the application or because they could not understand what the wireframes represented.

The other visual problem with my first test was the size of the prototype. I had made the pieces really small, which was a problem because the user was not accurately test the flow and placement of the application.

I also changed the style of my testing so that I could get an understanding of what the user expects on each page. I still asked the participant to perform certain tasks, that way, I could guide them in a way to explore the entire application.

After the modifications made to my paper prototype and my testing style, I was able to find out which parts of my application are working and what I may need to look into changing.

I remember back when I conducted my first usability test for this project I watched a video about paper prototype usability testing. The video was extremely helpful at the time, so I went back and watched it again to familiarize myself with how they conducted the test. The video is called, Example Usability Test with a Paper Prototype. I really like how this test was conducted. I strongly recommend watching it for anyone unfamiliar to paper prototype testing. It explains the important parts of how to test while simultaneously demonstrating it.

Another video that was very well done was a video called iPhone app | paper prototyping although this video was more of a demonstration of the application rather than a test, I felt it was a great example of what to visually look for. It had a neat layout and accurate sizing.

Here are just a few more images I found as inspiration in the recreations of my paper prototype:

Paper Prototype

Paper Prototype

Paper Prototype

After completing more research I was inspired to complete next paper prototype test. Overall I am very happy with the results of my test.

You can view my video below:

Test

This week I also did more visual research as I continued to work on my user interfaces for the screens. It is going to follow the flat metro style. The main menu is going to resemble Windows eight block look.

Windows 8

Windows 8

I began researching different possibilities that I may want to use for the screen prototype. One of these is invisionapp, this looks like a nice option that is free to get started. Before making my final decision I will have to compare it to the other options.

Another is proto.io this one also looks like a nice option. It had a lot of possibilities with this app such as animation, interaction and more. This is one that I will diffidently look more into as I get closer to making my screen prototype.

Another great option is Marvel, which says, “Turn sketches, wireframes, PSDs and designs into interactive mobile and web prototypes in just a few clicks.” This sounds very easy to use and will most likely be perfect for what I am trying to accomplish. This is also another free service.

Fluid is another option, however it only allows 10 screens to be used. Although my application is not that large, I would rather choose something with more flexibility. I want to really show the capabilities of my application and I don’t want the limit on screens to ruin that.

The last option that I looked at this week was called justinmind. This looks like it has a lot of options and capabilities. I will definitely consider this as a strong contender. However this may be even more than I want for this particular project.

Next week when I create my screen prototype I will reevaluate all of my options and start my creation.

I made some changes again after my video of my paper prototype test. I made some changes to my prototype so the participant could understand more about how the app is going to work. I also made some changes to my video so it looked more professional.

The new paper prototype test video is below:

Screen Shot 2014-03-14 at 11.36.02 PM