Mockup UX Design E-commerce Mobile app

Iter · Alain Michaux

Creating and sharing a passion for the medieval world.

B3 MDS dual project: designing end-to-end the two digital products of Alain Michaux, an artisan calligrapher specialising in medieval heraldry — a WooCommerce e-commerce site for his creations, and a mobile app for guided tours of historic sites in Normandy.

Website, coming soon Application, coming soon

Project brief

Alain Michaux is launching a medieval crafts micro-business (calligraphy, coats of arms, wedding stationery) with no existing customer base or digital presence. The project covers two distinct products: a WooCommerce e-commerce site to sell his creations, and a mobile app offering guided tours of historic sites in Normandy.

Scope

UX Research E-commerce Mobile app Wireframes Prototyping WP Integration

Tools

Figma Mockup

WordPress Integration

Website personas

Two buyers, two ways of arriving.

Sophie (29, bride-to-be) is looking for calligraphy for her place cards: she needs clear delivery timelines and reassurance before buying. Julien (26, tabletop gamer) lands from Google on mobile: he doesn't create an account, pays with Apple Pay, and wants it to feel like real parchment. Two profiles, two distinct purchase intents, which shaped the checkout funnel and CTA wording.

1 / 2

App personas

The expert and the pressed tourist.

Eric (44, historian) demands Expert mode: cited sources, rigorous reconstruction, zero simplification. Sarah (32, tourist) is in the car park with her 7-year-old: she has two minutes and the interface must work offline. These two radically opposed profiles shaped the entire app, justifying the decision to create two distinct visit modes from the very first onboarding screen.

2 / 2

Wireframe — website

Validating hierarchy before brand decisions.

The site wireframe framed seven pages in black and white before any colour or typography decisions. The homepage puts purchasing first, with no reference to the app in the hero. On product pages, "Add to cart" becomes "Order this piece" to emphasise the handcrafted object. No shop filters at launch (fewer than ten products).

1 / 4

Wireframe app · user side

23 screens structured before Figma.

The user wireframe covers the five main tabs (Sites, Map, Visits, Profile, and onboarding). Essential information (duration, price, accessibility) is placed above the fold on the venue detail page. The visit mode choice (Family / Expert) is central from the very first launch: it is this thread that organises the entire experience.

2 / 3

Wireframe app · admin side

The management tool behind the experience.

The admin interface (Dashboard, Sites, Bookings, Settings) was wireframed separately to avoid polluting the user flow. Alain Michaux can create and manage his historic sites, track visit bookings and configure Expert and Family content from a dedicated interface, without ever crossing the visitor's experience.

3 / 4

Website mockup

The detail that anchors the medieval universe.

The site icon design is the first deliverable of the visual phase: an icon built to work as a favicon, social media visual and on packaging. It concentrates the visual identity into a single mark, rooted in the codes of medieval heraldry.

4 / 4

See all projects Contact me

Website

High-fidelity WooCommerce e-commerce: 5 pages mocked up (Home, Shop, The Workshop, Visits, The Journal). WordPress integration with WooCommerce, complete checkout tunnel, Elementor blog template, 10 products created.

Mobile app

A guided-tour app designed for Alain Michaux's medieval domain. The experience adapts to two profiles (Family and Expert) with an interactive map of the site, contextual content by area, and an admin interface to manage visits independently without relying on external support.