HP Product Page
Template Redesign
The major goal was to redesign a set of systematic modules that were reusable and applicable in all contexts. Also, standardize design features from a responsive design standpoint to save critical development time. Ultimately, deliver a consistent user experience across all platforms.
Role: Design Lead
Aim for the pain point
First and foremost, identify the pain point based on previous production experience. A responsive design technique was able to handle not just the obvious non-mobile friendly issue, but also the significant dev burden and the wordy copywriting.
A disorganized grid arrangement takes additional work for both design and development.
If feasible, a large paragraph should be reduced into a little gadget.
Build it, brick by brick.
Because this rebuild might affect several pages. Before diving into design details, it is critical to determine where to improve general page flows. Then, establish the requirements and strategically define design elements.
To accommodate multiple platforms, we rebuilt the font style sheet: word and line count, font size, kerning, and line spacing. And a robust grid system that modifies each breakpoint to offer more design arrangement options.
Streamline, yet impactful functioning
We developed a comprehensive guideline that applies to each breakpoint on any current devices. In addition, popular design layouts were changed to suit responsive behavior, and various adaptable modules were designed to address every possible marketing scenario.
Sub-navigation anchors to each section of the page.
Make rules for the commonly-used banner module.
Define a framework for major breakpoints.
An interactive gallery displays high-quality images and allows messages to be inserted flexibly.
The expandable drawer retains extensive information while also avoiding the issue of overlong pages.
Focus on being productive, instead of busy.
The ultimate goal was to streamline the design process and decrease possible hiccups from head to toe. Finally, we created a functional template that is manageable for developers, handy for designers, and more user-friendly for consumers.
The time we save may be put to greater use in other creative areas, such as becoming involved in the marketing process early on and improving design quality to convey better product storytelling.