Brand/ Client Name:

MK Cellphones

MK Cellphones is a local cellphone and computer repair business with 15+ years of experience, offering practical support for repairs, phone sales, accessories, and computer service.

This case study presents the MK Cellphones logo system alongside an HTML-based website designed and developed for the brand. The working preview shows the repair pricing flow, pre-owned device section, and contact path directly inside the portfolio page.

Logo

The MK Cellphones identity came from something I noticed during the in-person brand briefing. When employees picked up customer calls, they introduced the business by the initials first: "MK Cellphones." That made MK feel like the part people would remember, say back, and recognize quickly.

So instead of using a generic phone repair icon, I built the logo around the owner's initials. The connected MK mark feels technical, compact, and easy to use across stickers, stamps, profile icons, signage, and website details, while the full wordmark adds clarity when needed.

The yellow was selected to match the shop's existing wall color, keeping the identity connected to the physical space as requested by the client. The deep navy acts as a stronger supporting color, adding contrast, stability, and a more professional tone across digital and print applications.

Mockups

MK Cellphones stationery and shopping bag mockup

MK Cellphones repair shop interior wall mockup

Note: These mockups were created with support from AI photo generators for portfolio presentation and do not represent final brand used applications.

Website

This screen presents a local preview of the MK Cellphones website embedded inside the frame. For the best responsive viewing experience, please open the preview on a larger screen.

Scroll down to learn more about the website design, structure, and functionality.

Click to view website

Workflow

Designed in Adobe XD, coded with Codex, and uploaded to WordPress as HTML pages, the website turns the MK Cellphones identity into a functional digital experience. The build supports a clear repair pricing flow, a structured pre-owned device section, and a direct contact path while staying consistent with the brand system.

Website Interface

Home Page

The header was designed to keep the brand present while adding a subtle interactive detail. In its default state, the MK icon holds the brand's Yellow while the wordmark stays white for clarity. On hover, the colors switch, creating a small but memorable motion cue that makes the navigation feel more responsive without distracting from the page content.

Featured Devices

The featured device section appears just below the main home page introduction, making it only a short scroll away. It brings selected pre-owned phones into the home page so visitors can move from the brand message directly into available inventory. Each card uses consistent spacing, clear pricing, and request buttons to make browsing feel simple and practical.

Repair Pricing Page

The repair pricing page is built around transparency and quick decision-making. Customers can select a brand, device, and repair type, with the estimate updating automatically based on the selected service. The page also includes notes for specialty repairs and warranty details, keeping important information visible before customers contact the shop.

Repair Request Dialog

The repair request dialog connects the pricing system to the next customer action. Once a repair is selected, the form automatically prepares a message with the device, repair type, and price included. Customers can send the request through email or WhatsApp, reducing friction and making the quote flow feel complete.

Repair Pricing Table

The pricing table supports users who want to compare repair costs in more detail. Brand tabs, model search, and structured columns make the larger repair list easier to scan. This gives the site both a guided estimate tool and a full reference table for customers who prefer to review options manually.

Pre-Owned Devices Page

The pre-owned devices page organizes available phones into a clear inventory system. Filters for iPhone, Samsung, and other devices help customers narrow the list quickly, while each card presents model, storage, price, and a request action. The structure gives the page a clean retail feel while keeping the purpose practical and service-focused.

Device Request Dialog

The device request dialog turns each product card into a direct availability inquiry. When a customer selects a phone, the message is automatically prepared with the device name and price. This keeps the buying process simple and helps users contact the shop without needing to rewrite product details.

Contact Page

The contact page brings the shop's communication details and inquiry form into one focused layout. Customers can find the address, phone number, email, hours, and save contact card option alongside a quick message form. Email and WhatsApp actions make the page flexible, giving customers multiple ways to reach the shop based on what is most convenient.

Header Interaction

The header was designed to keep the brand present while adding a subtle interactive detail. In its default state, the MK icon holds the brand's Yellow while the wordmark stays white for clarity. On hover, the colors switch, creating a small but memorable motion cue that makes the navigation feel more responsive without distracting from the page content.