Atomstock

UI/UX Designer
Lead Front-end Developer

Cross-platform app
Design system

Finance

Professional

Design Showcase

🖼️ User flow visualization
🖼️ Key screens & features & Interactions & animations
- Core features
  - AI Advisor
  - Real-time market data
- Interface
  - Stylish interface
  - Interactive charts
  - Onboarding
  - Cross-platform UIs

🖼️ Color palette & usage
- TymeX color palette
- Light / dark mode
- Android Dynamic Color
🖼️ Typography system
- Inter, customized for a modern vibe
🖼️ Core UI components
- Showcase title bar component (complex)
- List Items
Design principles
- Trendy, modern
- Welcoming
- Simple, intuitive
- Be as native as possible (supported the use of Flutter as well)

Problem statement (1-2 sentences)
- With Atomstock, we set out to create a welcoming gateway into stock trading for beginners. The app focuses on delivering complex market information through an intuitive, approachable interface that helps users make informed trading decisions.
Target audience snapshot
- Shawn, 24 - Student “I want to start investing but traditional trading platforms are too difficult to approach” Trades on-the-go - Prefers simple UI - Needs educational content - Values security features
Design goals
- Accessibility
  - Clear, jargon-free information
  - Interactive
  - Intuitive navigation
- Visual attractiveness
  - Beautiful interface
  - Light / dark modes
  - Native, familiar interfaces on both platforms
- Informative
  - Real-time data
  - Interactive stock prices charts

Problem definition
- A lot of apps faces the problem of the onboarding process being screens that are filled with texts that you just click through. In reality, users mostly skips these screens to get right to the app
Solution approach
- Use a familiar UX pattern that most younger users know: Instagram Stories. By simply tapping on the screen, users can see the next feature. Instead of text, these onboarding stories are visually captivating with digestible text
- Users can immediately sign up / sign in at any point.
🖼️ Visual before/after
Key outcome
- Onboarding process that garnered a lot of praise and interest
- Became part of the app’s visual highlight and character

Problem definition
- For stock prices, the app can show 3 kind of information: current, real prices, and predicted prices. Due to the fact that these all contained a number and an arrow, this can quickly cause confusion
Solution approach
- Clear use of vertical arrows for real prices, and diagonal arrows for predicted prices. Furthermore, predictions are always labelled with text.
🖼️ Visual before/after
Key outcome
- Clear distinction between real prices and predictions, lowering confusion and increasing trust in the app.

Problem definition
- Creating an automation is a complex process. These steps both includes setting up the stock the automation will apply to, when, for how much, plus any extra conditions. Showing all of this information at once can easily overwhelm a new user.
Solution approach
- Carefully defining the steps, and categorizing them as either steps (required) or conditions (optional)
- Using a card-based wizard UI that leads users one-by-one into each step they need to text.
  - Only one card can be expanded and edited at a time, ensuring that the information given during each step is managed and digestible.
  - Once the card (step) is configured, it will collapse down and show a glanceble summary. This lets users quickly view any steps they have configured.
  - Users can tap on any card to edit it again.
- Each card when expanded includes a informative, jargon-free explanation of what this step is and what’s it’s for. For optional conditions, a recommendation is given to users to further inform them.
🖼️ Visual before/after
Key outcome
- Simplifying a very difficult and confusing process into something approachable, understandable, and easy to set up.
- Made it effortless for users to set up new automations.

Technical Implementation
- Flutter-based cross-platform application
- Carefully crafted platform-specific UI adaptations
  - Native look and feel for both iOS and Android
  - System-specific typography, spacing, and interaction patterns
- Responsive real-time data visualization
  - Smooth, performant chart animations
  - Real-time price updates with minimal UI lag

Design & Development Integration
- Seamless translation of Figma designs to code
- Pixel-perfect implementation of complex UI components
- Consistent design system across platforms

User feedback/testimonials
- Design Excellence
  - “A standout example of simplistic, Western-inspired design that breaks away from information-heavy traditional interfaces”
  - Achieved the delicate balance between simplicity and functionality while maintaining visual appeal
- Professional Recognition
  - Successful brand integration into functional design
  - Praised for clear information hierarchy and thoughtful organization
  - “Instantly familiar” interface demonstrating strong UX patterns
  - Notable achievement in simplifying complex financial data