Saturday, December 31, 2016

OUGD504: Interface Design - Graphic Table Design

This is the final design for the app. The design uses the fonts PT Sans Caption and Georgia in italic this was the closest I could get to replicating the Bill's typeface's they use on the lunch and dinner menu. As shown below. It needs to be clean and simple. Easy to use and consider anyone that could have difficulties with technology to understand and use. Especially first time customers of Bill's that won't be familiar with the system.






Hidden overall bill function.


The table layout would be set out as each individual person. It would have a list of what the person has ordered and a total at the end. Option to turn on and off the total and individual prices. For example if someone was paying for the group meal or everyone was paying for someone else's birthday meal. That person could "hide" their total so that they don't feel bad for spending a certain amount of money. This would be a tap hidden feature the customer could turn on and off so that they can check without the other person having to see if they don't want to.

On the left side there is a bill overview so you can see the bill as a list



and the other side has support for if you need help or there are any issues with the bill.

This page comes up if you need support.


If you press "request help" these options come up to select. You can choose to request a member of staff to come over to the table such as a waiter or waitress. Optionally you can request to speak to a manager but only if there are major issues. You can contemplate an issue with the bill. Which means the member of staff comes over and presses that button which will take them to this page:

Originally, the design was going to scan in a card similar to self check out but if it is on an app it's easier and more efficient to place in a pass code to authorise access.

Once the access has been authorised this page will be shown to the member of staff and they can select an issue. 

Refund item(s)



There would be two options for the staff to refund item, if it needs to be specific items the first window shows the overall bill.





The second window shows the table layout so you could refund an entire persons meal.



Finalised app design:









This page would revert it back to the original pages. 





Thursday, December 29, 2016

OUGD504: Studio Brief 02 - What already exists? - Wahaca QuickPay

Research: what already exists in the design field, how innovative can you be?

In a piece of feedback given it was pointed out Wahaca have a QuickPay app. On their website it is advertised to download the app on apple or android so that when you have finished eating you "enter your table number, check your bill, split the bill with your amigos then pay and leave at your leisure, happy that you've grabbed #10FreeMinutes"






The feedback also said that there were issues with the app because you have to personally download it yourself. There are issues with 3G taking too much data to download an app or the store wifi being inadequate or simply just glitches on the phone. "There are complexities that are not needed such as connecting to music." "This is not something that would appeal to an older audience."

Tuesday, December 20, 2016

OUGD504: Studio Brief 02 - Varying Personas for Bill's Restaurant App

Target Audience Research
Geographic: (country, region)

  • England, UK as Bill's is a UK based restaurant franchise.


Demographic: (age, job role, income, socio-economic status, nationality)

  • People aged 16-70.
  • Young teens, students. 
  • Some older people such as elderly people going for afternoon tea
  • Middle aged people that bring their families, with or without younger kids. 
  • Average budget food so any income.
  • Any nationality.


Psychographic: (interests, values, beliefs, opinions, attitudes, activities, social groups, lifestyle)

  • Anyone that enjoys going out for food.
  • People that like cheap social activities.
  • Social groups of young people.
  • Elderly people that enjoy afternoon tea or going out for breakfast.
  • Anyone that wants to go out for breakfast.
  • Students.
  • Families.
  • Busy lifestyle.
  • People that have time for leisure, occasionally go out for meals instead of staying in constantly.
  • Varying food beliefs such as vegetarian beliefs because there are veggie options along with the meat options.


Persona 1
Age: 17
Gender: Male
Job Role: Student
Routine: Eating as a social occasion once every few weeks.
Nationality: British Citizen
Ethnicity: Asian
Persona 1 is really into technology, can easily pick up new devices and use them like a professional. Constantly finds new restaurants for him and his friends to try. Would easily be able to use a tablet given to them at Bill's restaurant because of the simplicity of the idea.

Persona 2
Age: 78
Gender: Female
Job Role: Retired
Routine: Enjoying breakfast out every morning.
Nationality: British Citizen
Ethnicity: White
Persona 2 has to wear glasses otherwise is almost entirely blind. Finds it a bit fiddly to use technology but not incapable. Might need a bit of extra assistance. Would need the design to be basic as possible to avoid confusion. Only carries cash. Would need that as an option to pay.

Persona 3
Age: 38
Gender: Female
Job Role: Full Time Mum
Routine: Eating out once a week.
Nationality: British Citizen
Ethnicity: African
Persona 3, relatively young mum would be able to use a tablet given at a restaurant. May struggle with a few things such as requesting staff for help but not impossible to use. Is really up to date on latest payment methods such as apple pay and contactless.

The target audience research shows varying age ranges that could potentially be exposed to the app and that it would be compliant to all of them no matter the age or reasons they have chosen Bill's as their restaurant to eat at.

Friday, December 16, 2016

OUGD504: Studio Brief 02 - Understanding the relationship between designer and developer

"If web designers are the architects of the web then developers are the builders. Without coders, the plans would never come to life."

Background and consideration research:

When designing for screen considerations as to what extent to design and develop the user interface are important. Researching the differences and relationships between the designer and developer were vital for me to get a further understanding on what roles each person takes.

What is shown on the screen is what has been designed. It is different to how the screen actually functions. This part is the development. The graphic designer creates how it looks, the wireframes, prototypes but the developer is the one that makes it move.

Designers focus on how they want the website to look. This is how the colour scheming, typography, information flow  and all visual aspects will worth together on the design to create a strong user experience. They use HTML, CSS and JavaScript.

The role and skill set of a developer and where you would find a developer to work with:

A web developer is someone that specialises in the development of online applications or distributed network applications that are run through http from a web server to a web browser. They know how to use code. This means they will be skilled in programming languages such as PHP, Ruby on Rails, Python. They create the inner workings of the website and develop the actual user interface.

When developing an app you could search for a web developer consultancy based locally to you. There are also freelance web developers online. Websites such as peopleperhour.com have options to find a freelance web developer. It's a site that exposes talent. As the designer would not need the skill set the developer has. The designs could just be shown to the developer then the user interface would be created by them.

Information found from these online articles:
http://www.skilledup.com/articles/web-design-vs-web-development-whats-difference
https://uxmag.com/articles/the-relationship-between-designers-and-developers

Wednesday, December 14, 2016

OUGD503: Studio Brief 01 - Research - To Kill A Mocking Bird Book Covers








I looked at the current covers for To Kill A Mocking Bird and the new novel by Harper Lee, Go Set A Watchman because the cover also features the same mocking bird.

The first design uses a majority of the cover as negative space with the black. The type is the most prominent aspect of the cover making the title "To Kill A Mocking Bird" the first thing you see. Harper Lee's name is the second biggest on the cover. The authors names are usually written the same size if not sometimes bigger than the title because a person will be looking for their name if it is a big name author. It is a classic novel so people instantly recognise the title. To add more depth to the page there is an illustration of a mocking bird to in the colour orange. This is the original cover.

The next design also has the title and the authors name the key feature on the cover. Although this one has a larger illustration featuring a child and a tree instead of just a bird. This one uses neutral tones. For a special edition they used an orange colour instead of the black.

The vintage lee cover has a floral illustration as the background. It is the most image heavy out of the three. It also features a mocking bird. This version is colourful but because of all the bright colours could appeal to a younger generation and probably more female because of the flowers. Whereas the first black looks more gender neutral.

Go Set a Watchman fits as a sequel. Uses orange texture for the background. The image and text are the same size and each take a 1/3 of the page. The sticker has the same illustration as the second edition of To Kill a Mocking Bird to show they're by the same author.
 

Friday, December 2, 2016

OUGD504: Interface Design - Crit and Feedback

Idea One

The first design would be simple, clean and consistent so it is easy for all ages to use. It would consist of just a screen of the bill. The customer would be able to select each item they had, it would highlight them on to a little pop up so the user can see what was selected with a total of the items in the corner and the price and a done button so you could proceed to the next part which would be the payment. The user could then select which method they would prefer to pay in "request card machine" "apple pay" "cash" "contactless" would be the options to select from then the items this user has selected would come off of the total due and then it would be passed to the next person to do the same process. 


Idea Two

This interface consists of showing each individual person on the table as a square and filling their box with what they have ordered so that the waitress knows and they remember because an identified issue at a restaurant was that sometimes people confuse orders or place the order then say this is not what I asked for. This way there is no confusion. The section will also have a red, orange or green dot to signify which area you are in for the bill. Example: Red means you have spent more, amber is you have spend a middle amount and green means you haven't spent as much. This idea was given in a crit because sometimes people will not split the bill equally between everyone if they have not ordered much food. If everyone is in the amber colour then they could just have the bill split equally because they've spent the same amount of money.  This would have the same features as interface design one because it needs a highlighted option for each person to select themselves on the chart and then process to pay. 


Questions & highlighted pieces of feedback the design will consider.

1.What are problems you encounter when at a restaurant?
-Waiting, poor food, splitting the bill.
-The struggle to get a waiters attention to ask or order anything
-Knowing how much food to order > if it's sharing plates
-Not everyone has cash, how would paying on card solve a difference.
-Getting served can take too long.
-In a group - the payment method is always time consuming and stressful.
-Finding food what fits being vegetarian/vegan + splitting the bill/shown.
-Time between ordering, drinks either take too long or too short.
-Splitting cash payments.
-Waiting for everyone to decide so that the waiter comes over.
-Wrong food, trying to get served, waiting to order more drinks.

2.What would make the experience at the restaurant better for you?
-Maybe being able to order using a tablet? Less waiting time.
-Having something that tells me what drinks pair well with what I want to eat
-A light system or other interface that allows you to alert waitress you need their service without constantly having to look around. 
-Being able to pay yourself.
-Keep a clear system of who's ordered which food - colour system for idea 2 works.
-System that makes splitting bill a lot easier to waitress a way of notifying staff ready to order.
-Asking for the bill.
-More flexibility at interacting with host.
-Theres a restaurant called Dirty Bottles look at their website under the topic of 'sell service tasting wall.' Here you can service individually make your order and pay all on the same device. It is very simple, no need to wait around for the waitress!
-Way to attract the waiters attention?

3.If you are/were a waiter/waitress what would you think are the problems with customers at restaurants and the food ordering process?
-Being busy and not seeing the consumer straight away.
-Time consuming when ordering
-I've had the experience of customers and table numbers (them not knowing what number table they are makes the process of ordering/finding table in a busy location)
-Overall, idea 2 adds something more to your overall idea. There is more to this which makes it stronger.
-Complaining just to get free food, ignoring not knowing when someone wants to order.
-Customers are rude. 

4.Which idea do you prefer and why?
-1 - because it's simpler
- I would definitely use it! Maybe think about if two families went out and how they would divide it as families?
-Idea 1 is the idea I think would benefit more people (whack restaurants already have something similar, however when I tried to use it I had problems logging in and connecting to the internet.)
-Idea 2 I like the colour schemes.
-Idea 2, the system helps to tackle confusion with the bills which is what I find to be the biggest issue.
-Idea 1, it's simple and clear. 
-Idea 2, it combines everything and all struggles in a restaurant but still allows calling host.
- 2, would reduce food complains due to orders getting mixed up.

5.Any other feedback?
-Really innovative app idea, wireframes look great!
-You could add how long a meal can take to cook so people in a rush can know.
-When the waitress/waiter is taking an order there could be a place system on the table so they can select who ordered which meal in a separate system.
-Both ideas well thought out and consider experience of customer and staff consider experience of customer and staff. 
-Just for ease of use and communication maybe the person bills don't align text centrally because you have to keep moving your eyes to different levels to see. If you put product to left alignment, price to right.



The colouring system might cause arguments as people will be angry they're paid more even if they've eaten more.


6.The site map on screen combines the two ideas, what is your opinion on this?
-It looks easy to navigate and it would work well.
-This could be more suitable if developed further.
-It definitely works better showing an overall bill with the second idea.
-Works really well.
-Not as many features are needed limit to 3/4.

Overall, everyone said that they want a faster and less time consuming experience. 

OUGD503: Studio Brief 01 - YCN - Quorn Brief - Considerations After Feedback

Think about emotions, narrative, the actual problem. It can become very easy to get bogged down on the brief and doing research and a response to that brief. You need to explicitly evidence research into contemporary creative culture, see what has already been done that is successful and why it's successful and what has been done that has less impact. If you can back that up by the opinions of respected graphic designers or journal thats even better.

Maybe use green to reflect nature instead of using orange. However, the design looks better in orange because is it more unconventional and will stand out on a wall. It is also the Quorn colours of the logo so it has a subtle reference to the brand whenever people see it.




Adjusted sizes because one of the pieces of feedback was that there was maybe too much space.










Thursday, December 1, 2016

OUGD503: Studio Brief 01 - Research - Other Classic Book Covers








A consistent theme in classic book covers is to have a large image or illustration that completely covers the page. These are normally the obvious approach and show exactly what the book is about. The book cover out of these that stood out the most was American Psycho. This was because of the use of white space. This is going to influence my design. It is a more ambiguous design meaning the person would need to pick it up and read the back to understand what it is about. There a blood stain as imagery but that doesn't give away too much detail as to what the story is about. For the penguin competition my design will take a more ambitious approach.