Final Project

Mobile App High-Fidelity Prototype


The final project is a high-fidelity prototype based on further development of the concept, design patterns and interactions, wireframes, visual design, user testing, and prototyping Please click on the image below to see my final presentation. Final Presentation

Advertisements

Assignment 4

My app will be an Android mobile app. These are four screens of my mobile app project that I plan to make into a high fidelity prototype. I’m looking into Android’s design principles to get an idea of which colors and styles I should use. Also, I sketched out some ideas for my app icon. I really like the last one on the right and plan to make it my app’s icon.

Scan 1Scan

 

web_hi_res_512

It has been difficult to find an app that resembles my app so that I can gain inspiration. There are many apps that have checklist forms but hardly any had forms to annotate on. Therefore, I have used the actual training manual book from the Army to guide me in creating an outline for my navigation. Using the step by step process from the book I have created a screen for each step and form boxes so that notes can be taken during those steps. I chose to use two typefaces and six colors. It would have been preferable to maybe use three colors but I ran with it.

Roboto and Noto are the standard typefaces on Android and Chrome. I chose to use Roboto for my app to make the font consistent with the OS. Also, I used the typeface Stencil to create my apps name. The typeface Stencil is often used by the military to mark equipment. The size of my product icon is 48px by 48px. Touch target size is 7mm since the average adult finger pad size is about 10mm wide. I have taken into consideration the design patterns from course lecture. I am highly considering using flat design, but I have trouble figuring how to incorporate it into my apps’ design.


App Style Guide

This is how the colors, fonts, and layout portray my brand and speak to my audience.

PMCS style guide copy-1

Project 3

Design Patterns

 

Design patterns are nothing but the solutions proposed to solve certain problems, which could be configured as a sort of “distillation” of previous design experiences. I have used some examples of design patterns shared by developers, such as tours, navigation, the arrangement and creation of the menu-list, searches, forms, the placement of the buttons, and so on.

 

 

HMMWV Mockup 1

Click here for a full view

Assignment 3

Scan 2

Midterm Project

Mobile App Definition Statement

“An offline technical manual that helps PMCS and troubleshoots at 99 cents.”

 

Personas

Folio (2)

 

Sketches

Scan

 

Click here to view this Wireframe/Flowchart

dam 2

 

 

 

Below are some answers to questions for my presentation.

1. What’s your app named?

In the United States military, preventive maintenance checks and services (PMCS),  are the checks, service, and maintenance performed before, during, and after any type of movement on military equipment. That’s why I name my app “PMCS”.  The High Mobility Multipurpose Wheeled Vehicle (HMMWV), commonly known as the Humvee, is a four-wheel drive military light truck produced by AM General. The app is designed to inspect and troubleshoot the Humvee..

2. What problems does it solve?

My app will help the user conduct preventive maintenance checks and inspection (PMCS) on their equipment. The app will solve common issues when conducting such a task that includes;

  1. Not being able to locate the Training Manual (TM) for the vehicle
  2. Missing or ripped pages on the TM from excessive use or abuse
  3. Having the wrong TM for the specified vehicle or the TM is out of date.
  4. Government form DD-2404 form is not properly completed or missing
  5. The user has trouble spelling or writing neatly
  6. The user is not proficient at conducting PMCS

The app will guide the user on conducting a full PMCS and will be able to annotate any deficiencies that are found along the way. At the end of the inspection, a government form (DD 2404) will be generated with equipment information and notes made by the soldier.

3. Why are you passionate about this technology?

I serve in the U.S Armed Forces and over the years I have seen technology increase in our equipment. However, service members continue to use traditional methods without technology to complete basic tasks. My goal is to use existing technology that everyone has access, to increase proficiency and productivity resulting in mission-ready units.

4. Who is your user?

My user is mostly composed of service members from The United States military. Anyone who looks to further their knowledge on military equipment can also use this as an educational tool.

5. Why will they want to use your app?

It’s easy to use and it will help expedite the PMCS process by eliminating the need for the TM, form DD-2404, pen and perhaps even reading glasses to read the small print on the TM. It’s also just 99 cents

6. How is the app organized (user flow)?

7. What are the main sections and features?

The main sections and features are few to achieve the goal of this app.

Main sections include,

  • Home

The home menu will include the following bullets to include a hamburger menu which will provide a sitemap, help and about information.

  • Begin PMCS

By pressing the “Begin PMCS” icon the user will begin to initiate the inspection.

  • Choose Type of PMCS

The user will choose from the menu which interval of the PMCS is to be conducted.

  • Enter Information

The user will enter information such as their unit and vehicle serial number.

  • Troubleshoot

This option will be part of the home screen. The troubleshoot screen will contain questions that users can choose from to help them resolve issues.

  • HMMVW TM PDF

This option will be available to those who want to use the actual TM to assist them in conducting PMCS using paper and pen form.

Features include,

  • Send file

You can save to cloud storage, e-mail, or print from this option.

  • Edit

This option will allow the user to choose from a menu to which section the user wants to edit in the PMCS. Once edited it will return to the final version with corrections made.

  • Delete

Simple just delete the document but not without asking the user if they are sure.

I served in the U.S Armed Forces and I understand the frustrations behind some simple tasks. I created this app in hopes that it will help my users conduct a PMCS more easily. Please let me know what your thoughts are or if you have a suggestion. Thanks for looking.

Project 2

Assignment 1

1. Dieter Rams (Links to an external site.)Links to an external site.: Ten principles for good design
https://www.vitsoe.com/gb/about/good-design (Links to an external site.)Links to an external site.

 

On this assignment, I was tasked to pick one of the ten principles for good design and find an example of a product or service that reflects this principle.

Out of the then principles, I chose “Good design is as little design as possible” the reason why is because I heard this phrase be repeated many times while studying Graphic Design. My professors elaborated on the importance of having the main message be delivered without non-essential elements. “Less is more” is how my Graphic Design Studio Professor Cherry Wood put it. There are many good examples of a product that reflects on that principle but one that tops them all has to be Apple.

 

One of Apple’s main goals is simplicity. It concentrates on essential aspects without burden. It avoids an array of fonts, colors, and shapes to keep their identity across all their products.  Apple reduces confusing choices to make the user feel in control. Their products are user-centered to make anyone an Apple user.

All the principles that make good design are as equally important. It took me some time to choose one since each one has a good case. However, with today’s’ growing trend for getting attention from users that principle stood out the most to me

 

 

2. iOS App Design Principles
http://designprinciplesftw.com/collections/ios-user-experience-guidelines (Links to an external site.)

The second portion of Assignment 1 was to read the UX Guidelines and answer the following questions.

  1. How did this reading change your perception of app design?
  2. What do you think are the most important parts of good app design?
  3. What did you learn from this article?

The reading made of think of all the small details that go into creating an app that makes it successful. These small yet very crucial designs are what either makes an app be kept or be deleted within seconds after being downloaded. There is very much psychology involved when it comes to creating an app. It seems that these principles are based on years of research using mental models to create a hierarchy. Although some principles seem like no-brainers it notes its importance and reminds us that not all users are alike.

The UX guideline covers many important principles of good app design, which I believe are all equally as important to achieving a successful product. To pick and choose what I believe are most important would be like choosing what type of protective equipment I should wear to war.

I learned from this article the small and sometimes unnoticeable tasks that enhance user experience. Every task has a meaning that together creates a memorable relationship with its user.

 

4dd570a6af556dc04af3374ccdfb83cc.

 

 

Project 1

Assignment Details

Analyze/critique a Mobile App for a total of ten (10) reviews

First please read the “10 Usability Heuristics for User Interface Design (Links to an external site.)Links to an external site.” article by Nielsen Norman Group who are one of the industry leaders in UX design (click here to read the article (Links to an external site.)Links to an external site.) and then critique 10 separate Mobile Apps. Include an image and paragraph of written critique for each App. Below are a few questions to consider when writing your critique:

  1. Is the design appropriate for the target audience? Who is the target audience?
  2. Does the content, organization, and navigation make sense for a mobile or touch context?
  3. What is working well? What could be improved and how would you improve it?
  4. Discuss one of the 17 Android Design Principles and how it relates to this App (in either a positive or negative way)
    Android Design Principles: https://developer.android.com/design/get-started/principles.html (Links to an external site.)Links to an external site.
  5. Any additional thoughts about the navigation, user-flow, visual design?

I’ve placed 10 app reviews Please take a look at them and analyze them. This process helped me understand the logic of apps and opened my eyes to the structure of each app.

When reviewing my student reports, please leave any feedback on these key factors:

  • Is the presentation beautiful?
  • Does the report communicate well?
  • Can each independent report be represented?

Page1Page2Page3Page4Page5Page6Page7Page8Page9Page10

Assignment 02

Reading

1. Read the article below and answer the following questions:

Smashing Magazine’s “Tale of A Top-10 App, Part 1: Idea And Design.” http://mobile.smashingmagazine.com/2013/07/04/top-ten-app-part-1-idea-and-design/

Answer the following questions:

  1. What is meant by the term Competitive Landscape?

Competitive Landscape is a form of analysis that helps a business identify its primary online and offline rivals. For example, a competitive landscape analysis might start with an attempt to identify and understand competitors, followed by an analysis of their strengths and weaknesses and how the target business can improve upon what its competition is doing. This term closely relates to the SWOT Analysis which is a technique for understanding your Strengths and Weaknesses, and for identifying both the Opportunities open to you and the Threats you face.

2.What is User Experience Mapping?

User Experience Mapping is an essential design tool to understand our product/service interactions from users’ point of view. One experience map is basically a visual representation that illustrates users’ flow (within a product or service) their needs, wants, expectations and the overall experience for a particular goal. UX mapping is very similar to a Customer Journey map, it’s a  visual or graphic interpretation of the overall story from an individual’s perspective of their relationship with an organization, service, product or brand, over time and across channels.

3. What is meant by “Kill the Baby”?

“Kill the Baby” is referred to eliminating all non-essential ideas for features. According to the author, “Good design is more about subtraction than addition.” It’s all about finding the essential problems you want to solve and removing the features that are unrelated, inessential or unrealistic for the first version

4. What is skeuomorphism?

Skeuomorphism is the design concept of making items represented resemble their real-world counterparts. Skeuomorphism is commonly used in many design fields, including user interface (UI) and Web design, architecture, ceramics and interior design.5. Tell us what steps are included in the “Idea and Design” Process.

5. Tell us what steps are included in the “Idea and Design” Process

According to the author, the first step is to come up with an idea based on market research. Then conduct research up front to help define the problems that are attempting to be solved. Such as creating a Competitive Landscape, User Experience Mapping, Creating Personas’, and finally the persona’ experience map. The author then brainstormed ideas for possible features in which he then “Killed the Baby” by eliminating non-essential features.

Next, create a statement which helped focus development process. Such as, “An offline translation dictionary that gives instant access to words and definitions at 99¢ for multiple language pairs.” If the feature didn’t support this statement, it didn’t belong in 1.0.

Then, start sketching general ideas on how the various screens could flow together. Stick to sketches, and use tools such as POP to share ideas with remote team members and clients. The author used OmniGraffle to create a rough prototype of the interactions.

The goal for the next step is to not make the user think. Fix users’ problems with an intuitive and easy to use interface. In essence, your job is to free users from having to think about the interface and instead to focus on the content.

The next goal is to not make the user not work. People don’t like to work, so look for ways to save them from unnecessary keystrokes, taps and irrelevant information. Use OmniGraffle wireframe to that goal. Find a way to solve the problems of most apps by enabling users.

Think like a human.  While touch interfaces have matured, and users no longer need interfaces to look like physical objects in order to relate to them, sometimes physical metaphors can set expectations and convey feelings that purely digital interfaces cannot.

Relentless exploration. The secret to amazing designs is a lot less about genius than about relentless exploration. Don’t stop once you’ve found a good solution. Keep going until you’ve exhausted the possibilities.

Of Photoshop And Xcode This is when things get really exciting. Your ideas start to become reality. This is the point when we design and code the actual elements that our users will touch. This stage is all about polish on all levels: interaction, usability and visual. This is when a good app becomes great.

Sketches and wireframes would provide a good outline, upon seeing things visually and playing with an actual coded prototype, or you can realize that you got it all wrong. When merely sketching, it is difficult to imagine the creative details that will take the app beyond being usable and into the realm of fun. Once working with visual metaphors, colors and textures, dreaming up fun details becomes much easier. This is all about polish, polish, polish, and it is the most rewarding and time-consuming stage of app development.

Establish the theme. Skeuomorphism can be useful, fun and powerful if wielded carefully and deliberately. Every app that contains buttons has skeuomorphism because buttons are borrowed straight from the real world. When used correctly, skeuomorphism provides much-needed affordances that help users instantly understand how an app works.

When working on the theme for the app, iterated like crazy on two or three of the main screens until you’re convinced that a certain look would work really well for the whole app.

Delight is in the details. Continue to flesh out all of the different screens, look for opportunities to delight users with details that would make the app enjoyable to use. Part of this is just about making the app look nice, but you can also delight users by adding a fun transition or make them laugh with some quirky copy, or save them work in surprising ways.

Designer and programmer: constant collaboration. Do not hand a programmer your design assets and expect a job well done. Not only do designers need to continually stay involved to ensure that their designs are implemented well, but using coded prototypes and testing them on users will inform the design in ways you can’t imagine. There is no substitute for testing a design and iterating on it.

Testing coded software exposes blatant weaknesses in the design that you may have never considered and shines a light on areas where details could be added to make the experience more enjoyable. Because of this, you might end up doing more design iterations after a coded prototype. Changes at this stage are costly but extremely necessary.

Gesture experiments. As you start to code your first prototype, Impending and Realmac Software launched an app named Clear. No buttons, just gestures. Love it or hate it, it makes a statement. It is minimalistic but users need to be taught about the gestures.

Try a number of approaches and a lot of usability testing to find major problems. The result can create a super-intuitive and simple app for beginners, full of gestures that make life easier for power users.

Testing. Make sure to get input on all aspects: usability, beauty, robustness. This included carrying out the following tasks: observed friends, family and various strangers use the app. The key thing here is to propose tasks and ask questions about what they are thinking, but never to answer their questions. Probe into why they are confused about something, and let them figure it out for themselves. Watch for body language that indicates confusion or frustration, and note not only whether they were able to accomplish a task, but how effortless and enjoyable their experience was. Sought expert design reviews from top Apple designers, leading usability experts and fellow developers at conferences such as SxSW and WWDC. Post screenshots to Dribbble to get feedback on visuals from leading designers around the world. Test the app in real-world contexts.

Icon. An app’s icon means a lot. It is the first impression most users will get of an app, and hope users will want to have it on their precious home screen.

Final Step: Launch It might not have every feature intended to put in, but the feature will be super-polished and ready for primetime.