Week Design Sprint
Coding languages
Users tested
Social media app for Bonsai enthusiasts
I enrolled in ADPList's "Design with AI" course to learn how to use AI in my workflow.
After fulfilling the goals of the course and being selected to present my work to the international design community, I continued to refine the project and iterate based on user testing. I took the opportunity to learn HTML, CSS, and JavaScript, rather than rely on AI coding tools, so that I would learn Front End development "under the hood".
Team
Platforms
Tools
Outcomes
Challenge
A class for designing with AI gave a 2 week window to conceptualize and design an app using AI tools (2024)
Completion of the course required using AI tools for all types of design work. We were tasked with brand, content, and creating a coherent product idea over 2-weeks.
Goals:
Present a project to the international design community, iterate the design based on user testing and code the app.
The initial goal was achieved during the course time. Afterwards, I tested the mid-fidelity mocks on users and iterated, while learning to code.
Specifically, I:
Used a combination of AI tools and Figjam to create the class presentation.
Recruited 4 users from the ages of 30 - 70 to test the design.
Learned HTML, CSS, and JavaScript.
Set up a Github repository and using VS Code (no AI-assistant though!).
Solutions:
Hand-coded app for web, iterated based on user testing.
User feedback was unanimous on some limitations of the initial design. While I'd used the initial design as a template for my coding education, I iterated the final product, directly in code, based on the feedback
Testing results:
UI seems clear and pleasant.
Participants were confused about what the signup was for.
1 user unsure about the value proposition of the product (would it matter to users)?
participants were split looking for information about the product on either "Our story" page or the "Meet the team" page.
Onboarding had a 100% success rate.
3/4 expected system confirmation of success.
Design highlights:
Final UI
User research was clear and the results were used to iterate a more intuitive and understandable product in code.
Reflections:
This project showed me just how much AI can help with first-pass concepting, as well as the limitations of using AI to create the entire design. Through the initial design two pages were created that user testing revealed should be combined.
I also learned firsthand the complexities and power of responsive web implementation. I also learned more terminology specific to developers such as pull request, commits, and amends. The JavaScript interactions were particularly interesting, as well as the tradeoffs inherent in using flexbox for CSS styling and layout control.
I've been able to take this new perspective and knowledge into future positions in-house, as well as when working with Wix and Framer for freelance projects.