Forkaia Cockpit Webpage Redesign

For this project, I was asked to re-envision the Cockpit webpage on the Forkaia website (the employee portal).

Step 1 – Research:

• First, I got some feedback about the Cockpit page layout
  • User feedback about the Cockpit page –
    • Pro:
      • Clean, minimalistic layout
      • No distracting colors or confusing layouts
      • Organized
    • Con:
      • Everything looks so similar – hard to differentiate sections
      • Navigation could be cleaner, more intuitive
• Then, I found some inspiration from other employee panel page designs and functionality
  • I created a Pinterest mood board with these inspirations among others

Step 2 – Recreate Cockpit Page, Redesign Existing Pages:

• Next, to understand the mood and branding, I re-created the current Cockpit page using Illustrator
  • INITIAL IDEAS:
    • Have side bar that jumps to particular section (search bar?)
    • Block out each section in a color (shades, “raised” squares, etc.)
    • Personalize – “Hello, John”
    • Dial shapes?
    • “Dark mode” type screen?
    • Switches to navigate to other pages – like turning a dial to advance
  • “cockpit-redesign.ai” includes some of these initial ideas using the idea that the page should look like a speedometer/dashboard
  • I created the speedometer using a tutorial – (“speedometer.ai”)
    • https://design.tutsplus.com/tutorials/create-a-simple-speedometer-illustration-in-adobe-illustrator–vector-22180
• Then, I decided to add a sidebar menu and break the page down further into pages to reduce the amount of scrolling and searching for particular items
  • “cockpit-redesign-small.ai” == reduced size scroller
  • “cockpit-redesign-slider.ai” == expanded sidebar
  • “general-company-info-ALL.ai” == all general company info linked here
    • original idea was to have general company info separated like it is currently, figured it would be helpful for all info to be in one place. The following files are the designs for original separated idea
      • “general-company-info.ai”
      • “general-company-guidelines.ai”
  • startup-project-ALL.ai == all startup/project info linked here
    • As with above, the original idea was to have startup/project info separated like it is currently. I figured it would be helpful for all info to be in one place. The following files are the designs for original separated idea
      • “startup-project-guidelines.ai”
      • “startup-project-forms.ai”
  • “pick-your-position.ai” == redesign for pick position page
  • “data-teams.ai” == redesign for data teams page
  • “dev-teams.ai” == redesign for dev teams page
  • other-tasks.ai == redesign for other task page
  • resources.ai == redesign for resources page
  • other.ai == redesign for other page
• All of these Illustrator files can be found here.

Step 3 – Mimic Functionality in InVision Studio

• Next, I exported each of the illustrator files and their components for the individual pages and imported them into InVision Studio
• Here, I used InVision’s linking tool to mimic the functionality I pictured for the actual website navigation
  • NOTE FOR HOVER FUNCTION: not all circular objects intended as links have the hover functionality. One object on each page was given this functionality to give an idea of what they all will look like
• Below is a screen recording of a mock walk through of the pages and also linked here is a live version of the page

https://vimeo.com/594676990

Advertisement