DebugGO

UI/UX Project

How might users utilize AI for coding and software engineering?

Overview

Background

As AI continues to revolutionize various forms of media, its potential to enhance learning and problem-solving is becoming more evident. During my coursework, I often encountered challenges in finding reliable solutions to coding-related issues. This inspired me to create an application designed to assist users in identifying coding errors, preparing for technical interviews, generating personalized study plans, and answering general coding queries efficiently

Project Goals

  • Conceptualize and design a responsive mobile application aimed at helping users improve their coding skills

  • Design user-friendly interfaces and integrated an AI-powered assistant to provide personalized coding guidance

Role

UX Researcher, UX/UI Designer

Duration

1 month

Competitive Analysis

I began by analyzing strengths and weaknesses in existing apps that utilize AI to assist users with coding

While current apps offer customizable study plans, user-friendly interfaces, and coding assistance with feedback, they still fall short in key areas such as responsive design, comprehensive interview preparation, the ability to run code, affordable pricing models, and engaging conversational interaction

User Research

To better understand user needs, I conducted interviews with four individuals aged 18-22, focusing on their preferences for app layouts, their coding knowledge, and what features they value in an AI coding application. These interviews allowed me to empathize with their experiences and challenges, providing deeper insights into their expectations and pain points

The user interviews helped me identify key user needs, such as a simple, minimalistic layout with user-friendly navigation. Users also emphasized the importance of receiving feedback, support for interview and resume preparation, and guidance specifically tailored for new coders

User Persona

After identifying user needs through the interviews, I developed a user persona to represent a potential target user. This approach offered valuable insights into their pain points and helped guide the design process

Paint points that were gathered from the persona:

  • Inability to find AI integrated coding applications with accurate responses

  • Lack of real-time feedback

  • Inadequate guidance for new coders

  • High subscription fees

User Flow & Site Map

To simplify navigation for both mobile and desktop applications, I created a user flow (first image below) and a site map (second image below) to clearly outline the steps for completing tasks. These tools ensure an intuitive experience, making all features easily accessible with minimal effort. My focus was on optimizing ease of use and efficiency

Wireframing

Paper and Digital Wireframes

Designing low-fidelity wireframes allowed for quick exploration of layout and functionality options. This iterative process helped gather feedback and refine designs, ensuring they addressed user needs before moving to high-fidelity prototypes. I created wireframes for both mobile and desktop for consistent user experiences

UI Design

After immersing myself in the application, I developed a UI library kit to guide the design of key features for the prototypes. This process inspired the name DebugGO, reflecting the app's commitment to helping users solve problems efficiently

Mid-fi Prototype

Integrating the UI design into the wireframes was an exciting phase, allowing me to fully dive into the visual and interactive elements of the design. It provided an opportunity to refine the user experience and bring the concept to life, making the app both functional and engaging

Usability & User Testing

The usability tests were an overall success. Four participants from the University of Washington tested the prototype to provide valuable feedback. While the overall response was positive, two key suggestions emerged from their input:

A few participants suggested that the application would feel more seamless with transitions and smart animations. After implementing their feedback, I observed a 30% improvement in usability, enhancing the overall user experience

Participants mentioned they preferred a back button on each page for the mobile prototype rather than dragging the screen to return to the previous one. In response to their feedback, I revised the prototype and updated the navigation to include a back button on every page

Key Takeaways

What I learned

Working on DebugGO taught me the significance of responsive design. I learned how essential it is to create interfaces that adapt effectively to different screen sizes and user contexts, enhancing usability and overall user satisfaction

Moving forward

I will keep in mind that it is perfectly acceptable for there to be differences between mobile and desktop screens. Responsive design doesn’t mean that both platforms should look identical; rather, it should focus on maintaining core design principles and functionality. Ensuring that users can easily navigate and access the same features, regardless of the device, is what truly matters

Previous
Previous

Ingresafe

Next
Next

Phool & Kismet