ServicesDesign de produit

Design de produit

2 options · facturation mensuelle, par mois de travail

Un travail qui commence avant les écrans : la mission, le public, le modèle du produit, les scénarios clés et l’interface principale. SKARR.PRO ajoute des hypothèses testées et des modèles de produit alternatifs.

Avant les écrans.
Le produit lui-même.

Vous partez peut-être d’une idée, souhaitez améliorer un produit existant ou développer une nouvelle fonctionnalité. Nous transformons ce point de départ en modèle de produit, en interface principale et, si convenu, en code fonctionnel.

Parler de votre produit Comparer les options

Banking AppDémo interactive · données d’exemple · en cours

Découvrir l’interface produit

D’une question ouverte
à un produit fonctionnel.

La réflexion produit, le design d’interface et le développement restent liés. Les décisions que nous prenons ensemble se retrouvent dans le logiciel utilisé par les gens.

Nous convenons du périmètre au départ, examinons ensemble les décisions clés et réévaluons les hypothèses lorsque le travail révèle de nouveaux éléments.

Si le produit est déjà défini et qu’il ne reste qu’à concevoir ses écrans, ses flux et ses états, découvrez le Design UX/UI.

Ce que nous élaborons
avec vous.

Chaque étape transforme une question ouverte en une décision sur laquelle nous pouvons nous appuyer.

La mission et les utilisateurs

Les objectifs métier, les personnes qui utilisent le produit et les tâches qu’elles doivent accomplir. Ensemble, nous définissons les priorités et le périmètre de la prochaine version.

Résultat : un brief produit, des priorités et des hypothèses.

Le modèle du produit et les scénarios clés

Ce qu’est le produit, comment il crée de la valeur et quels parcours sont les plus importants. Nous organisons les informations dont les utilisateurs ont besoin à chaque étape et les décisions qu’ils prennent en chemin.

Résultat : les parcours utilisateurs et les bases structurelles du produit.

L’interface principale

Les écrans où le produit apporte sa valeur : leur identité visuelle, leur hiérarchie et les états associés à chaque action. Avec SKARR.PRO, les hypothèses et les modèles alternatifs sont testés sur des prototypes avant de nous engager.

Résultat : l’interface principale, définie sur des écrans concrets.

Le système qui l’entoure

Des composants, une typographie et des comportements cohérents dans tout le produit. SKARR couvre l’essentiel ; SKARR.PRO étend le système pour prendre en charge les fonctionnalités futures.

Résultat : un système de design à la mesure des besoins du produit.

Passer au code, si convenu

L’interface principale peut être conçue directement avec React : sous forme de prototype interactif pour vérifier les scénarios ou d’interface fonctionnelle avec le comportement convenu. Figma n’est pas une étape intermédiaire obligatoire.

Résultat : un prototype React interactif ou une interface React fonctionnelle, selon le périmètre convenu.

Une vision plus large.
Une prochaine étape plus claire.

Une tâche rapide sur mobile et un espace de travail en équipe nécessitent des façons différentes d’organiser l’information.

Concept d’interface pour les soins de santé : rendez-vous, dossiers médicaux et formulaire de consultation réunis dans une même structure

Application de santé.
Statut, détails et actions réunis dans une même structure.

Pour les applications web et les tableaux de bord, nous réunissons statuts, détails et actions dans une structure claire. L’équipe voit ce qui nécessite son attention, ouvre le contexte et fait avancer le travail.

Un concept visuel avec des données fictives pour un produit en cours de développement. L’application bancaire ci-dessus illustre la même réflexion sur un petit écran.

Voir le déroulement du travail

Une structure produit.
Une base sur laquelle s’appuyer.

Vous recevez un modèle de produit clair, les scénarios clés et l’interface principale : sous forme de fichiers de design ou, si convenu, d’un prototype React interactif ou d’une interface React fonctionnelle.

Les itérations suivantes, l’extension du système de design et le développement de fonctionnalités supplémentaires sont convenus comme prochaine étape.

Comment se déroule
le travail.

Quatre étapes, chacune aboutissant à une décision sur laquelle nous pouvons nous appuyer.

Analyses et recherche

Nous étudions l’activité, les utilisateurs et le contexte d’utilisation : analyses métier et produit, recherche utilisateur, analyse comparative de la concurrence et audits du produit, selon les questions prioritaires. Résultat : un brief produit, des priorités et des hypothèses.

Structure et prototypage

Architecture de l’information, navigation, hiérarchie du contenu et flux utilisateur. Les prototypes nous permettent d’examiner les principaux scénarios et la logique des interactions importantes avant le design détaillé. Avec SKARR.PRO, nous prototypons et comparons des modèles de produit alternatifs.

Concept visuel et interface principale

Nous explorons l’apparence, le ressenti et le comportement du produit, présentons la direction sur des écrans représentatifs et développons l’interface principale avec un contenu réaliste, différentes tailles d’écran et les états associés à chaque action.

Développement, tests et remise

Si le développement est convenu, nous réalisons le périmètre avec React, testons les parcours et états clés, puis vérifions la réalisation par rapport au design. Vous recevez les fichiers, le code source et les notes de configuration convenus.

Choisissez le niveau
dont votre produit a besoin.

Les deux options couvrent un mois de travail sur le produit. Le tableau présente le contenu de chaque niveau.

Design de produit : 2 options avec prix exacts
Caractéristique	SKARR Des écrans au design sur mesure. Votre propre langage visuel. $7,000 / mois par mois de travail Acheter SKARR Paiement sécurisé par Stripe	SKARR.PRO Plus de profondeur et de détail dans toute l’expérience, à chaque point de contact. $12,000 / mois par mois de travail Acheter SKARR.PRO Paiement sécurisé par Stripe
Sur quoi porte le travail
Point de départ	Point de départ Un produit dont la direction est claire. La mission, le public et le périmètre de la prochaine version sont définis ensemble.	Point de départ Un produit dont le modèle reste à définir. Plusieurs directions sont examinées avant d’en choisir une.
Modèle du produit et scénarios	Modèle du produit et scénarios Un modèle de produit et les scénarios clés dont il a besoin.	Modèle du produit et scénarios Comparaison de modèles de produit alternatifs et élaboration des scénarios clés du modèle choisi.
L’interface principale	L’interface principale Les écrans principaux, conçus avec leur hiérarchie, leurs états et leur identité visuelle.	L’interface principale Les écrans principaux, avec des hypothèses testées sur des prototypes avant le design détaillé.
Niveau de travail
Recherche	Recherche Analyses métier et produit, recherche utilisateur et audit du produit, choisis en fonction des questions prioritaires.	Recherche Les mêmes recherches, avec une analyse comparative de la concurrence et des études complémentaires lorsque des questions restent ouvertes.
Système de design	Système de design Composants, typographie et comportements pour l’interface principale.	Système de design Un système étendu, conçu pour prendre en charge les fonctionnalités futures.
Itérations	Itérations Les décisions clés sont examinées ensemble à chaque étape.	Itérations Davantage d’itérations sur le modèle, les scénarios et les détails de l’interface.
Collaboration
Travail mensuel	Travail mensuel Travail sur le produit pendant le mois. Le périmètre et les résultats visés sont convenus avant le début du travail.	Travail mensuel Travail sur le produit pendant le mois, au niveau choisi. Le périmètre et les résultats visés sont convenus avant le début du travail.
Design en code	Design en code L’interface principale sous forme de fichiers de design ou, si convenu, de prototype React interactif.	Design en code L’interface principale sous forme de fichiers de design, de prototype React interactif ou d’interface React fonctionnelle, selon ce qui est convenu.
Ce que vous recevez	Ce que vous recevez Le brief produit, les parcours utilisateurs, l’interface principale et les éléments convenus pour la remise.	Ce que vous recevez La même chose, avec les hypothèses testées, les modèles comparés et le système étendu.

Avant
de commencer.

Avons-nous besoin de fichiers Figma ou le produit peut-il être conçu directement en code ?

Les deux sont possibles. Le cœur du produit peut être conçu dans Figma ou directement en React sous forme de prototype interactif. Nous convenons du format au départ, en fonction de la manière dont votre équipe examinera le travail et le poursuivra.

Quelle est la différence avec le design UX/UI ?

Le design UX/UI intervient au sein d’un produit déjà défini : ses écrans, ses parcours et ses états. Le design de produit commence plus tôt, avec la tâche, le public et le modèle du produit, puis façonne l’interface essentielle à partir de ces éléments.

Le design de produit inclut-il le développement ?

Le cœur du produit peut être réalisé en React si cela a été convenu : sous forme de prototype interactif ou d’interface fonctionnelle. Le développement complet de l’application, la partie serveur et les intégrations font l’objet d’un périmètre distinct défini séparément.

Cela remplace-t-il une étude de marché ?

Non. Nous analysons l’activité, les personnes et le contexte d’utilisation afin de prendre des décisions concernant le produit. Une étude de marché formelle ne fait pas partie de cette prestation.

Que se passe-t-il après le mois ?

Nous examinons les résultats ensemble et convenons de la suite : poursuivre les itérations, élargir le système ou développer des fonctionnalités supplémentaires.

Vous avez encore des questions ?

Discuter de votre produit

Design de produit

Avant les écrans.
Le produit lui-même.

D’une question ouverte
à un produit fonctionnel.