Lecture Pod 03: App design process 2 / Unpacking an App Exercise : Western Sydney app Mapping

Lecture pod 03: App design process 2

This article is based on providing a beginner in app design a step by step process a basic understanding on an apps development, majority of app creators use these fundamental and key processes to do so.

The first step in an apps development is the Idea. The idea of what your app may be. The important thing to remember is that the “idea” of what your app will be is an ever-evolving process and will continue to change throughout its development process. Questioning whether the app is feasible is also very important such as “is this idea financially viable?”, “is this idea technically feasible?”, “is someone else already doing this?” and “could this be made simpler/differently?”.

Secondly the Spec process is implemented which determines what the app can do and how this will be done. This is very important as it allows you to further develop the app’s concept and ideas providing what will be created and how this will be executed. Many of the presumptions and ideas will be evaluated, confirmed and scrapped.

Wire frames is the next step involved in production, wire frames lay out the visual mock up and blueprint for how the app may look, function and interact with the user. The wire frame further gets rid of any unnecessary and illogical navigation in the app, absent pages/links and counter intuitive flows.

Prototype is then next step which means to create and develop a basic and simple production of the app allowing the team to further test and use this simple production as a trial further weeding out any issues and evaluate the entirety of the app to make changes or abandon it entirely. This will in return save the development team further time and money spent on the apps possible visual design and its development.

Visual design is third last step; the role of visual design is to not only make the app appear to be aesthetically pleasing to the user but also ensure there is consistent and identifiable visual language. The visual design of the app is an ever changing and required process.

Development is the second last step which is the creation of the main elements of the app that should be a part of all the previous steps listed and the teams involved.  Although a balance needs to be there developers should not interfere to much with the other teams involved in the creation of the app, although they can ensure that other teams don’t make mistakes which can impact the apps development. This communication between teams needs to occur.

Iterate is the last stage of the app’s development the article stating that an app is never completed only further developed and is continually re-evaluated to ensure the best user experience and outcome. The process of creating an app is never the same and the order of steps and processes will be different for each. The steps listed above should be looked at as more of a guideline not to be followed religiously which will be changed to suite the apps creation process, as stated earlier every app’s creation process/steps will vary.

Western Sydney App mapping

 

Western Sydney App front page

Lecture Pod 02 / Unpacking an App Exercise 1: Western Sydney app

Lecture Pod 02

Lecture Pod 02 provides examples of the evolution of different mediums and formats emphasizing the importance of appropriate layout, links and design and the importance of successfully translating information and content between different formats.

Lean UX Cycle was looked at as a form of a research method which is a much quicker and easier method of idea generation and testing before using the computer. Development tools were explored such as envision rapid prototyping which is used to put out ideas quickly. Operating systems is analysed emphasizing the importance of looking at different operating systems to ensure that your app works well with different operating systems and phones. Prototyping methods such as Palm Pilot and POP are just some of the tools examined which can be used to prototype

 

Unpacking an App Exercise 1: Western Sydney App

Information Architecture:

 What is included in the app?

List the tools/modules in order

Maps, Directory, Events, Emergency, Vuws, MyIt, Students, Central, Shuttle, Library, Help, Services, Wellbeing, Careers, Gradlife, Videos, News, Residences, Books, Social, Food, Summer, Clubs, Sport.

How do you think they are clustered/organised? –

  • Can you suggest categories for the modules? The apps are too compact, aren’t evenly spread out and there is a lot of wasted space within the app that could have been used effectively.
  • The apps are spread out over 2 pages which is the result of a lot of wasted space which could be resolved simply by putting all the apps onto one page as there is obviously enough space.

Can you suggest categories for the modules?

  • Maps, Shuttle – Getting to University
  • Services, Help, Directory, Emergencies – Assistance
  • Vuws, My IT, Students, Central, Events – Student services

Make a quick site flow (map) of the app. 2 levels is fine for this.

  • Maps – Map Selector

Bankstown

Blacktown

Campbelltown

Hawkesbury

Kingswood

Parramatta North

Parramatta South

Werrington North

Werrington South

Westmead

  • Directory – “Search the directory”
  • Events – Main

All

University Events

User experience (UX) flow

Choose a task a typical student might want to do, and map 1 user flow through the app.

Are there any tasks or activities missing from the app?

No seeing as the process is simple there isn’t much needed detail and workflows needed.

Can you suggest anything else?

  • Explain the difference between the options of Shuttle Red and Blue on the second page of the workflow. As it is confusing what to choose because you can’t tell the difference.
  • The aesthetic should also be more modern looking and inviting.

User Interface (UI)

  • Is the app easy to use? The app is quiete easy to use as it is straight forward.
  • Can you navigate easily? Do you have suggestions for changes? You can navigate easily although when the icons are selected majority of them only lead you to the website links which isn’t professional as in house services of the app would be much preferred.

Visual Design

How do you describe the visual Design? The visual design of the app is simple in terms of color scheme and aesthetics. Although the aesthetic is quiet boring and bland as the color scheme is too simple, with only maroon and white and it isn’t too visually inviting.

Does it match the university’s brand image? Yes it does.

  • What improvements could be made? The color scheme could definitely be improved with possibly more inviting colors added.
  • The categories should look more modern.
  • The western Sydney university home page banner smaller as it takes up too much space of the main icon page.
  • The icons should be more centered and not so high at the top of the main pages as it is harder to get your thumb across the top then to touch icons from the middle.

Visual Design Remake

Take the screens included in this week’s folder and design visual improvements.

Western Sydney App

Lecture Pod 01: Intro to App Design

Lecture Pod 01: Intro to App Design

Lecture Pod 01 explores the fundamentals of an app exploring the 3 main types currently available, these include the Web APP HTML (responsive web design), Hybrid (include native and web apps) and Native (run straight from mobile device) which are all compared from one another based on their pros and cons.

How the app customer base interacts and use the apps is also analysed and looked at such as user interface controls which should be easily familiarized and grasped by the user base. Touch input gesturing should be strongly considered and implemented in the user interface controls and high resolution is now becoming the norm in apps. App manufacturing has now become quick and new ideas are continually being put out in the app stores. The amount of space on a phone is small so the apps design should utilize every space available. Context is everything when it comes to an apps design, the scenario and how the app is used is determined by the context. Wire frames are also important allowing you to trial ideas and design layouts without having to code which is usually a longer and tedious process.