Team:
UX/UI/Product Designer(me), Project Manager, 2 Developers
Software Used:
Omnigraffle, Google Docs, Axure, Photoshop, InDesign, Illustrator
Brief:
To design a device-agnostic online Application to be built in .net. The app was used as a reporting tool that was built to analyse different metrics against a portfolio of commercial buildings.
Involvement:
End-to-end Design. Initial Research, User profiles, User Journeys, Wireframes, Prototype, Designs, Developer and User guides, UAT
UX/UI/Product Designer(me), Project Manager, 2 Developers
Software Used:
Omnigraffle, Google Docs, Axure, Photoshop, InDesign, Illustrator
Brief:
To design a device-agnostic online Application to be built in .net. The app was used as a reporting tool that was built to analyse different metrics against a portfolio of commercial buildings.
Involvement:
End-to-end Design. Initial Research, User profiles, User Journeys, Wireframes, Prototype, Designs, Developer and User guides, UAT
User Research
To begin the project, I entered the research phase:
- Receiving the Initial Brief from the business
- What their requirements and goals were
- User Interviews
- User Work Shadowing
- Gathering Pain Points, Wishes, and Requirements
Functional Card Sorting, User Journeys, Site Maps
To begin the UX Research phase, I worked with The Project Manager to define the project, plan the scope of the application, work out User Journeys, and use Functional Card Sorting to work out required pages via a Site Map.
Lo-Fi Wireframe Sketching
To begin the UX Research phase, I worked with The Project Manager to define the project, plan the scope of the application, work out User Journeys, and use Functional Card Sorting to work out required pages via a Site Map.
Lo-Fi Wireframe Sketching
To help visualise my thought process, I quickly sketched some Lo-Fi Wireframes to check over with the PM. Once approved, I move onto the Hi-Fi versions.
Hi-Fi Wireframes
I produced a full set of High Fidelity Wireframes to map out the functionality and layout of each page.
Prototype
I used Axure to produce a clickable prototype to help visualise some of the functionality for the business and the developers.
Visual Design
I designed a full set of Visual Designs for the application. After going through several interations, these were approved by all stake holders before being sent off to a 3rd party to create the front-end HTML/CSS.
Specifications
As a group we then voted on the painpoints within this square that we though should be looked at for this sprint, using sticky dots, with the 'decider' making the final decision.
QA & UAT
At the end of each SCRUM Sprint, when a new peace of functionality was finished, I QA'ed the build to make sure it aligned with my designs. When the project reached the Alpha and Beta stage, I did a site wide QA.
During several stages of the project I instigated a UAT phase to test that the project was fulfilling its brief. I did this at the wireframe prototype stage, Alpha stage, and once live.
