iFixers Device Repair UX / UI Website Redesign Proposal



Project overview



ABOUT IFIXERS

iFixers are a mobile device repair and data recovery company in California, USA. They have 8 stores in the Bay Area and specialise in major device repairs for Samsung and Apple owners including iPad, iPhones and MacBook. Since the pandemic, 90% of their business is conducted online through appointment only bookings.



DESIGN GOALS

• Create a modern website with a light, clean design that would help the business stand out from it's competitors
• Improve the information architecture
• Create trust by showing social proof (past clients,
• Connect to the core demographic 20s - 40s
• Update typography and imagery to make the website more current and appealing
• Create defined separate sections with unique branding
• Improve the website UX (.e.g. reduce speed of hero carousel)

Before + After



Before



After

Animated prototype of the homepage carousel showing four popular device repair services. MacBook Pro 16' mockup.



iPad pro 12.9" mockup

iPhone 14 Pro Max mockup

Style guide

Typography



Like good imagery and good music, typography does a lot of heavy lifting on a project and can make or break the look and feel.

I chose TT Interphases Pro to convey a quiet authority that sets the clean, modern look and feel of the website. It also works well at extreme sizes and harmoniously in different weights.





Final Design + Prototype Video



Landing page



























Prototype Video



iFixers Website Re-design Prototype

iFixers Website Re-design Prototype

Created by Yolande St.Ville.





Design process



Planned website sections

1. Hero header (carousel with difference devices, USP/ main value proposition + CTAs)
2. Logos of brands / clients they serve
3. Benefits of using iFixers
4. Select your device (Apple + Samsung)
5. Different client segments (retail, corporate, government, education)
6. Block with iFixers car and CTAs
7. Image of a staff member (representing service and trust)
8. Pricing table
9. Customer Testimonials
10. News and Media / Blog
11. Footer



Competitor Comparison table

Online booking section with cal.com

Repair process (CTA?)



Information Architecture

MAIN NAV

• Home
• Shop
• About Us
• Repairs
• Data Recovery
• [Contact Us]



FOOTER

• About Us
• Popular Repairs
• Reviews
• Quick Links
• Store Locations
• Contact Us
• Legal Information
• Find Us
• [Yelp] [Google]



[ ... ] - Indicates cta





Wireframe



Mid-fi design with placeholder copy and images.

(Iterations no.1 - 5)







Iterations



Website

Adding relevant copy, icons and Images



Testimonial Grid

Improving testimonial grid readability + adding visual interest with pictures







Footer

Improving spacing and information hierarchy





Original Design

Landing page







✨ Designed by Yolande St.Ville. July 2023.