fizzara.github.io/figma.html at main · fizzara/fizzara.github.io

History

254 lines (228 loc) · 19.1 KB

Raw

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

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

<!DOCTYPE html>

<head>

<title> Figma Design | Fizza Ahmed</title>

</head>

<body>

<a href="#main" class="skip"> Skip to Main Content </a>

<span class="name"> <a href="index.html" alt="Index"> fizza ahmed </a></span>

<button class="header-category dropdown-button" > Works </button>

<li><a href="https://fizzara.github.io/art"> Art & Design </a></li>

<li><a href="https://fizzara.github.io/figma"> Figma Design </a></li>

<li><a href="https://fizzara.github.io/game"> Game Design </a></li>

<li><a href="https://fizzara.github.io/thesis"> Master's Thesis </a><li>

<li><a href="https://fizzara.github.io/photography"> Photography </a></li>

<li><a href="https://fizzara.github.io/video"> Video </a></li>

</ul>

</div>

<button class="header-category dropdown-button" style="padding-left: 0.5em;" onclick="location.href = 'https://fizzara.github.io/resume';"> Resumé </button>

</li>

</ul>

</nav>

</header>

<h1> Application and Website Design <h1>

<h2> App Design in Figma </h2>

<p style="font-style: italic;">Please allow some time for the Figma files to load<p>

</div>

</div>

</div>

</div>

<h3 style="font-size: 2em; font-weight: 800;">Bookworm</h3>

<p style="font-style: italic;">Spotify for Books</p>

<p>

Created as a business idea for an entrepreneurship class, Bookworm is a platform for discovering new books.

A cross between Spotify and Goodreads, it is marketed as an all in one application where users can share what they're reading, be suggested new books, and follow their friends with updated but familiar UI.

Using a freemium payment model, all users can enjoy the app with no monetary barrier.

<br> Bookworm extends its audience with it's education model, where teachers can add students to their class and track their reading progress.

Teachers can also create booklists for their students, and use the Bookworm algorithm to create their reading lists and provide suggestions for their readers.

<br> Finally, authors can use Bookworm as a platform to connect with their audience. They can create their own booklists that include their books and similar ones, view the lists their books are on, and share what they're reading, all to bring their community together.

</p>

<p style="font-size: 1em"><a href="https://docs.google.com/presentation/d/132zoVFf4TbLFVqPCKiuPB1L3hVZViO-wCmARBLTIs7w/edit?usp=sharing"> View the pitch deck for Bookworm here.</a>

</div>

<hr>

</div>

</div>

</div>

</div>

</div>

<h3 style="font-size: 2em; font-weight: 800;">AI Food Management App</h3>

<p style="font-style: italic;">A quick and easy way to manage food intake with diabetes</p>

<p> Created as a design challenge for FS8205 at Toronto Metropolitan University under Sandra Tullio-Pow, this application was designed to be an alternative for current food tracker apps used by those with diabetes, automating the process of calculating nutritional value, testing the user’s glucose, and injecting insulin.

To calculate carbohydrates from a meal, users simply take pictures of their meal. The app includes AI trained to make estimation of carbohydrates off images of your food, limiting the user’s input to a couple of images.

This would then be used to calculate the user’s required insulin based off multiple other data points such as the user’s current glucose levels, their weight and other relevant physical data, their recent physical activity, and of course their previous input into the app that trained the algorithm.

After calculation, the AI would send the information to the user’s insulin pump to dispense the correct amount, and would continue to monitor the user without input to alert them to any potential needed corrections to raise glucose levels, or administer additional insulin if needed, eliminating need for user involvement as much as possible.

</p>

<p style="font-size: 1em"><a href="https://docs.google.com/presentation/d/1_Osx830DD2jMyeukrLXDST0ZMb9kLzkPdITsFn4ouDk/edit?usp=sharing"> View the first slide deck for the AI food app design challenge.</a> <br><a href="https://docs.google.com/presentation/d/1njGcnUcnfrsKB6mU-Ej9VBeQOZ7ntLWns-U0N8Sz4RY/edit?usp=sharing">View the second slide deck for the AI food app design challenge.</a>

</div>

<hr>

<h2> Web Design in Figma </h2>

</div>

</div>

</div>

</div>

</div>

</div>

<h3 style="font-size: 2em; font-weight: 800;">Cafe KKinn</h3>

<p style="font-style: italic;">An updated website for an existing business </p>

<p> Unfortunately, since the project's completion, Cafe KKinn has gone out of business and their original website no longer exists. Fortunately, we created this updated website to represent the true energy of their business.

<br>Cafe KKinn was a top scale Asian Fusion restaurant in Unionville. Sadly, their website did not portray that. It was a basic HTML sheet that barely included its menu or event services, and was unavigatable.

Our team decided to choose this website to reinvent from the bottom up. We started with a Low Fidelity version as a proof of concept which was run by our client (our Professor).

We then went on to create a Medium Fidelity version (not pictured) that was run by the client for feedback on further elements, such as font style, images, and colour scheme, as well as an updated logo.

Finally, we started on our High Fidelity version. From our user research, we recognized that most of our target audience would be using their phones to do restaurant research and so we also designed a highly mobile friendly version,

to increase usability and customer satisfaction. From research we learned that customers liked knowing what they were eating, and appreciated when dietary restrictions were listed on the website, and so we included images of the food

with dropdowns to see ingredients and descriptions. We also learned that customers preferred the ease of booking reservations in advance, and doing so online, something the original website was lacking. We added online reservations through OpenTable

and a clear form to be filled for event booking, which the restaurant did often but was unclear about on the original website.

</p>

</div>

<hr>

</div>

</div>

</div>

</div>

<p style="font-style: italic;">A resource website for harassment in the workplace</p>

<p> In Tech Too is a creative project responding to a current issue in the field of Digital Media. Workplace harassment for women in the field of Technology is ridiculously high, and it is too often swept under the rug and allowed to happen.

Those who try to fight back are ridiculed, frozen out, and at times lose their jobs, never finding recompense for what happened to them. In Tech Too is a website to educate, to relate, and to take action. It includes stories and information for visitors to educate themselves on the topic, as well as the laws and what they can do to fight back against harassment in the workplace. It also includes an anonymous blog site where victims can share their experiences and find support.

After receiving feedback on the project, I returned and added more potential resources. For example, those with an account with the website can volunteer to be a shoulder for support, and to prevent abuse, accounts can be reported and will be investigated, to keep a safe space for those who need it. In Tech Too would also have a section where lawyers could volunteer their time to answer more specific questions (in a non-legally binding method), to ensure that those who may not be in a place to hire a lawyer could still have their questions answered.

</p>

<p style="font-size: 1em"><a href="https://docs.google.com/presentation/d/1tw8Y3L7xz4zsWITMBJW_SbI9IWcVA-nIIM4UXxHvfTc/edit?usp=sharing">View the pitch deck for In Tech Too here.</a>

</div>

</main>

<div class="footer_name" style="display: flex; gap: 10px; font-size: 2em; align-self: center; align-items: center; font-size: 2em"> <img src="Images/logosized.png" style="max-width: 50px" alt="Fizza Ahmed Logo"> fizza ahmed </div>

<ul>

<li><a href="resume.html">My Resume</a></li>

<li><a href="" onclick="footerJump()">A Random Project</a></li>

<li><a href="thesis.html">My Master's Thesis</a></li>

</ul>

</div>

<p style="margin: 0px;"> Reach out by </p>

<ul>

<li id="foot_email"><a href="mailto:[email protected]"> ✉ Email</a></li>

<li><a href="linkedin.com/in/fizzara"><i class="fa-brands fa-linkedin"></i> LinkedIn</a></li>

<li><a href="https://fizzara.github.io/contact"><i class="fa-regular fa-note-sticky"></i> Contact Form</a></li>

</ul>

</div>

</footer>

var slideIndex = [1, 1, 1, 1, 1, 1];

var slideId = ["slides1", "slides2", "slides3", "slides4", "slides5", "slides6"]

var dotsId = ["dot1", "dot2", "dot3", "dot4", "dot5", "slides6"]

showSlides(1, 2);

showSlides(1, 3);

showSlides(1, 4);

showSlides(1, 5);

</script>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

figma.html

Latest commit

History

figma.html

File metadata and controls