Class Project 01 - Create your own brief

Persona

Final Project - Dona Bikes - image 1 - student project

Task flow

Final Project - Dona Bikes - image 2 - student project

Class Project 02 - Wireframe

The wireframe I made in figma follows the same structure / layout as the one provided by Dan.

Final Project - Dona Bikes - image 3 - student project

Class Project 03 - Icons

I got my icons from Iconify. Considering the age group and location of my persona, I chose to include icons for WhatsApp, Instagram, and Facebook, as these social media platforms have a higher percentage of users within my target audience.

Final Project - Dona Bikes - image 4 - student project

Class Project 04 - Testing on your phone

I don't have another cellphone to take a picture of my prototype in action, but I will be uploading videos recorded later while using my app with Figma Mirror.

Class Project 05 - My first animation

For this animation, I chose to display confetti after the user clicked the 'Purchase' button, along with a small animation of the arrow moving from left to right.

The confetti animation was created using individual images in a GIF format, and I utilized multiple frames with appropriate delays to achieve smooth transitions.

Class Project 06 - Moodboard

After doing some research, I found several images that looked similar to what I had planned. Essentially, I wanted a design with an almost white background and black font color to avoid eye strain / contrast issues for my Persona who is in their 40s.

Final Project - Dona Bikes - image 5 - student project

Class Project 07 - Colors & Columns

I selected colors from my moodboard and used mycolor (dot) space to generate various shades. In the end, about half of the colors, especially the darker shades of my accent color, were not used.

Final Project - Dona Bikes - image 6 - student project

Class Project 08 - Text

For my fonts, I opted for sans-serif typefaces, such as Quicksand for headers and Open Sans for paragraphs. As we know, these fonts are easy on the eyes, look friendly, and provide an approachable vibe. This is crucial in my case, as our Persona hasn't purchased any bike, and we aim to create a warm and amicable atmosphere to make them feel comfortable.

Final Project - Dona Bikes - image 7 - student project

Class Project 09 - Making stuff

Final Project - Dona Bikes - image 8 - student project

Later on, I also designed a bicycle icon:

Final Project - Dona Bikes - image 9 - student project

Class Project 10 - Images

Finding meaningful images for my Persona was challenging, and I attempted to address the passion of my Persona for efficiency/productivity with the help of accompanying text.

Final Project - Dona Bikes - image 10 - student project

Class Project 11 - Buttons

Final Project - Dona Bikes - image 11 - student project

Final Project - Dona Bikes - image 12 - student project

Class Project 12 - Responsive Design

The desktop version of the homepage

Final Project - Dona Bikes - image 13 - student project

Review cards and mobile menu list

Final Project - Dona Bikes - image 14 - student project

Class Project 13 - Effects

Some layer effects and neumorphic buttons.

Final Project - Dona Bikes - image 15 - student project

Final Project - Dona Bikes - image 16 - student project

Final Project - Dona Bikes - image 17 - student project

Class Project 14 - Components

Final Project - Dona Bikes - image 18 - student project

Class Project 15 - Variants

Final Project - Dona Bikes - image 19 - student project

Class Project 16 - Form

I added a section to select the payment method into my checkout form. While I can't pinpoint why some forms appear safer and more secure than others, I am certain that the overall look and feel of the website plays a crucial role in gaining the user's trust and making them feel comfortable.

Final Project - Dona Bikes - image 20 - student project

Final Project - Dona Bikes - image 21 - student project

Class Project 17 - Prototyping

Mobile navigation slider

Final Project - Dona Bikes - image 22 - student project

Tooltip

Final Project - Dona Bikes - image 23 - student project

Newsletter modal

Final Project - Dona Bikes - image 24 - student project

Class Project 18 - My Second Animation

For this class project, I created an icon of a bicycle and utilized it to produce a brief animation triggered after the user confirms the purchase.

Final Project - Dona Bikes - image 25 - student project

Class Project 19 - Page transition

I designed a page that includes a carousel to showcase different bikes, each accompanied by a short description. I implemented an animation/transition to enhance the user experience when navigating through the available options.

Final Project - Dona Bikes - image 26 - student project

Class Project 20 - Micro interaction

I already had some variants, and I decided to incorporate a microinteraction. Additionally, I created various button variations for the hover and disabled states.

Final Project - Dona Bikes - image 27 - student project

Final Project - Dona Bikes - image 28 - student project

Class Project 21 - Finish your design

I really enjoyed this course and learned a lot. I have attached a video showcasing the final mobile design as well as another one featuring the desktop homepage

Carlos Uriel Zamora Ortega

--

1