Embedded Files
Gilbert & Tobin is a leading Australian commercial law firm.
Their website is designed to establish their legal expertise and attract new clients and staff.
My aims were to create high-fidelity prototypes of several homepage designs using Figma as part of Gilbert & Tobins' website refresh.
My role
I assisted the Sitback Senior UX Designer and Junior UX Designer responsible for the Gilbert & Tobin project by developing high-fidelity prototypes for a homepage redesign.
The challenge for this design process was to digest and integrate the copious amount of legal information presented in the client's website, competitors and specific usability insights from over 50 Miro boards. It required extensive background reading to understand the requirements of this highly traditional industry.
Specifically my tasks were to:
Develop sketched homepage designs based on an existing expert and comparative review
Use Figma to develop high-fidelity mobile ready prototypes
Develop an animated mega-menu in Figma
Methods
Ideation for a homepage redesign
I sketched my initial ideas using an e-ink tablet and stylus pen. Using this sketching method allowed me to quickly ideate by using layers to add and remove sketched components quickly.
The first idea was based on a leading competitor's homepage and used a square card approach. However, this idea was not progressed as it does not function effectively as a mobile view and diffuses attention across too many elements when landing on the homepage.
I iterated upon my second idea to retain the updated information architecture menu categories but moved the company values below the hero image.
Square categories homepage idea
Company values focused homepage idea
Creating High-Fidelity Prototypes
I used Figma and Sitback's component design library to quickly develop high-fidelity prototypes.
The homepage contained multiple sections that needed to be arranged to assist information processing.
Multiple different concepts and layouts were created for the lead UX designers' consideration. Desktop 3 and Desktop 4 were earmarked for use in client presentations.
High fidelity prototyping using Figma
Mega Menu Design Animation
Due to the number of different menu items, one possible information architecture approach was to develop a mega menu that expands to display sub-categories.
The lead UX designer wanted me to develop an animated Figma prototype to visually display the concept of a mega menu to the client.
Please see the video below to view the mega menu animation.
UX Portfolio Figma Animation.mp4
Learnings
It was fantastic applying my Figma prototyping skills for a client presentation.
The clients existing homepage was quite traditional and text heavy which reflects the legal industries value of attention to detail. However, this detail needed to be integrated with web usability principles of keeping things simple and having less text heavy pages that don't overwhelm the user.
Layering information in different sub-menus and providing links to expanded pages was my primary design theme for this project.
Full homepage prototype design 1
Full homepage prototype design 2
Google Sites
Report abuse