INDIVIDUAL PROJECT
DESKTOP
HP.com Shop
Year
2023
Redesign of Hewlett Packard’s HP.com Shop website for a smoother experience of buying laptops and PCs.
Explore the Interactive PrototypeScope
UI/UX Design
User Research
Interactive Design
Tools
Figma, Google Suite (Docs, Forms, Meet), Miro
Duration
7 weeks
6 screens
Overview
Hewlett Packard’s website - HP.com, is a website for HP products. The website allows users to browse HP products and their features. Its sub-section - HP Shop, allows users to shop for these products. Users can shop for laptops, printers, and various other products, but certain pain points can make the process quite confusing and tedious.
This is an individual project that aims to redesign the shopping section of the website to make it less confusing for both current and potential users.
I worked in a Sprint format for this project. Each sprint dealt with a stage of the design process - research, ideate, prototype, and test.
Project documents can be accessed here.
Challenges
Users found the existing HP Shop confusing and frustrating, with unclear navigation, inconsistent layouts, and hidden product information. This led to difficulty browsing, comparing products, and completing purchases. All in all, once a user has navigated a bit deeper into this section of the site, they can easily lose their way in there.
Success Criteria
A better rating for all the aspects considered during the initial user survey - navigation, visual appeal, content readability, filter functionality, and ease of use. Improvement in these areas will reflect in the ratings, and these ratings will be gathered from further research on the deliverables.
Goals
- Optimize the shopping journey for PCs, from product search to cart addition, prioritizing this category due to project time constraints and prevalent issues.
- Attract new users and enhance the shopping experience for existing HP customers, ultimately driving sales growth and fostering user loyalty.
Target Audience
Current HP users; both who have shopped on the site and who have never shopped on the site before, and potential HP users. The typical audience is accustomed to shopping websites, shops online now and then, browses HP products occasionally, and doesn’t actually shop on the website a lot.
My Design Process
- Conducting research by sending out user surveys and performing heuristic markup on the existing site.
- Sketching out ideas and designing a high-fidelity prototype.
- Testing and validating the prototype by performing a usability test and a five-second test with users.
Researching the Current HP Shop Website
I've personally bought a few HP products through the site, and have been extremely frustrated with the experience. But was that true for others too? Or was it just me struggling to buy a gaming PC from two identical pages? So, I donned the research helmet, wielding surveys, heuristic markups with Nielsen's heuristics, and emotional journey mapping to uncover user pain points. From confusing navigation and jargon-filled filters to cluttered layouts and inconsistent product buying flows, the UX issues were numerous.
Overall, participants had an average shopping experience. Filters, ease of use, and visual appeal were the major pain points. Suggestions included better visibility of product categories and better product display design.
There were a few things users liked too, which I was sure to keep in my final designs - the product descriptions, top deals, and the general written content on the site.
User Survey
I sent out a Google Forms survey and received a total of 12 responses from both current and potential users of the site. The survey included basic demographic questions, their familiarity with devices, their familiarity with shopping on the HP site, and in general - how frequently they shop, which other shopping sites they visit, and what their goals and needs are. The survey also consisted of two tasks for them to complete and rate their experience of the site based on the tasks.
- 75% of the users were young students, with gender almost equally distributed and locations in the USA as well as India. They’re quite familiar with shopping sites, shop every now and then on predominantly laptops and mobiles, and spend around half of their day on the internet.
- 75% of the users have visited the site at some point, but aren’t really frequent visitors. Very few have actually shopped on the site, and this isn’t frequent either.
- The survey consisted of two tasks to help users get familiarized with the shopping experience with the current site. This acted like an unmoderated usability test.
What is your age range?
What is your gender?
Where do you reside?
Have you ever visited the HP website before?
What do you visit the site for?
Have you ever shopped on the site before?
How often do you shop on the site? (around once a year - almost every week)
Task 1 - Check out the types of gaming laptops available - OMEN, Victus (brands/models). Then add an OMEN laptop to the cart.
Task 2 - Add HP's Envy (brand/model) laptop to the cart.
All of the users were able to successfully complete the tasks but they were particularly not impressed with the second task - one user pointed out that it required too many clicks to add it to the cart.
Heuristic Markup
I considered Jakob Nielsen’s ten heuristics while evaluating the site and performed it based on 4 tasks. Heuristic markup revealed a few issues similar to what was found in survey results, along with a few additional issues.
Key Issues Identified
- The main shopping page doesn’t really show you all the kinds of products HP sells. It highlights a select few, and it’s up to users to hunt for the remaining products. Some products can only be found through the header navigation bar.
- There are multiple pages for the same topics and with very different styles. This isn’t really consistent and has a chance of confusing users.
- Certain button CTAs can get confusing and may mislead users.
- The header navigation bar has a few confusing components.
- The filters are slightly buggy, use jargon, and have repetitive terms.
- Certain icons and product listings are huge and take up too much space in all the pages. It’s inconvenient to view product details with this style.
- Certain features provided by HP, like product customization, could be better explained and made more visible.
Emotional Journey Graph
I put together various emotions I felt while performing the tasks into a graph. This gave me a better idea of the ups and downs of the experience and helped me in pin-pointing issues with various functionalities.
The tasks I considered for the markup were -
Task 1 - Browse HP products for sale.
Task 2 - Browse all kinds of gaming devices and add any gaming laptop to the cart.
Task 3 - Browse all kinds of laptop specifications and add a laptop for everyday use to the cart.
Task 4 - Browse business laptops and add one to the cart.
I captured my thoughts and analysis as notes on the pages in Miro.
Need more details? Check out the analysis document.
Key Issues Identified From Both the Research Methods
- Confusing Landing Page
- Lack of clarity on product categories on the landing page.
- Repetitive header terms like "Laptops" and "Business Laptops", and "Desktops" and "Gaming PCs", causing confusion.
- Build Your Own Feature
- The Frustrating Shopping Flow
- Users wanted better visibility of product categories.
- Cumbersome navigation among product models.
- Unappealing aesthetics and inefficient use of screen space. Users were able to view only two products at a time.
- Users' reluctance to scroll extensively. They would stop scrolling halfway through and miss out on content like laptop categories, which were placed at the very bottom of the laptops page.
- Inconsistent Shopping Flow for Gaming Laptops
- Confusion caused by distinct, both visually and content-wise, pages for gaming laptops.
- Inconsistent product listing designs again, using up too much screen space.
- Confusing filters with unexplained jargon, like "Form Factors".
- Poor visibility of system status with filter functionality when viewing results.
HP provides certain functionalities like customization and mentions the term in a few pages, but doesn’t explain what it’s for. This might make sense to HP internally but describing the term would save users from any confusion.
Designing the High-Fidelity Prototype
Armed with these insights, I embarked on an information architecture overhaul journey. I created a mood board of shopping websites first, then brainstormed solutions to a few of the major issues and the information architecture of the site, and sketched out solutions for them.
Site Map Before
Site Map After
I drew initial sketches for figuring out filter layout, card layout for products, and landing and gaming page layouts on grid papers. I used both the Crazy 8’s and a variation of this technique for this.
Crazy 8’s is a fast-paced sketching technique where you sketch eight different design ideas within eight minutes, and then one out of these eight ideas is chosen to further improve upon. I use it a lot to sketch out smaller functionalities like cards, icons, buttons, etc.
My Variation
This technique is the one we use in our university classes the most. It focuses on progressively enhancing and eliminating the sketches in a best four out of eight, two out of four, and one out of two fashion. You initially draw eight distinct ideas for eight minutes, pick the best four out of them, then improve those four sketches for the next eight minutes. You again pick the best two out of the four, improve them for another eight minutes, and then finally, you pick the best one out of those two and improve it for the last eight minutes.
Although this is a little more time taking than the original technique, I find this to be a much better one at times; especially when dealing with entire page designs as opposed to icons or much tinier features. It gives me plenty of time to think my options through; play around with little design additions, and be thorough with my ideas. I find that I can easily eliminate the need to design low-fidelity digital wireframes post this technique because the design ideas already become refined.
The design is heavily focused on providing breathing space to the pages and keeping the flow as similar as possible to other eCommerce websites for familiarity and ease of use.
I then started building a style guide for the prototype -
- Color palette: I reused HP’s color palette to keep the branding as consistent as possible.
- Typography: I updated the typeface to give the design a neater look - keeping the Aesthetic-usability effect in mind.
- Screen layout: I opted for a clean, minimalistic layout to minimize clutter, adhering to Gestalt’s principles to keep the design as consistent as possible on a whole. I updated elements like product listings and pages related to those keeping Jakob’s and Hick’s laws of UX in mind.
The prototype addresses a lot of the issues found in heuristic markup and user survey, incorporates the suggestions made by users in the survey, and overall, is visually much cleaner, much more structured, and makes navigating around much easier. Images used in the prototype have been taken from the actual site itself.
Solving the Issues
- A Clearer HP Shop Landing Page
- Defining Jargon
- Simplifying Laptop Selection Flow
- A Consistent Experience in Buying Gaming Gadgets
All product categories now shine front and center along with clear section divisions, eliminating the "treasure hunt" effect.
Before
After
Duplicate menu items now don't exist in the header and are grouped logically.
Before
After
The customization feature of HP is clearly described in the landing page unlike before, and tooltips are provided wherever required.
Laptop models and their versions now offer a transparent overview, with consistent navigation to model versions integrated onto a single page, eliminating the need for separate navigation. Additionally, various laptop categories (such as "Business" and "Gaming") are showcased directly below the models to enhance visibility.
Before
Laptops Page
Laptop Model Versions Page
After
The design of laptops and their features are now cleaned up - laptop listings are now horizontal with an option to scroll, giving these pages the much-needed space and thus, making navigating around much smoother.
Before
After
Duplicate gaming pages now don't exist. The details are split into two pages - a landing page for gaming gadgets and a page with product listings for all the gadgets. The structure of this landing page is consistent with that of the main landing page. The product listing design is consistent with the rest of the site as well.
Before
Gaming Page
Duplicate Gaming Page
After
Gaming Page
Product Listing Page
Filters are now horizontal and at the top of the page with an "All filters" modal to tackle the scrolling issues.
Before
After
Final Screens
Testing the Prototype
Two rounds of testing served as my crucible. Usability tests validated design efficacy, revealing pain points addressed and new opportunities for improvement. Five-second tests evaluated first impressions, ensuring an immediate positive impact.
The design proved to be effective in terms of being able to identify and recall key information. Participants found the design to be clean, aesthetic, and much easier to navigate than the original site, resulting in a 34.9% increase in overall user satisfaction.
Overall, participants had a couple of suggestions to further improve the prototype and a much better experience with it than with the original site. They rated the prototype highly favorably as well.
I conducted usability testing and the five-second test separately with 6 and 5 different participants respectively via Google Meet. I did it like this because I wanted to test the first impression of all the pages and didn’t want it to affect usability testing in any way. Both the tests included current and potential users of the site.
Usability Test
6 participants were part of the test and were asked to complete 6 tasks on the prototype. The majority of the participants were graduate students from different institutions, some were software engineers and some ran a business, were within the age group of 18-50, equally split among male and female genders, and resided in the US and India.
I noted down their click paths, think-aloud comments, task completion statuses, and body language on a Miro board while they worked on the tasks during sessions.
Here is How the Sessions Went
- Participants were welcomed for the first few minutes.
- A consent form was administered.
- A questionnaire (Google Forms) was given to them to gather demographic and user behavior data.
- Tasks were given out one by one to the participants and observations were noted down simultaneously in Miro.
- Another questionnaire was given to them post the test to gather additional feedback from them.
What is your age range?
What kind of devices do you use for online shopping?
What is your gender?
Key Highlights
- A 100% task completion rate was achieved with all 6 participants.
- 100% of the participants liked the neat and uncluttered look of the prototype.
- 2/6 participants thought “Gaming Gadgets” wouldn’t include laptops.
- 2/6 participants struggled to find business laptops in the laptops page.
- The average time taken to complete all the tasks by all the participants was 22 seconds.
- Some of the suggestions made by participants include -
- Show more discounts on landing and laptop pages.
- Move features to the top for Envy and Firefly pages as users would prefer to view features first before looking at the products.
- Some of the think-aloud comments noted down were -
- “Nice! I didn't know what form factor meant. Now I do!”
- “There's not too much information at once, that's good.”
- “Thought laptops wouldn't be a part of gaming gadgets.”
Need more details? Check out the protocol document.
The Five-Second Test
I asked 5 participants to view five pages in total and asked a few questions about what they could recall from the page they just saw, what stood out to them the most, what the purpose of the page seemed like to them, and what their impressions were of the design.
The majority of them were graduate students from ASU and some were software engineers, were within the age group of 24-50, were equally split among male and female genders, and resided in the US and India.
I noted down their answers as pencil notes during the sessions.
Here is How the Sessions Went
- Participants were welcomed for the first few minutes, but neither the general purpose of the test nor the product was introduced to the participants.
- A page from the prototype was shown to them for five seconds and taken away.
- A set of questions about that page were asked for the next couple of minutes. This cycle was repeated for all the pages.
- Additional feedback was taken at the end of the sessions.
Key Highlights
- The majority of the participants correctly identified the purpose of each page.
- 2/5 participants thought the purpose of the laptops page was to browse different types of laptops, not shop them.
- 100% of the participants could recall the list of products and laptops in all the pages.
- 4/5 participants noticed the HP logo in the header.
- One participant suggested the use of margins to better differentiate a few components in a few pages.
A word cloud was generated from their answers.
Need more details? Check out the results report.
Reflection & Next Steps
It was a success! Overall, the majority of the participants in both tests rated the prototype more positively than the original site. They were able to complete all of the tasks in usability testing sessions pretty quickly and the five-second test helped me conclude that the new CTAs were indeed effective in guiding the participants in the right direction.
- Information architecture as a map: Reorganizing the information architecture transformed a confusing maze into a clear and discoverable landscape.
- Sprint format in a design environment is enjoyable: Although I’m used to sprint formats from my previous professional experience, it was my first time working in such a format for designing, and I found it extremely interesting.
- Tailoring my skills for short time constraint projects: The entire project was very fast-paced and required me to make important decisions within a short period. This made me push myself even harder and encouraged me to find shortcuts to otherwise lengthier techniques I was used to.
- Acquisition of new research techniques: I learned two new research techniques that prove to be extremely useful for fast-paced projects such as this one - Heuristic markup and five-second test, and put them to use fairly well.
The next step would be to implement the suggestions made by the participants as well as redesign areas like the footer in the prototype to further improve it and test it again to see how effective those improvements are.