Elevator Pitch

We were asked to give an elevator pitch on our app that would go for around 30 seconds.

---

Ever been running late to work or don’t know where to catch the next bus to your destination? We all know public transport is never on time, where they can be 5, 10 minutes late or even never show up. That’s why I have developed this application.

– You can easily see where all buses, trains and ferries are in real time. Making is less likely you’ll miss your ride. Leave home a little later or have a sleep in knowing that your bus will arrive 15 minutes late.

– Have set destinations to see what services you can catch and where you can catch them from. Instantly know if there are changes in which station a train or ferry will arrive

– Live traffic updates help identify reasons your ride is late, estimate how long your ride is or whether its worth finding an alternate way to your destination.

– Check how full your ride is. Having a late bus come and not let people on is annoying. Having this information allows you to make smarter decisions.

User Scenarios

Joe opens the app and presses on the map to where he needs to go to work. As Joe is in a rush he does not care about the bus timetable and when the next bus is, rather he needs to know where closest bus is. He is able to see live, where the buses are and where the nearest bus stop is. Animations will be few as they take time out of the very limited amount Joe has. Joe sees that there is a bus coming up close to a stop near him, he closes the app and starts jogging to the location. As he arrives the bus pulls up and he gets on. Joe is relieved that he can be on time for work. He saves his work location and home location to easily find buses around him.

Elsa is a 17 year old high school student. Living with full time working parents she usually needs to catch the bus or train to school everyday. Elsa timetable consists of standard classes but also early morning classes, afternoon classes and free periods. Trying to make the most out of her day and time, elsa needs to look for buses not part of her usual day-to-day movements. As Elsa as free periods she sometimes goes with friends to the local shopping center.
Using the app, Elsa can see press on a location on the map and find buses near her going to that destination. Elsa will mostly be using the app at home or school. Elsa knows buses can be unpredictable with arrival times and does not want to wait 10min for the bus or find out she has missed it. Being able to see exactly where the buses are, she is able to make the most out of her time and have confidence she is not wasting it.

Logo Update

Before

Peer Review

Review

The reviews were overall positive with only the logo being not memorable being the only issue. To combat this I added in a few hills to the background to give the logo some depth and detail.

After

Before

Week 7 – Interface Design

Launch / Loading Screen

Used so promote the branding of the application.

The Tray

Allows the design to have more space without taking up screen space. Rather it is a hidden section, accessed through user gestures, like the hamburger menu.

The List

Similar to a tray where it holds hidden content, lists are used for individual pages to show the user they are getting deeper into a particular piece of content. The list can also enhance images where selecting an image can enlarge it. Sharing buttons or social media buttons are a big example of lists.

---

Summary

The launch, tray and list are important design interfaces that can be used to simplify your app without removing content. The loading screen is used to promote the business brand, while also entertaining the user while assets are loading. The tray is used mainly for navigation of global features and the lists are used for individual pages with large amounts of content that don’t need to be shown instantly.

Week 6 – User Scenarios

What are user scenarios?

Using the “user personas” discussed last week, we create a scenario where the made up user is placed in. Such as Bruce who is a quick and efficient man being put in the scenario of needing to find out his bank balance at the shops. Having these scenarios helps us developers understand where our system thrives and also fails. If Bruce has to click on 5 different links to find his balance, even though he found it, he had to go through to many links. This process refines the experience and project so its more user friendly.

---

Summary

User scenarios are very important in discovering the strengths and weaknesses of a project. By coming up with more scenarios for our users personas to go through, the project becomes more refined and helps us understand what is important and not important to a user.

Week 5 – Personas

User Personas

Personas are fictional characters representing real users. Usually in a project, 2 personas are created with 1 being the primary character. User Personas cover a few areas to distinguish their personality or habits. These include:

• Age
• Sex
• Occupation
• Hobbies
• Likes / Dislikes
• Behavior patterns
• Goals
• Skills
• Attitudes
• Their environment (or context)

This process of creating a user persona enables the developer to have a more detailed understanding of the target audience and user interactions. Creating user persona’s should always happen before designing or wire-framing, as it gives better insight into how to create the project for your target audience.

---

Artefact Personas

Used as a proposed way to visualise the personality of the project. To develop an artefact persona you need to ask yourself a few questions such as who would your project be as a person, what would they be like? How would you describe this person to a friend? Questions like these guide the development process which in turn creates a more refined artefact persona.

---

Summary

Personas are a way of personalising and contextualising your projects. Making user personas helps us understand the needs of a user, how to address the needs of the user and develop a more refined experience. Artefact personas assigns a personality to our project. Giving your project a personality helps everyone understand what to focus on when developing. As well as what no to focus on.

Week 4 – Understanding the Device

Gestures in iOS
The first 5 seconds of a users interaction with an app are the most important. They are the building blocks and show the user how to use the app.

Simple gestures become second nature like tapping and swiping.

The tap –  gesture is the most common and simplest gesture. The standard area for a simple touch on a screen is a 44 by 44 pixel area.
The drag – is used mainly for scrolling or moving objects like apps.
The flick – is designed for a less direct movement.
The swipe – allows the user to access hidden, touch heavy elements.
The pinch – can be used to scale images or objects.

---

UI – iOS anatomy
iOS has guidelines or requirements for designing you app. Almost all iOS apps use similar toolkit features in their apps such as navigation bars, tab bars, toolbar buttons, segmented controls, map view and alerts. These features fall into 4 main categories – Bars, Content views, Controls, Temporary views. iOS have different keyboard types depending on the context off the app. Such as for entering a phone number, the numbered keyboard will display, typing an email will prompt the keyboard to have the ‘@’ key accessible without having to dig into menus to find it.

---

Summary

Knowing the device your developing for is very important. Without knowing common gestures, UI styles and the anatomy of the device, the app your developing will look odd in the chosen device market.

Week 3 – App Design Process

Idea

An idea can be anything. However to have a successful idea, continuous iterations of steps must be taken to test the integrity of the idea. Some of the most common steps, that are questions to ask yourself, are:

• Is this idea financially viable?
• Is this idea technically feasible?
• Is someone else already doing this?
• Could this be made simpler / differently?

Once these questions have been asked and asked again, your idea should now be ready to continue in the design process. Without this initial testing, the app would not survive the development process as holes in its structure would start to appear and grow.

---

Spec

A spec is a blueprint or description of what your app does and how it accomplishes its goal. It is very important to do a spec sheet in both private and client projects. This gives everyone a clear guide as to what needs to be done and how these tasks need to be done in order to develop the app.

---

Wireframe

Wireframes are incredibly basic visuals, consisting of lines and boxes only, that show what the app will look like and how it will flow. Almost all people working on the app should be part of this process so they get a firm understanding of what the app does, how it will look and how it will flow when the user uses it.

---

Prototype

Prototyping is the flesh that is now put onto the bones (wireframes) creates previously. Although not final, these should give a clear understanding as to how the app will function at its bare minimum state.

---

Visual Design

We now start to put the cloths onto our app. This is accomplished by colour schemes, typography, brand components, imagery and more.

---

Development

Once we know exactly what the app will do, look like and function like, we move to the development stage. This is where a developer or a team of developers start to create the application. The more detail you provide in the previous stages, the better the outcome from the developers.

---

Iterate

Although people usually think that after development you’re done, the truth of it is that the process never ends. The app can always improve or be built apon.

---

Summary

Building an app comprises of some basic steps. However they should not be treated lightly as each step must be done meticulously in order for the app to be successful. Without doing each of these steps correctly, the app will never reach development. However if all steps are completed with high levels of detail, the app will not only be completed, but be able to be built apon and upgraded forever.

 

Western Sydney App – Part 2

How do you describe the visual Design?

The layout is simple. Only icons and some text. However this does not make it a very simple and easy to navigate app. Although simple, there are to many icons and there is also a second page of them.

For an app, the screen real estate to so valuable. As we are already in an app we know the company of why does the logo take up almost one third of the apps screen space?

Does it match the university’s brand image?

Yes. The logo and colours makes the app easily identifiable. The icons keep to the brand guidelines as well as the type.

What improvements could be made?

The apps navigation system needs to simplify. With to many icons, the app looks crowded and with every icons keeping the same style, colour and size, the user needs to look hard to find what they want to find. This can be improved with 4 categories holding the relevant icons.

The app is very dull. You can not look at the app for more then ten seconds without feeling bored or having the urge to click away. Adding imagery would liven up the app, making it more user friendly to the eye.

Here is the original design:

Here is my redesign:

This consists of the loading screen, app page and selected category.

Week 2 – App Development Process (Prototyping)

The area of design is constantly changing. Only a few decades ago, designers mainly focused on prints but as soon as the internet hit, the whole field of designing digitally came to life. Now we not only have to consider what device we are designing for, but what screen sizes, device abilities, user interactive abilities and more for our audience.

Some suggested strategies for adapting to the mobile app design world is:

Change the way you Work

• This means taking on new processes that help us achieve out goal. An example of this is “Lead UX Cycles”. This is a wheel with 3 main sections, THINK, MAKE, CHECK. We don’t ever stop at a certain stage, rather we keep adapting per iteration. We find a problem, create prototypes or wire-frames that address the issue, then check if it helps solve the problem. And so on this cycle continues.
• This forces us to priorities what information is is most important, where it should be located and how the user interacts with it. Only after this can we starts to consider other sizes of screens where we have more real estate to work with.

---

Understand Development

• Learn to understand the entire process so you can achieve a better result. This means understanding the other tools or programs as well as the terminology used in the workplace. This creates a more free flowing environment and better understanding with the team.

---

Use a variety of Operating Systems

• You can not use your own phone to test your application. You must be able to test your application on iphones, Android and other phones with different operating systems. For example the location of tabs changes between platforms and so this must be considered when designing.

---

Prototype Everything

• It can be as simple as a drawing but it is also best to have a working prototype that has images, transitions and some functionality.

---

Summary

To make an app you have to stick to the app development process. However before getting into the process we need to consider how to adapt to the mobile world. Some strategies include, changing the way we work, understanding the development process, using different operating system and prototype everything we make.