Interior Match is an app that helps people find interior designers based on their taste preferences. It has a User Interface based on the card swiping from Tinder. This project was part of a 2 week rapid ideation session/design jam for the first module in my UX Design Masters.
Interactive prototype and design system for Interior Match App
As this project was part of a two week rapid ideation session the design process was heavily condensed and the requirement was to spend the majority of the time on the prototype itself opposed to user research. Once I’d identified my idea I created some low fidelity wireframes on Figma, this helped me make a number of decisions about how the user would interact with prototype as well as the scope of the project.
Additionally this influenced the requirements of the design system as I could identify which components I would be using throughout the prototype.
My aim for the design system was to be simple and consistent. Throughout all elements I used the same fonts, weights, colours, drop shadows and curvature.
For the design system I created the following:
- Colour palette: 5 colours (Primary, secondary, dark, neutral, light)
- Logos: 3 variations (dark, colour & light)
- Type faces: 3 variations (Headings, subtitles & body)
- Buttons: 6 variations (Primary, secondary, contrast, no, list & yes)
- Icons: 6 variations (Close, view, info, profile, settings & cards)
- Components: 3 variations (Small card, large card & large card details)
- Grid system
The grid system features 3 columns with a 20px margin and 20px gutters between each column, then depending on the height of the component dictated the number of rows.
By creating this design and grid system it allowed me to focus more on the information architecture and interaction between the user and the prototype instead of making decisions on the aesthetics.
The user journey of the prototype goes from the initial apps flash screen, through a brief onboarding of giving the app the users interior design taste preferences. Follow by swiping yes or no on the different options with a final view of the list that the user has selected.
I created the interactive prototype using Figma. The entire prototype is made up of 18 different frames which feature hotspots triggering other frames to load. For the swiping feature I used a “on drag” interaction to trigger a “push” animation that imitates the swipe of a card.