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
Final Designs & Prototypes
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