Unpacking the Western App

Screenshot (55).png

Screenshot (56).png

Screenshot (57).png

 

Re-design of Western Screens

unpacking_western-01.png

unpacking_western-02.png

Advertisements

Elevator Pitch

 

 

 

Sometimes we designers and digital artists dread coming up with a colour palette for our projects because it can be overly time consuming. Many of us wish it could be simpler. Well I can tell you I have the solution. ‘Colour Creations’, the app I designed, allows the users to create a colour palette by basically uploading or taking a picture. Once generated the colours can be saved on online sharing platforms or on their smartphone. This makes for a more time efficient.

Colour Creations: User Scenario

User scenario for my app, Colour Creations.

sam

Sam is in a dilemma. Sam needs a new set of colours for a client’s project. The client is hassling him, so he needs a quick fix. A friend told him about ‘Colour Creations’. So Sam downloads the app onto his smartphone. He has two options, upload a photograph from his gallery or take a photo. He decides the quickest route would be to use a photograph from his gallery. He selects a photo. Colour Creations now generates a colour palette for him. However, Sam isn’t entirely satisfied with the combinations. So he touches the refresh icon to generate a new set of colours. Happy with the outcome, he moves on to the next step. Sam has the option of altering each colour manually. Though, Sam decides there’s no need as he is happy with the 5 colours. Once finalised, he can now save the palette in either CMYK or RGB values.

Lecture Seven: App UI Patterns

Lecture notes on the week seven lecture pod.

tubik-studio-design-4.png

App UI Patterns: Launch, Tray and List

  • Launch Screen
    • Reinforces brand image
    • Allows the app to load in the background
    • Usually require a touch to continue
  • Tray
    • Sidebar, hamburger menu, the draw, the off-canvas layout; these are other names for the ‘tray’.
    • Designed to add more space to the experience
    • Users may need to touch or slide to open the tray
    • Made up of two main components; the active button and the tray area.
    • The active button can be either a hamburger, user icon or custom icon.
    • Should always be a visual button to make it clear to the user the feature is active.
    • When making the tray, some rules include making a unique shape, displaying that it is an active design, large enough for a finger, make it look different when touched and make it part of the navigation.
    • When creating the tray, allow for it to take no more than 70% of screen space to allow users to navigate out of the tray, as well as remind them which page they were on.
    • Good design elements of the tray, include a clean design, short labelling, little scrolling, minimal gestures of (up and down/left and right)
    • Don’t overuse trays.
  • The List
    • A note to the user they are travelling through various pages within the interaction.
    • The list item should have an arrow indicating a lead to a new page as well as a design change to show that it has been selected. The navigation bar should be the same across all pages; it should include a back button to allow users to go to previous pages.
    • Don’t allow ‘the list’ pattern to goo too deep i.e. lead to 4+ pages.
    • Allow the last page to be actionable, whether it may be to share on social media or same as bookmarks etc.

Image Source: https://tubikstudio.com/color-in-ui-design-look-on-the-bright-side/

Lecture Six: User Scenarios

Lecture notes on the week five lecture pod.

Scenario-map-example.png

  • Persona = fictional user of the interactive.
  • Scenario = the context within which they use it.
  • Similarly to how a script is written for theatre or films, designers must create a user scenario, which predict how users (user personas) may interact with an interactive in a particular situation.
  • It helps the designer understand what future users may look for when engaging with an interactive.
  • Every scenario is detailed in different ways, however they should essentially include the who, what, where, why and how of the usage.

 

Image Source: http://www.uxforthemasses.com/scenario-mapping/

Lecture Five: Personas

Lecture notes on the week five lecture pod.

Xtensio_Tool_UserPersona2V2-min

  • Developing personas for a potential audience allows the designer to fully understand who their creation is aimed at.
  • Creating user personas embodies characteristics and objectives that potential users of the intended interactive may have.
  • Generally, user personas include information such as age, sex, occupation, relationship status, hobbies, likes/dislikes, goals, skills, attitudes etc.
  • Developing several personas of your audience is ideal. This can be tough as one doesn’t know who may see the project, however personas of the intended audience is enough.
  • Detail and refine the persona as much as possible.
  • Even adding a persona to the actual product as well as the user, a great method of practice.
  • When creating a product persona (referred to as Artefact Persona) the following questions should be asked:
    • If the product were a person, what would he/she be like?
    • How would users be expected to react upon first impressions of the product?
    • How would you describe the product to a friend?
    • How is the product different from other competing products?
    • Which celebrity, movie, car etc, would you compare the product with?
  • Developing these personas are the building blocks of any design process.