Copyshop
Renovation and modernization project for the website of the company where I worked for four years. The current website has issues in both UX and UI.
Harsh colors, unrelated images that do not align with the company's concept, lack of relevant information, and non-intuitive navigation are some of the many aspects that have been addressed in this redesign, which are explained in more detail below.
Roadmap
Homepage
Services
Information of service
Order online
Sucess!
Goals
Organize all the content and information in a new and different way, making it more intuitive.- Modernize the style of the page, update and improve the pictures.
- Create a simple but efficient online order feature.
- Introduce a general price list for the users that don’t know exactly what they want, and specific prices for the ones that do.
- Incorporate a special section for students and companies, two groups that normally need complementary services.
Design
Homepage
Original Website:
- Only shows contact info and operating hours, with everything else hidden in a dropdown.
- The oversized logo wastes space.
- Orange text (specially with a light blue background) makes readability difficult.
Redesigned Website:
- Key info is easily accessible: operating hours, products, contact, pricing, and online orders.
- A short, engaging description highlights why this shop is worth choosing.
- Modern design that improves usability and visual appeal.
Original version
Improved version
Hamburger menu
Original Website:
- Expands awkwardly, pushing the rest of the content out of view.
- A plain white menu box clashes with the site’s design.
Redesigned Website:
- Smooth slide-in menu from the top right, preserving the page layout.
- Matches the site’s design, with a subtle border for distinction.
- Positioned on the right for better usability, aligning with user expectations.
Original version
Improved version
Layout
Original Website:
- Hard to tell which image corresponds to which title due to tight spacing.
- Some images don’t accurately represent the sections.
Redesigned Website:
- Each service is placed in a well-spaced, organized box.
- Consistent image style, with every product page featuring the same structure: title, image, description, and price.
- Users quickly learn how to navigate the site efficiently.
Original version
Improved version
Online orders
Original Website:
- The form only collects contact details, with no structured way to specify the order.
- Users have to type everything in a blank text box, leading to confusion and inefficiency.
- Outdated design (Windows 95 style), with inconsistent button and text formatting.
Redesigned Website:
- A guided form that asks the right questions for each product, while allowing custom details.
- Dynamic form fields that adjust based on the selected service.
- A modern, consistent design where text, titles, and buttons are clearly defined.
Original version
Improved version
Price list
Original Website:
- Available only as a PDF—okay on desktops, but hard to read on mobile.
- Overloaded with information, making it difficult to understand.
Redesigned Website:
- Clear, sectioned layout with large, readable headings.
- Non-essential details removed for better clarity.
- Prices appear directly on the relevant product pages, reducing unnecessary clicks and navigation.
Original version
Improved version
Inspirations