01_Overview

The Problem

Redesigning Vault’s website involved addressing issues such as old designs, low discoverability, inconsistency, poor navigation, low contrast visuals, confusing imagery, and a lack of visual hierarchy to enhance user experience and elevate the site's overall effectiveness.

My Role

As a Graphic and UX Designer on the project, I was responsible for conducting thorough user research, creating prototypes, designing intuitive UI/UX interfaces, and conducting rigorous user testing to ensure our product met both aesthetic and functional requirements, ultimately delivering a seamless and engaging experience for our users.

Tools

User Research, Adobe Photoshop, Adobe Illustrator, Adobe InDesign, Sketch, Figma, Prototyping & User Testing

The team decided to use SurveyMonkey due to its cost-effectiveness, ease of use, flexibility, robust data analysis capabilities, and accessibility, making it an ideal choice for conducting user research on a low budget.

Closed-ended questions:

  1. How often do you visit Vault's website for purchasing products?

    • Daily: 2%

    • Weekly: 5%

    • Monthly: 10%

    • Rarely: 60%

    • Never: 23%

  2. On a scale of 1 to 5, how satisfied are you with the overall shopping experience on Vault's website?

    • Very Dissatisfied (1): 10%

    • Dissatisfied (2): 20%

    • Neutral (3): 30%

    • Satisfied (4): 25%

    • Very Satisfied (5): 15%

  3. Have you encountered difficulties navigating through different sections or categories of products on Vault's website?

    • Yes: 70%

    • No: 30%

Open-ended questions:

  1. What improvements would you suggest for enhancing your shopping experience on Vault's website?

    • Answers will vary

  2. Please share any specific issues or challenges you've faced while using Vault's website for purchasing products.

    • Answers will vary

The survey findings provided valuable insights into users' interactions with Vault's website. Users identified challenges such as difficulties in navigating the site, finding information, and encountering inconsistencies in design elements. Additionally, feedback highlighted issues with visual clarity and organization, underscoring the importance of improvements to enhance user experience and optimize the website's effectiveness.

Personas

To address user experience challenges, two personas were created to represent diverse segments of the target audience. These personas embody key user characteristics, including goals, preferences, and pain points. By humanizing users and providing a clear understanding of their needs, personas guided the development of user-centered solutions. These personas serve as invaluable tools to ensure that the final product resonated with the intended users.

03_Ideation

Competitor Analysis

The competitor analysis chart for Vault Enclosures provided valuable insights into the offerings and strengths of key competitors in the market. By examining aspects such as product range, target industries, design, security features, customization options, integration capabilities, pricing, and customer reviews, Vault Enclosures gained a comprehensive understanding of the competitive landscape. This analysis informed the redesign of Vault Enclosures' website, identifying areas for differentiation, improvement, and innovation to better meet the needs of target customers and enhance the overall user experience.

During this phase, our team brainstormed and explored various creative solutions to address usability issues such as confusing navigation and ineffective layout. By focusing on user-centric design principles we aimed to improve the website's overall user experience.

Brainstorming Website Redesign Layout

  1. Homepage Layout:

    • Header with the company logo, navigation menu, and call-to-action buttons.

    • Hero section featuring a striking image or video with a headline and brief description.

    • Featured products or services section showcasing key offerings.

    • Testimonials or customer reviews section to build trust and credibility.

    • Footer with links to important pages, social media icons, and contact information.

  2. Product/Service Page:

    • Product/service image or video with a detailed description.

    • Specifications/features section highlighting key attributes.

    • Pricing information or call-to-action button for inquiries/purchases.

    • Related products/services section to encourage exploration.

  3. About Us Page:

    • Company overview and mission statement.

    • Team member profiles with photos and bios.

    • Company history or milestones.

    • Contact information and a form for inquiries.

  4. Contact Page:

    • Contact form for inquiries or feedback.

    • Address and map showing the location.

    • Phone numbers and email addresses for different departments.

    • Social media links for additional communication channels.

  5. Blog Page:

    • List of blog posts with featured images and titles.

    • Categories or tags for easy navigation.

    • Author names and publication dates.

    • Social sharing buttons and comments section for engagement.


04_Prototyping

Creating low to medium-fidelity wireframes involved using tools like Figma to sketch out the basic structure and layout of a digital interface using simple shapes, lines, and text. These wireframes focused on conveying the placement of key elements such as navigation menus, content sections, buttons, and forms without detailing visual design elements such as colors, images, or fonts. They served as a blueprint for the overall layout and functionality of the interface, allowing designers and stakeholders to visualize and iterate on the user experience before moving into higher-fidelity design stages.

Crafting high-fidelity wireframes entailed refining detailed depictions of a digital interface, integrating visual design components like color schemes, typography, imagery, and interactive features. These wireframes presented a refined and realistic representation of the end product, closely resembling the final user interface. They comprised precise specifications, annotations, and interactive elements to effectively communicate the envisioned user experience. High-fidelity wireframes acted as a comprehensive blueprint for developers and designers, streamlining the implementation process and maintaining uniformity throughout the design.

05_Testing

In the testing stage designs were assessed by users to gather feedback on usability and functionality. Through methods like usability testing and feedback collection, designers refined the design based on user insights, ensuring it aligned with user needs and preferences. Testing fostered iterative improvements, enhancing the overall user experience and driving the creation of a more effective final product.

Scenario:

A usability test was conducted for the redesign of Vault Enclosures' website. The objective was to evaluate the new design's effectiveness in providing information about the company's products and facilitating user engagement.

Task:

Participants were asked to imagine themselves as small business owners looking for tablet enclosures for their retail stores. They were instructed to explore the Vault Enclosures website to find information about product offerings, compare different enclosure models, and locate pricing and ordering details. Participants were encouraged to think aloud and share their thoughts, feelings, and any difficulties encountered.

Process:

  1. Participants were introduced to the usability test and the purpose was explained.

  2. They were provided with the task and any necessary context or instructions.

  3. Participants were observed as they navigated through the website, with attention given to their interactions, behaviors, and verbalizations.

  4. Notes were taken on any issues, challenges, or successes participants experienced during the task.

  5. After the task was completed, participants were debriefed to gather additional feedback and insights.

  6. The findings from the usability test were analyzed to identify areas for improvement in the website design.

Observations:

  • Participants quickly located the navigation menu and easily found the "Products" section.

  • Some participants expressed confusion about the differences between various enclosure models and their compatibility with different tablets.

  • Participants appreciated the detailed product descriptions but suggested adding more visual images or videos to showcase product features.

  • Finding pricing information and ordering details was straightforward for most participants, but some encountered difficulty locating customer support or contact information for further inquiries.

Based on these observations, areas for improvement were identified in the website's product information clarity, visual presentation, and ease of contact.

06_Evaluation

In conclusion, the evaluation stage of the redesign process for Vault Enclosures' website played a crucial role in assessing the effectiveness of the design solutions and gathering valuable feedback from users. Through methods such as usability testing, user surveys, and analytics analysis, we gained insights into the usability, accessibility, and overall user experience of the website. These findings have provided valuable direction for refining the design, addressing usability issues, and optimizing the website to better meet the needs and preferences of the target audience. Moving forward, the insights gathered during the evaluation stage will guide iterative improvements to ensure that Vault Enclosures' website continues to provide a seamless and engaging experience for users.

Background

"Navigating the world of online payments for tech products and services can be daunting. How do we ensure seamless transactions for our customers? With countless options available, finding reliable payment partners poses challenges.”

Vault Enclosures is a leading provider of secure and versatile tablet enclosures and payment systems, offering innovative solutions for businesses across various industries. Their enclosures are designed to safeguard tablets while providing an interactive and user-friendly interface for customers during transactions. With a focus on quality, reliability, and sleek design, Vault Enclosures empowers businesses to enhance their point-of-sale experiences and streamline their payment processes securely. Whether in retail, hospitality, or healthcare settings, Vault Enclosures ensures seamless and efficient transactions, elevating the overall customer experience.

02_Research & Analysis

User research was successfully conducted on a limited budget, utilizing cost-effective methods such as online surveys, remote interviews, and guerrilla usability testing. By using low-cost tools and platforms, valuable data was gathered to help the design process within budget constraints.

Shopping Experience Satisfaction Rating Questionnaire