When I am not at school, doing homework, at my regular day job, or at my other job, I fix broken screens on iPhones and other Apple devices to make a little extra spending cash from time to time. The name “Prezision” came to be by mixing my last name, Prezioso, with the precision that is necessary to properly deconstruct, replace certain parts, and reassemble various Apple products. The logo features a “cracked” icon on a black background, hinting that the icon is on a broken screen. The center of the crack also acts as a makeshift tittle for the first “I” in Prezision. This website would serve as a hub for those who wanted to schedule face-to-face appointments or to mail-in their device. Because this is a personal website, I felt it necessary to use my personal branding colors: black, red, white, and subtle accents of gray.
I wanted the overall UI design to be very clean and minimalist, a must for adapting to computers, tablets, and smartphones easily. I also designed it to be used relatively quickly; just pick your device type, the specific model, your specific options, fill in your information, and then check in periodically to track your order. Get in, do what you need to do, and get out. Who doesn’t love that?
The homescreen for Prezision Screen Repair. The main function here is to pick which device type needs to be fixed, an iPhone, iPad, or iPod. All three renders are drawn in proportion to each other, which helps to the simplicity of the website’s UI. You can also learn more about the company, or use the quick shortcut banner along the top at any time regardless of what page you are on. The “cracked” icon takes over the screen of the device when hovered over. In this case, iPhone is selected.
After selecting which device type you need fixed, you can select your specific model. The current ones available are in each app-like icon, where the screen size is in the pseudo-notification badge. Next, select the screen color and phone carrier. A quoted price will appear, and you have the option to go back and edit or accept the quoted price.
After accepting the quoted price, you can enter in your credit card or PayPal information, followed by the shipping and billing address; and lastly enter a contact e-mail and phone number. Just a reminder, don’t use the number for the phone you are sending in, because I wouldn’t be able to contact you by phone if I had the phone or it was in the process of being shipped!
Once your device has been sent out to me, track your repair for constant updates. An e-mail can be sent for each of the four main tracking milestones, while all others will appear on the site in chronological order with the most recent in bold on top and previous statuses underneath.
Process, Sketches, and Previous Version
The main focus for this do-over (previous version below) was to improve the UI/UX design. Previously, the overall layout felt clunky to me and had way too much scrolling for my taste. Especially nowadays, people don’t want to scroll forever. They want to get in, do what they have to do, and get out. Optimization is key.
While the overall navigation would change, some things would stay the same, like the logo and color scheme. If you haven’t noticed, mostly anything that is for personal use, i.e. my branding, a portfolio website, or a personal website like this, just to name a few, all use a similar color scheme of black, white, and red. Since the goal of this project was to improve on the UI/UX, a more streamlined approach was taken. Instead of seemingly never ending blocks of text, I opted for a much more universally recognized icon system. Select the render of any one of the Apple devices to continue on (in this case, iPhone) and select the app-like icon for your corresponding model. The screen size also appears as a badge notification icon, helping to tie the whole Apple ecosystem together. Originally, I had each phone model use the same iPhone model with the text on the screen, and in proportion to the other devices, but ultimately chose against it in favor of a more uniform approach.
Previous version of Screenshot #1
Previous version of Screenshot #2
Previous version of Screenshot #3
Previous version of Screenshot #4
