Smart Tech Repairs background

A Branding, UX/UI & Development Transformation For Smart Tech Repairs

Smart Tech Repairs website on a laptop

Client

•Smart Tech Repairs

Timeframe

•25 Days

Deliverable

•UX Research & UI Design (Figma)

•Shopify Store

•Custom Node JS App

•SEO-Ready Site Structure

Visit Website

PAIN POINTS

Smart Tech Repairs' WordPress website was slow and difficult to use. Customers struggled to find the right device and repair, while the booking journey created unnecessary friction. The client needed a website that met the expectations of its UK market.

SOLUTIONS

We redesigned the full customer journey and rebuilt the website on Shopify. Clear device categories, repair options and a focused booking flow help customers move from a problem to a confirmed repair. A custom theme also lets the team update services, prices and content independently.

OVERVIEW

Smart Tech Repairs repairs phones, tablets, laptops and gaming consoles in Norwich. SDS delivered UX research, UI design, website copy, SEO and a complete Shopify revamp in 25 days. The new site supports repair bookings for local customers while also presenting mail-in and business services.

Technologies

  • HTML ( Frontend )HTML ( Frontend )
  • CSS ( Frontend )CSS ( Frontend )
  • Ajax ( Frontend )Ajax ( Frontend )
  • jQueryjQuery
  • Shopify Liquid ( Templating )Shopify Liquid ( Templating )
  • Node.js ( Backend )Node.js ( Backend )

Design Softwares

  • FigmaFigma
  • Adobe PhotoshopAdobe Photoshop
  • Adobe IllustratorAdobe Illustrator

Deployment & Server Administration

  • Amazon Web ServicesAmazon Web Services
  • EC2 InstanceEC2 Instance

SERVICES

We handled the website revamp from research through launch. UX research and UI design shaped a clearer repair journey, while website copy, SEO and custom Shopify development supported the move from WordPress. The result is a site where customers can find a repair and complete a booking.

UX Research
UI Design
Website Copy
Shopify Development
WordPress Migration
SEO

OUR DECISION

Customers usually arrive knowing which device is broken, not which page to visit. We made device selection the starting point and organised the experience around the next decisions: choose a repair, review the details and book. The client's existing identity and photography carried into a cleaner, more usable design.

Graphic Design

01BRANDING
BRANDING
02COLOUR PALETTE
COLOUR PALETTE
1. primary color2. secondary color3. accessibility (contrast ratio)
1. primary color2. secondary color3. accessibility (contrast ratio)
03TYPOGRAPHY
TYPOGRAPHY
1. font selection2. readability
1. font selection2. readability
04ICONOGRAPHY & IMAGERY
ICONOGRAPHY & IMAGERY
1. icon style2. illustration
1. icon style2. illustration
Decorative background glow
01
BRANDING
Smart Tech Repairs branding banner
02
COLOUR PALETTE
181818F5F5F7FFFFFF

COLOR

03

TYPOGRAPHY

READ - ABILITY

FontFigtree
Extra LightSmart Tech Repairs

The quick brown fox jumps over the lazy dog

RegularSmart Tech Repairs

The quick brown fox jumps over the lazy dog

MediumSmart Tech Repairs

The quick brown fox jumps over the lazy dog

Semi BoldSmart Tech Repairs

The quick brown fox jumps over the lazy dog

BoldSmart Tech Repairs

The quick brown fox jumps over the lazy dog

04

ICON STYLE

trash
edit
user
star
calendar-fill
calendar-fill
calendar-fill
calendar-fill
calendar-fill

UX/UI Design

We designed the website around the tasks customers need to complete quickly. Consistent device cards, clear repair choices and visible booking actions make a broad service catalogue easier to navigate on desktop and mobile.

UI Components

w1
widget 1
widget 2
widget 3

Website View

The website presents Smart Tech Repairs' repair services through a clear, structured layout, making it easier for customers to find the right service, understand their options, and move towards booking or contacting the business.

Loopers landing page on laptop

Main Pages

Repair Page

Customers can review available repairs for their device and select the service they need.

Repair Page

Cart Page

Selected repairs and booking details are brought together before checkout.

Cart Page

Blog

The team can publish repair advice and updates through an editable content area.

Blog

Contact Us

Customers can send an enquiry or find the Norwich repair centre.

Contact Us

Mobile Phone View

Customer app hero

The mobile experience keeps device selection and repair booking accessible on a smaller screen. Customers can browse services, check their selection and continue to checkout without losing their place.

Home
Map
Booking
Schedule
Fare summary
Driver info
Live map

DEVELOPMENT

We built the redesigned website as a custom Shopify theme using Liquid, HTML, CSS, Ajax and jQuery, with Node.js for backend functionality. The revamp covers device selection, repair options, booking checkout and the supporting pages. Smart Tech Repairs can update devices, prices, services and blog content independently.

Performance Metrics (KPIs)

Page Load Performance

Load timeBefore
3.8s
Load timeAfter
1.6s

Responsive Experience

Usability scoreBefore
68
Usability scoreAfter
94

SEO Performance

audit scoreBefore
62
audit scoreAfter
91

System Reliability

uptimeBefore
99.2%
uptimeAfter
99.9%

Booking Conversion Rate

RateBefore
1.8%
RateAfter
2.6%

Key Development Challenges & Solutions

01Challenge: Inconsistent Visual Identity
02Challenge: Poor Mobile Responsiveness
03Challenge: A CMS the Client Could Manage Independently
development

Problem: The old website used inconsistent layouts and styling, making the experience feel fragmented.

Solution: We applied the client's existing identity through a consistent design system, with reusable components and styling across the new Shopify site.

01

Problem: The previous layout was difficult to use on smaller screens, especially when browsing devices and repairs.

Solution: We rebuilt the layouts for mobile, with responsive navigation, device cards and booking steps tested across screen sizes.

02

Problem: Updating devices, prices and service information on the old website was difficult.

Solution: We structured the Shopify theme with editable sections so the Smart Tech Repairs team can maintain services, prices and blog content without developer support.

03

Technical Architecture & Tech Stack

Shopify Liquid

Custom, editable theme templates.

HTML and CSS

Responsive page structure and styling.

Ajax and jQuery

Interactive selection and interface behaviour.

Node.js

Backend functionality.

tech frame

Conclusion

Smart Tech Repairs needed a website that made booking a repair easier. SDS redesigned the customer journey, migrated the site from WordPress to Shopify and delivered a custom, manageable website in 25 days. Customers now have a clearer route from device selection to checkout, and the team can keep its services and content up to date.

Ready to Get Started?