Lecture 2.0 : App Design and Development Process

  • Change the way you work:
    • Cannot afford to spend large times on details in the first stages
    • Short quick cycles, i.e. Lean UX cycles (Think – Make – Check)
    • Start small, iPhone, then move to a large screen. It is much harder to decrease the size to make everything fit onto a smaller screen
  • Understand development
    • Success of an app depends on the designer and the developer, work in parallels and be aware of the complexity of the design and implementation.
  • Use a Variety of Operating systems
    • you cannot just use your own system,i.e. iPhone, you must try your application on various platforms, not just IOS but android. especially if you’re targeting the widespread application community.
  • Prototype everything:
    • an agile methodology requires understanding how something will look and function prior to implementation
    • allow us to evaluate user testing
  • What you see is not always what you get:
    • you have to test apps on a mobile device in order to properly see inference, usage, colour, and size.
  • Apps are never finished: apps are constantly evolving and changing over time, much like all digital products.
Advertisements

Unpacking an App : Western Sydney U

Information Architecture

Tools/modules in order (this is the default order, prior to being reorganised):

  1. Maps
  2. Directory
  3. Events
  4. Emergency
  5. vUWS
  6. MyIT
  7. Students
  8. Central
  9. Library
  10. Shuttle
  11. Help
  12. Services
  13. Wellbeing
  14. Careers
  15. Gradlife
  16. Videos
  17. News
  18. Residences
  19. Books
  20. Food
  21. Social
  22. Summer
  23. Clubs
  24. Sport

How are they clustered/organised and can you suggest categories for the modules?

The modules aren’t particularly organized, they are assorted and do not have a consistent flow that progresses throughout both screens. The user can rearrange them however that doesn’t provide ease or convenience; having to flick between screens, can become rather intimidating. The application will benefit by grouping and categorising them based on utility, as well as maintaining the ability to move things around, allowing the user to customise based on priority.

Category suggestions include: “Travel”, “Social”, “Education”, “Emergency”, “Assistance”

Site flow map:

Print

User Experience Flow

Typical user flow:

Print

Are there any tasks or activities missing from the app?

The application is well equipped with a large variety of options and links that help improve the user experience, employing majority of the links that would be featured on the university webpage. Adding direct links to email and/or allocate systems, could be greatly beneficial in terms of the app usage.

User Interface

Is the app easy to use and navigate? What changes would you suggest? 

The application is easy to use, once familiar with its features, however to a user not “tech savvy”, it would become more of a task.

  • Minimise the intimidation, so many applications all the place makes it hard for a user to gain access to what they want/need.
  • Some links such as videos, seem rather pointless, maybe culling the irrelevant or underused ones, or even an option to remove from the home screen.
  • it isn’t clear that there are two pages of links, the dots at the bottom may need to be moved or removed, having two screens isn’t user-friendly.
  • Changing the order of the apps is a possibility! however, how would a first-time user know? the app would benefit by introducing a mini “tutorial” on application download or a “settings” button to help the user in their navigation and customisation.
  • The user flow needs refining and clarification, while clicking through the links, buttons such as “back” and the arrows need to be clearer in their use. Back, should be replaced by “home” as it takes the user back to the home screen, whereas the arrows allow you to toggle between the shuttle campus options and the shuttle map view.

Visual Design

How would you describe the visual design?

The application is clean and maintains a typical IOS design layout, consisting of standard icons, representing each link. The WSU logo featured towards the bottom of the screen.

Does it match the university’s brand image?

The design is consistent with the brand image, maintaining the use of the university’s colour scheme, and simple, one-dimensional icons.

What improvements could be made?

The application design is dull and insipid, and holds virtually no appealing qualities, it could be improved by developing a more graphically fun layout and style, as well as a minimization of the eyesore red that the designer has blatantly overused.

Visual Design Remake

Before:

After:

Unpackage

When redesigning the university app, I considered how myself as a user would prefer the app to look and the links to be accessible. I removed the lightning bolt icon, and replaced it with a settings one, that can be more easily noticed at the top left hand corner of the screen, from here the user will be able to access “customization tools”, I have also moved the screen number “dots” to the top, again to be more noticeable. The links I have categorized into 6 groups, which will allow the user to navigate more easily throughout the app.

 

Introduction to App Design

This weeks lecture focused on introducing the 3 different types of apps accessible through application design; HTML 5, Hybrid and Native. It delve into various pros and cons, but compared the way in which the abilities and performance can be affected multiple devices. In introducing us to these types of applications, the functions as well as the “need to knows” as designers, I feel more confident in completing the assessments and overall outlook on this unit.

Lecture 1.0 : Intro to App Design

What is an app? 

  • Application, is a software program thats designs to perform a specific function for the user
  • Web App / HTML 5
    • Responsive web design
    • stored on a remote server
  • Hybrid
    • elements of both native and web apps
  • Native
    • run directly on a mobile device
    • doesn’t need a web browser, it is single platform
  • More than half surveyed said, a poor app experience would put them off using the company products, therefore those using HTML 5 or Hybrid would have had lower ratings by the   consumer, where as those using Native, gain an instant advantage

Mobile Website or Web APP?

HTML 5

  • PROS :
    • A quick option for making existing content available via mobile device
    • only needs to be built once and would be usable for every device
  • CONS :
    • user experience inferior
    • performance inferior
    • its an app world

Hybrid

  • PROS :
    • a mobile app build with HTML5 gives you the ‘space’ on a user’s phone that can be used to bridge some of the gaps between native apps and mobile website
    • HMTL5 or hybrid (wrapped) apps attractive for internal teams that have web skills
  • CONS :
    • Low/no bandwidth an issue
    • No unique mobile functions

Native

  • PROS :
    • UI and UX smooth and engaging
    • device capabilities optimised
    • faster load times compared to web apps
    • robust performance in online or offline mode
    • better discoverability and brand image
    • Superior security compared to HTML5
  • CONS :
    • Require development for each mobile platform
    • Expensive

What types of apps are there?

  • Utilities
  • Entertainment
  • Games
  • News
  • Productivity
  • Social Networking

** REMEMBER : the purpose of an app is to make peoples lives easier!

As Designers, what do we need to know about app Design?

  1. Users expect familiar User interface (UI) controls
  2. Touch input – Gestures change everything
  3. High resolution is taking over (higher pixel count per image, making images clearer and sharper, you need to consider this in relation to screen size etc)
  4. Time is short (clean presentation, and no complex navigation)
  5. The real estate is tiny (the screen is small, and the buttons need to be in a good separation in order to be selected easily)
  6. Context is everything (App users are looking for specific information, i.e. a restaurant app should say, location, and trading hours in an easily accessible area)
  7. Wireframing is essential.