My Star Maps | Design System 2023
Creating MyStar Maps design system
-
Creating UI Design System for MyStar Maps which is an e-commerce platform for personalized posters
​
-
Designing mobile application high-quality user interfaces for MyStar Maps
-
Designing UI prototype for the Stars Hunter AR app - an augmented reality application that allows the user to explore constellations on his personalized star map by scanning the poster with the device camera
Moodboard
User flows
1
Customizing Star Map, adding it to cart and launching augmented reality app after checkout
-
Onboarding
-
Designing custom map
-
Setting date and time
-
Choosing background theme/uploading image
-
Editing the map heading text
-
Choosing frame
-
Adding to cart
-
Cart preview
-
Launching the AR application
2
Searching for product and adding it to cart
-
Landing page
-
Viewing products
-
Selecting specific product
-
Adding item to cart
-
Checkout
-
Launching AR application
Foundation
Creating fundamental elements (colors, typography, scale) define their styles and communicate them as design tokens which can be used in the future.
​
Accessibility
Testing the accessibility of each element: ensuring that text, icons have strong luminance contrast.
Testing the atomic components - ensuring validation errors in form fields are obvious to screen reader users. Ensuring links and buttons contain descriptive text, avoiding generic phrases such as such as "click here", "here", "more" etc.
​
​
.png){kind=small}
.png)
Components
Creating a library of reusable components, based on user flows. Each component has various examples so that their interactive states are clearly communicated.
Cards
The app uses different card sets depending of use case.
General card
Horizontal
The app will use this card composition when showing list of items in browsing pattern.
Buttons
Testimonial cards
We will be using this card for customer reviews.
Fields
Input fields are components used in forms and dialogs to allow users to enter text. They should provide a clear affordance for interaction, making them discoverable in layouts, efficient to fill in, accessible.
Field Types:
Default
Active
Error message
Search
Long text
Password input
Selection field
Navigation and form controls
Navigation controls to help users move between pages and situate themselves in the application.
Form controls to allow users to interact with a form outside of normal input interaction, which is communicated in fields section.
Grids and breakpoints
We use grids to establish rhythm and responsiveness in our interfaces.
​
For this project I'm using the following breakpoints of grids in certain layouts:
​
Mobile: 4 columns
Tablet: 8 columns
Desktop: 12 columns
Illustrations
I am using original illustrations to establish artistic harmony, create visual triggers, amplify user interface, clarify and decorate the design
Custom illustrations in mixed media style used in onboarding animation.
High-fidelity UI layouts
Designing of high-fidelity user interface layouts to cover each step of the user journeys.
High-fidelity prototype
Designing high-quality clickable prototype with interactions for MyStar Maps app.
