-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwobot.html
192 lines (167 loc) · 12 KB
/
wobot.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<body>
<h1>Wobot Ecomm</h1>
<div class="logo">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1735985682/wobot-logo-30px_u7m10q.svg" alt="">
</div>
<div class="case-study-section">
<h2>Overview</h2>
<p><a href="https://wobot.tech" target="_blank">Wobot</a> is a single-product e-commerce site selling a women's sweater with the empowering message 'Women who code write their future', designed to inspire and promote women's engagement in technology.</p>
<!-- image-gallery -->
<div class="case-study-gallery">
<div class="gallery-container">
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736020455/Group_10_a0ny7e.png" alt="Case Study 1">
</div>
</div>
</div>
<!-- Enf ofimage-gallery -->
<h3>Role and Responsibilities</h3>
<p>This e-commerce project demonstrates my full-stack development capabilities, marking the successful application of my coding skills after completing my web development program. While I handled all aspects of UX/UI and merchandise design, the primary focus was on technical implementation:</p>
<ul>
<li>Frontend Development: HTML5, CSS3/SCSS, JavaScript, Web Accessibility (WCAG)</li>
<li>Backend Development: Ruby, Ruby on Rails</li>
<li>Database Management: PostgreSQL</li>
<li>API Integrations: Printify, OpenAI, Stripe Payment Gateway</li>
<li>Version Control: Git/GitHub</li>
</ul>
<h3>Project Timeline</h3>
<p>It took me two weeks after graduation in December 2024</p>
<h3>Team Structure</h3>
<p>Solo project - designed and developed entirely by myself.</p>
<h2>Problem Statement</h2>
<h3>Problem To Solve</h3>
<p>In a tech landscape dominated by men and growing AI concerns, this project aims to inspire women to embrace and master technology rather than fear it.</p>
<h3>Business Goals</h3>
<p>Wobot is an e-commerce art project featuring a statement sweater, prioritizing social impact and technical demonstration over commercial profitability.</p>
<h3>User Goals</h3>
<p>The site empowers women in tech through its message-driven merchandise, while an integrated AI chatbot adds a playful element by generating lighthearted predictions about technology's future.</p>
<h2>Research & Insights</h2>
<h3>User Research</h3>
<p>The realization that "being a woman" qualified me for tech Diversity Scholarship programs sparked my interest in researching gender disparity in tech. Through secondary research, I gained insights into the persistent gender gap in the technology sector.</p>
<h3>Persona</h3>
<p>A woman in tech often finds herself navigating a male-dominated industry where she must continuously prove her capabilities. Despite her qualifications, she frequently encounters assumptions about her technical abilities and may feel pressure to work harder for the same recognition. She seeks ways to assert her presence and values connecting with others who share similar experiences in the field.</p>
<h3>Key Insights</h3>
<ul>
<li>Women hold 26.7% of technology-related jobs (2023)</li>
<li>Only 28% of startups include at least one female founder (2023)</li>
<li>Women occupy just 24% of leadership positions in tech (2023)</li>
<li>Women in tech earn approximately 83 cents for every dollar earned by men in similar positions</li>
<li>The gap widens at senior levels, where women earn up to 93% less than male counterparts</li>
<li>Tech jobs are growing 3x faster than non-tech jobs</li>
<li>Organizations with women in leadership roles see 34% higher returns</li>
</ul>
<p>Sources: These statistics are compiled from organizations like UNESCO, National Center for Women & Information Technology (NCWIT), and industry reports from 2021-2023.</p>
<h2>Ideation and Strategy</h2>
<h3>Brainstorming and Ideation</h3>
<p>After encountering the phrase 'Girls who code write their future,' which aims to encourage young girls into tech, I adapted it to 'Women who code write their future' to emphasize that it's never too late to enter the field, especially as technology becomes increasingly crucial across all industries.</p>
<h3>Database Schema & Flows</h3>
<p>Recognizing the complexity of the database schema and MVC architecture, I prioritized simplifying the user experience by designing a streamlined, single-user flow that eliminates authentication barriers.</p>
<!-- image-gallery -->
<div class="case-study-gallery">
<div class="gallery-container">
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736028119/wobot-db_h0e6vl.jpg" alt="Case Study 1">
</div>
</div>
</div>
<!-- Enf ofimage-gallery -->
<!-- image-gallery -->
<div class="case-study-gallery">
<div class="gallery-container">
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736027248/wobot-flow_nte6lb.jpg" alt="Case Study 1">
</div>
</div>
</div>
<!-- Enf ofimage-gallery -->
<h3>Design Principles</h3>
<p>The design approach emphasizes a minimalist, clean interface that keeps the focus on the empowering message and product. Strong typography and purposeful color choices showcase strong design aesthetic skills, while a straightforward navigation ensures a frictionless purchase process. The site maintains user trust through secure payment integration (Stripe), with responsive design ensuring seamless access across all devices. A playful AI chatbot adds an engaging element while maintaining the simplicity of the core shopping experience.</p>
<h2>Design Process</h2>
<h3>Wireframes</h3>
<p>Despite aiming to simplify development by initially bypassing authentication, I prioritized outlining the fundamental purchase initiation workflow to ensure a clear and structured user experience.</p>
<!-- image-gallery -->
<div class="case-study-gallery">
<div class="gallery-container">
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736023418/wobot-w-01_sth7zs.jpg" alt="Case Study 1">
</div>
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736023418/wobot-w-02_fqcmz4.jpg" alt="Case Study 2">
</div>
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736023418/wobot-w-03_pehzzl.jpg" alt="Case Study 2">
</div>
</div>
<!-- Add this div for the dots -->
<div class="scroll-dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<!-- Add as many dots as you have images -->
</div>
</div>
<h3>Visual Design</h3>
<p>The visual design's standout feature is an entirely CSS-driven rotating tarot card animation in the site header—a technically impressive element that represents a creative overachievement and serves as a point of particular pride.</p>
<video
width="100%"
controls
preload="metadata"
>
<source src="https://res.cloudinary.com/diwuyv3c8/video/upload/v1736024520/wobot-5sec_yxrh9k.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h3>Interaction Design</h3>
<p>The AI chatbot offers an original and creative interaction with the user around tech fortune-telling, with the originality lying in its uniquely designed conversational approach. An oversized crystal ball thumbnail adds a playful touch, transforming the typical AI experience into something truly inventive.</p>
<!-- image-gallery -->
<div class="case-study-gallery">
<div class="gallery-container">
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736024886/wobot-bot_fgukm3.png" alt="Case Study 1">
</div>
</div>
</div>
<!-- Enf ofimage-gallery -->
<h2>Testing and Validation</h2>
<h3>User Testing</h3>
<p>While the site has just launched and formal user testing is pending, I thoroughly tested the Printify API integration using Postman to understand required hash properties and values, and ran multiple test orders through the Ruby console to verify smooth payment processing. </p>
<h3>Feedback Collection</h3>
<p>Google Analytics will be implemented to gather initial user behavior data, complemented by planned post-purchase satisfaction surveys to collect direct customer feedback.</p>
<h2>Final Solution</h2>
<h3>Key Screens and Flows</h3>
<!-- image-gallery -->
<div class="case-study-gallery">
<div class="gallery-container">
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736029263/wobot-01_r8fnxc.png" alt="Case Study 1">
</div>
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736029263/wobot-02_hu0lse.png" alt="Case Study 2">
</div>
<div class="gallery-item">
<img src="https://res.cloudinary.com/diwuyv3c8/image/upload/v1736029263/wobot-03_n0vgkx.png" alt="Case Study 2">
</div>
</div>
<!-- Add this div for the dots -->
<div class="scroll-dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<!-- Add as many dots as you have images -->
</div>
</div>
<!-- Enf og mage-gallery -->
<h3>Features and Functionality</h3>
<p>While the core functionality centers on purchasing the unique statement sweatshirt, the site features a distinctive AI chatbot integration that sets it apart. Connected to OpenAI, the chatbot engages users by responding to questions about technology and the future with playful, whimsical answers. This interactive element transforms the e-commerce experience into something more artistic and memorable, helping to lighten the often serious discourse around women in tech.</p>
<h2>Outcome and Impact</h2>
<h3>Business Impact</h3>
<p>While it's still early to measure quantitative results or gather qualitative feedback, the project aims to inspire and empower both current and aspiring women in technology through its message and unique approach to e-commerce.</p>
<h2>Reflection and Learnings</h2>
<h3>Challenges Faced</h3>
<p>Building my first full-stack site presented numerous engaging challenges. Key among these were designing the initial database schema, implementing the MVC architecture, and particularly developing controllers for the Printify API integration. These technical challenges proved to be valuable learning opportunities in applying my newly acquired development skills</p>
<h3>Lessons Learned</h3>
<p>This project provided valuable lessons in development best practices: the importance of prioritizing backend infrastructure and information architecture before frontend implementation, the benefits of incremental feature development for easier debugging, and the critical role of frequent version control commits for better code management.</p>
<h3>Next Steps</h3>
<p>This project ignited my passion for full-stack development, as it demonstrated how coding empowers me to have complete creative and technical control over my projects. While I'm proud of this implementation, it's just the beginning - I'm committed to further strengthening my JavaScript, Ruby, and Ruby on Rails skills, and maybe learning frameworks such as React, eager to deploy more complex applications in the future.</p>
</div>
<script src="/src/js/components/gallery.js"></script>
</body>