Team name

[Team Name]

Role

The role of the team is to be a source of knowledge, inspiration, and expertise in user interface, visual, and front-end design in the context of digital product development.

Responsibilities

• to develop use case documents with the product developers
• to design user interfaces of products with emphasis on user experience
• to enhance user interfaces with creative visual design and illustrations
• to implement the design thru front-end development
• to enforce the design process of the team without lapse and discrepancy
• to value research and testing as part of the design process
• to be creative, experimental, innovative in approaching design as a solution
• to share our knowledge with other teams

Specializations

1. Webtool design (webtools)
2. App design (web and mobile apps)
3. Illustration (characters, icons, typography)
4. Communication design (branding, social media, websites)
5. Front-end design (HTML, CSS)
6. Information design (data visualization, presentations)
7. Usability (usability of products, testings, user research)

Team members

Design lead

[Name, Contact Number, Role]

Senior designers

• [Name, Contact Number, Role]

Junior designers

• [Name, Contact Number, Role]

4 main focus of the team

User interface design

User interface design is

User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design.

Source: User interface design on Wikipedia

• the design of a product should help users in achieving their goals in the easiest way possible
• it should cater to experimentation/innovation in UI design
• it should cater to creativity in visual design

Visual design

The process of using words, symbols, images to communicate a message to an intended audience.

In the context of product developent, visual design enhances the user interface of a product using imagery, typography, colors in the purpose of making the product visually appealing and more usable to a targeted user.

• consistency with the brand using the style guide
• adherence to the creative brief and communications brief
• creativity in the context of the designed user interface (function over form)

Front-end design

Front-end development is the first level implementation of the design into code.

As designers of websites and applications, the technology behind the front-end development of such designed products must be ingrained because it sets the boundaries and possibilities of what we could actually design.

• portability – the usability of the design across platforms
• optimization – the employment of best practices in front-end development to produce a lean code without the unnecessary clutter
• scalability – the capability of the design to adapt to changes–towards a smaller or a bigger scale
• accessibility – the independence of content from its container; content must be “readble” by all kinds of users.

User experience design

User experience design in general is

The creation and synchronization of the elements that affect users’s experience with a particular company, with the intent of influencing their perceptions and behavior.

Source: A Project Guide to UX Design, Russ Unger and Carolyn Chandler, p. 3

• user experience focusing on the brand’s digital assets
• integrate usability testing in the process
• user research, interviews, personas

Key aspects of the team

1. innovation
2. creativity
3. experimentation
4. balance of users’ and business goals
5. open sharing and development of knowledge

Strategy

[Diagram]

Current focus

Where are we now?

1. User interface design: the technical aspect – information, navigation, interaction
2. Visual design: the creative aspect – branding, style, “look and feel”
3. Front-end design: the first-level implementation aspect – interactivity, prototypes

Future focus

Where are we going?

1. User experience: the other half of marketing strategy in a product development context – usability testing, user research, information architecture
2. Front-end development: the broader aspect of front-end design – includes JS, CMS, repositories, file transfers

Path

How do we get to the future focus?

1. We start by including research and testing in our process
2. We share our knowledge with others thru workshops and articles/blogs
3. Each on begins practicing front-end design

The design process

[Diagram]

Phase 1: Interface design, information design

The design of information architecture into interface.

Requirements:

• Information architecture (e.g., site maps, flowcharts, functionality diagram)
• Use case document
• Service description document

Artifacts:

• wireframes
  • created upon deciding an approach done in sketches
  • the sketch in a higher level (high level sketch)
  • demonstrates the
    • layout of interface
    • user interface flow
    • interaction of user with interface to facilitate tasks, activities
  • useful in presenting the product visually to internal teams such as product developers and back-end developers
• prototypes
  • interactive versions of the sketch or wireframes
  • certain areas are linked to specifc screens/elements to mimic the actual working product

Phase 2: Visual design, interactive behavior of elements

• upon finalizing the wireframes, the visual design based on the brand style guide, creative brief, and other documents from phase 1 will be applied

Requirements:

• Communication brief
• Creative brief
• Brand style guide
• Actual content

Artifacts:

• visual design studies
  • more than one version of a mock-up that show different approches to visual design
  • consider different elements presented in a style board (similar to mood board)
• design of interactive behavior of elements
  • how will an element come into view upon user interaction?
  • will it fade, will it fly out?
  • transition between elements – fade, appear, disappear
• image mock-ups
  • the development of a chosen study into a flat image
  • resembles the actual product in an image format (JPG, PNG)
  • shows the visual design of pages, screens, interactive elements (pop-ups, pop-overs, dialogs, icons)

Phase 3: Front-end design

• the implementation of the image mock-ups into HTML, CSS, and JS
• the integration of image assets and code (HTML + CSS)
• enables the designer to test the behavior of interactive elements

Requirements:

• front-end technical document (device, platform support, titles, descriptions, actual content, copies)

Artifacts:

• HTML – content
• CSS – visual design
• JS – interactivity behavior
• image assets – app icons, banners, social media and app store requirements