Skip to content

Concept

Johannes Ströbele edited this page Aug 17, 2020 · 17 revisions

The concept, which should provide the basis for the design and the development, was created as follows:

Table of Contents

Supporting material

The concept was created based on the Project goals, the 8 interviews, and the extensive online research. A 6 steps Concept Creation Process was used to create a optimal concept. A more detailed explanation of the process can be found in the online resources below:

1. User Journey Mapping

User journeys are the steps that users take to accomplish their goals. They are helpful for the creation of the information architecture, because they make it easier to identify the different pages and the flow of users. The user journeys were mainly identified based on the interview results:

  1. Verifying the technical qualifications of a GitHub user
  • search for user via user name
  • examine the presented information: general information, coding languages, contributions frequency, repositories, organizations, social recognition (followers, most stared repositories), self-generated coding score (optional)
  • decide on the technical qualification of the user
  1. Comparing the the technical qualifications of GitHub users
  • search of the first user via the username
  • click on the button "Compare user"
  • search for another user
  • examine the presented information: general information, coding languages, contributions frequency, repositories, organizations, social recognition (followers, most stared repositories), self-generated coding score (optional)
  • decide which user has the better technical qualifications

2. Information architecture

Defines how the page hierarchy of an application looks like and how the pages interrelate. A well-established architecture makes it easier for user to find what they want by appropriately categorizing the pages. A flow chart was also added to explain the steps a user tasks in more detail. Both graphics were made with FlowMapp.

Information Architecture User Flows
image image

3. Style Guide

This guide explains the set standards for the formatting, writing, and design of the design for this project. In particular the typography, the icons, and the colors are stated. The components will be added later, because they will be improved incrementally during the design process.

Figma Style Guide

  • Typography: san serif (Open Sans, Lato)
  • Icons: Material
  • Colors: blue, purple

Resources

4. Logo

The name GitHub HR was chosen to explain the functionality of this application in a short and easy to understand manner. Words like screening, personnel, GitHub, HR, jobs, users, profile, were used to create this word mark. The color blue reflects the accent color of GitHub.

logo-desktop

5. Layout

  • people that are in development team are mostly young and innovative
  • therefore, the screens will be developed mobile first (resolution of 360x640 pixel, because is used by 18.7% of the world's population (Worldwide Screen Resolution Stats))
  • however, the web application will be designed responsively