Web App Redesign
Habit Coach AI is an AI-powered habit-tracking app utilizing ChatGPT and text messaging to guide users in maintaining healthy habits. The following case study describes the challenges, actions, results, and a testimonial of redesigning the application into a responsive web app.
β±οΈ September - November 2023 (3 months)
Challenge π₯
Provide users with detailed habit insights, streak tracking, and both daily & weekly views of their habits.
Provide developers with a Figma file with high-fidelity designs to begin implementation.Β
Previous Desktop View
Previous Mobile View
My Role π©πΌβπ»
I created high-fidelity wireframes through multiple iterations, incorporating internal user feedback and aligning with mobile and desktop best practices.
I dedicated 3-4 hours per week over 3 months while working a full-time job.
I maintained open communication with the Founder about workload expectations.
Who I worked with π¨π»βπ»π¨π»βπ»
Andriy Rusyn, the Founder, whom I attended weekly 1-hour sync-up meetings with to showcase progress, gather feedback, and collaboratively iterate on designs.
Addison Kowalski, an experienced UX Designer, attended some of the weekly sync-up meetings to provide feedback, mentorship, and guidance.
Design Mentality π§
Mobile-first
I began creating designs with mobile-first in mind. I used auto-layout to create components to make them responsive and easy to convert to desktop.
Initial Desktop Iteration
Initial Desktop Iteration
"I'm not building something new"
I built on existing design concepts by gathering inspiration from competitors and apps like Google Calendar.
Some Hurdles along the way π€ΈπΌββοΈ
#1 Knowledge Gap in Competitors
Challenge
Given the task of designing streaks, a knowledge gap in competitor offerings led me in divergent directions, causing a loss of focus on the primary objective. This screenshot captures Iteration 1 of the mobile view.
Solution
Conducted a competitor analysis which guided a shift in focus toward a daily view of habits and a habit details page.Β
#2 Using a combination of existing design systems
Challenge
I initially began designing with the Spartan NG library as per the developers' choice. However, they later identified PrimeNG as a more supported and feature-rich option. Consequently, I transitioned to PrimeNG. Despite this, I incorporated elements from the Untitled UI Figma kit for additional design options. This process resulted in a cluttered Figma workspace, requiring navigation between different files to consolidate the designs.
Solution
I organized content in Figma pages periodically, aligning with the number of iterations and project objectives. This structured approach facilitated a seamless transition from the initial Figma file to the Untitled UI, where a consistent organizational pattern was maintained.
Results π
Provided users with detailed habit insights, streak tracking, and both daily & weekly views of their habits.
"the new design is so clean!! I love seeing my streaks" - User feedback
Mobile and Desktop High-Fidelity Designs of the Daily View with the Habit Details panel opened.
Mobile and Desktop High-Fidelity Designs of the Weekly View.
A clean and organized "Ready for Dev" Figma file page for developers to begin implementation, which they completed building in 2-3 days.
Not shown in the screenshot below, I also included comments regarding what to expect concerning interactions.
Testimonial π
"At first, I was a bit skeptical of Alicia's design chops given her background in engineering, but after our first meeting, it became clear that she knows how to use that previous experience to 10x her output as a designer. She's the rare kind of designer who not only knows how to make things look awesome in Figma, but can also articulate important tradeoffs to make implementing her designs a breeze. Would highly recommend her to anyone looking for a multi-talented designer to add to their team."
Andriy Rusyn, Habit Coach AI FounderWant to hear directly from Andriy on his experience? Feel free to send him an email: andriy@habitcoach.ai