cover-petroskillscover-petroskills

Brief

Petroskills wanted to redesign their entire web application from the ground up. It needed to be user-friendly and cross-compatible with all browsers and devices. They acknowledged that their product is very complex and hard to work with. A lot of features needed to be redone to be made more task-efficient and adhere to a more consistent standard design.

Solution

Work with designers and developers on a new UI that flows and works better than the previous UI. Set design standards so that all team members adhere and follows Petroskills’ branding using a style guide. Set standard development procedures and workflows (such as Github) so that people can collaborate and work faster together. Redesign new UI and task workflows so that each task is more accessible and efficient.

Role

Responsible for redesigning a very complex UI from the ground up. Research and brainstorm on multple scenarios and solutions that would help achieve the best outcome for finding the right solution. Responsible for setting design standards and patterns on UI designs and features. Documented these additions and changes using a style guide. Collaborate with designers and developers on code review and code development.

Card Sorting

Create a site structure that reflects the way users think about your application.

petroskills-card-sortingpetroskills-card-sorting

Application Sitemap

Show the navigation structure and key pages of the application.

featured-image-sitemap-optimizedfeatured-image-sitemap-optimized

Style Guide

Allows designers and developers to standardize a consistent set of design patterns throughout the application.

petroskills-macbookpetroskills-macbook

User Workflow

Detail the exact steps a user goes through to complete a task or goal.

Wireframes

Visually communicate abstract concepts with users and team members to generate feedback.

petroskills-wkitpetroskills-wkit

High-Fidelity Mockups

Apply product branding, grid structure, typography, color scheme, and icons.

gs2_01gs2_01