CrafTech Computer Solutions

Reimagining how users can inquire for IT services.

Roles

  • User Experience (UX) Designer

  • User Interface (UI) Designer

  • Visual Designer

Deliverables

  • Competitive analysis
  • Personas
  • User journeys and task flows
  • Site map
  • Low-fidelity wireframes
  • High-fidelity mockups and prototypes
  • Design system and UI kit
  • Usability tests and findings

Project Specifications

Duration: Spring 2022 – 2024

Tools:

    • Figma

    • Photoshop

    • Illustrator

    • Canva

Overview

The goal is to design a user-friendly and responsive website for businesses interested in IT services. CrafTech offers several services, and it was important to streamline the research process for users. Organizing individual services with a seamless onboarding process was the top priority for CrafTech.

Problems

  • Multiple services displayed may be complex and confusing for general users.

  • Users perceive the outdated website as unprofessional or unreliable, leading them to seek services elsewhere.

Proposed Solutions

  • Restructure the platform’s navigation and organization of content for improved intuitiveness.

  • Develop wireframes to visualize the layout and flow of screens, focusing on functionality over aesthetics.

  • Optimize the platform for mobile devices to support remote work and on-the-go access.

By having a dedicated app, users can swiftly access support on their mobiles without navigating websites or making calls. Plus, push notifications keep users updated on maintenance and alerts ensuring constant awareness.

Research

Findings

  1. Users may be overwhelmed with the different types of IT services offered.

  2. Users may encounter usability issues such as confusing navigation, complex workflows, or unclear terminology within the application.

  3. Users may have concerns about the security and privacy features of the application, particularly if it involves handling sensitive data or accessing sensitive systems.

  4. Users may provide feedback on the mobile experience, including issues related to screen size, touch interactions, and mobile responsiveness.

Getting Closer to User-Centered Design

Defining Key Differences in Motivations Through Personas

Convenience and ease of use: End users typically prioritize applications that are user-friendly and intuitive, making their tasks simpler and more efficient.

They seek applications that help them perform their tasks faster and with fewer errors, thereby boosting productivity.

Personalization: End users may value applications that allow customization to suit their individual preferences and workflows.
Persona_Mary (CrafTech)
Mary_UserJourney (CrafTech)
Persona_Kim (CrafTech)
Kim_UserJourney (CrafTech)
Persona_Richard (CrafTech)
Richard_UserJourney (CrafTech)

Creating Structure

This site map informed by user testing, organizationally depicts the key task streams that the high-fidelity prototype would focus on:

  1. Discovery and Research
  2. Onboarding and Registration
  3. Exploration and Engagement
  4. Task Execution
  5. Problem Resolution and Usage
  6. Feedback and Engagement
UserJourneyMap_CrafTech
InfoA_CrafTech

Visualizing a User-Centric Experience

Redesigned the app’s information architecture to simplify navigation and prioritize essential features. This involved restructuring menus, consolidating similar functionalities, and creating clear pathways for users to access key features.

Understanding What Users Find Intuitive, and Why

Implemented intuitive interaction patterns, such as:
  • Clearly labeled buttons and icons for easy recognition and understanding.

  • Gestures and animations to provide feedback and guide users through the app.
Restructured information architecture, revamped visual design with blue and green hues, and implemented intuitive interaction patterns. Followed an iterative development process, ensuring accessibility compliance and continuous refinement.
LoFi_Wireframe
WireFrame_CrafTechv3

Establishing Visual Design

Incorporated a visually appealing design with a focus on clarity and consistency.

The color scheme was updated to use shades of blue and green, aligning with the company’s branding while promoting a sense of trust and innovation.

(Clickable prototype above, and also available on Figma)

Surfacing New Issues

Some terminology used within the application was unclear or unfamiliar to users, leading to misunderstandings and frustration.

Clear and concise communication, both in terms of terminology and interface design, was crucial for improving user understanding and engagement.

How Usability Might Be Improved

Issues to Address for Longer-Term Development

  1. Users expressed frustration with the application’s complexity, indicating a need for a more straightforward and intuitive user experience.

  2. Clear and concise communication, both in terms of terminology and interface design, was crucial for improving user understanding and engagement.

  3. Consistent interaction patterns and design elements are essential for creating a cohesive and predictable user experience.

Lessons Learned

  1. Conducted further usability testing with the updated prototype to evaluate the effectiveness of design iterations.

  2. Incorporated user feedback and insights from testing sessions to make further refinements and improvements.

  3. Adopted an iterative design process, allowing for continuous refinement based on user feedback and testing results.

Contact

Instagram Linkedin Envelope
© 2024 NhanStop Design

Projects

Scroll to Top