Lockstep Diagnostic by Step Change
https://info.hellostepchange.com/lockstep-diagnostic
https://info.hellostepchange.com/lockstep-diagnostic
Lockstep Diagnostic is a tool developed by Step Change to help businesses make an effective step change by mapping their current performance based on the 7 Key Components so that they can make wiser decisions by knowing where and what they need to focus on with the help of the Step Change team.
Project Scope
Landing Page Design
I was given the project to create a landing page design for Lockstep Diagnostic.
User Experience Design (UX)
There is already an existing landing page, so what I did is tackle what obviously needed improvement to present the information better.
I implemented a Level A - 10-20% UI & visual design improvement, while discovering the company's digital ecosystem and processes. Rationale behind this strategy is: directly influencing the interface that is visible to and which the audience interacts with (aka. front end) is one of the fastest and most obvious way to improve and make a good impression on the target audience, as long as the load time of the page (isn't too long and) doesn't interfere towards an otherwise good experience.
I implemented a Level A - 10-20% UI & visual design improvement, while discovering the company's digital ecosystem and processes. Rationale behind this strategy is: directly influencing the interface that is visible to and which the audience interacts with (aka. front end) is one of the fastest and most obvious way to improve and make a good impression on the target audience, as long as the load time of the page (isn't too long and) doesn't interfere towards an otherwise good experience.
Web Development & Testing
I handled the web development phase in an early iteration using Wix Editor X | See Test Page here.
Project Management
:: Eventually assigned to lead the team with new directives: to build the page in Hubspot.
:: Managed the Web Development Team who developed the page in Hubspot.
:: Provided feedback to Web Dev Team, handling both internal feedback and communicating with the developers on revisions.
Without a Developer on board, I recommended to use website builders such as Wix, having released Editor X, allowing me to finally have a workflow that enables me to implement the design made in Adobe XD with the powerful and most intuitive website builder I known so far.
Unfortunately, the team wasn't able to push through with this pipeline in the end due to domain connectivity issues.
Before & After
Before & After (Above): The "original" landing page given in the brief (left), and the landing page I redesigned (right)
Without further ado... the Lockstep Landing Page: See prototype below.
Design Breakdown
1. The 7 Components Poster and Video in One
The thumbnail is the 7 Components illustration, which is a downloadable PDF graphic, and shares the display (window or container) where the Intro video plays when user clicks play. (Could also autoplay, perhaps, for next iterations if the team prefers.)
2. The Hidden CTA Button
On the original landing page, this was just a plain text highlighted in the page. I added functionality on the word "Lockstep Diagnostic" to add visual interest and add to performance, but more as a bonus, a "hidden gem" kind of feature.
3. A Compact Video Gallery (that Flows)
The video gallery is a special feature simply as it is an obvious improvement when implemented. Navigating through the videos are easier, less cluttered than before, more understandable, more visually pleasing, and just makes sense. It flows downwards just as how landing pages typically work.
More images, info & details will be added soon. Still working on updating this project... Please check back later! :D
See it live here: Lockstep Diagnostic Landing Page
Credits:
Step Change Team
:: General Manager: Magdalena Bishop
:: Project Lead: Charity Calderon
:: (Early Iteration) Lead: Tran Nguyen
:: Copywriting: Adeline Neoh
Web Development Team
:: Hubspot Development: WebOccults
