stockam
stockam
UI ANIMATION PROJECT / JULY 2022
PROJECT OVERVIEW
Stockam is a native iOS trading app designed with inclusivity in mind. Its core aim is to make trading accessible and comprehensible to everyone, particularly catering to novice investors seeking to demystify the world of investments.
MAIN CHALLENGE
The primary hurdle was to engineer an application that balances simplicity and efficiency. The challenge lay in designing an interface that avoids overwhelming first-time users with complex trading lingo or data while also ensuring that experienced investors find the app engaging and feature-rich.
APPROACH
To overcome this challenge, I focused on designing an app that incorporated motion animations to enhance user engagement. Coupled with an emphasis on simplicity, this approach was intended to make the app's functionalities easy to grasp and visually appealing. The goal was to allow users, regardless of their trading experience, to navigate the app effortlessly and understand its features intuitively.
CORE VALUES
Intuitive
Complex apps often require a steep learning curve. My focus is on employing intuitive UX solutions and recognizable UI patterns to expedite the user familiarization process. This approach aims to reduce any initial frustration a user may experience when interacting with the app for the first time.
Accessible
Financial apps can sometimes present a daunting learning curve, particularly for older individuals or those new to the industry. My goal is to break down these barriers and make the app approachable for anyone who wishes to delve into the world of trading and investments.
ENGAGING
In a saturated market of trading and investment apps, creating a unique user experience is key. I strive to design an engaging, visually appealing interface that not only stands out from the competition but also captivates users, making their journey enjoyable and efficient.
WIREFRAMES
At this stage, I've developed mid-fidelity wireframes in line with the project brief requirements. These wireframes serve as a visual representation of the app's features and aid in determining the most user-centric solutions from a design and functionality perspective.
STYLE GUIDE
For the app's visual stylistics, I decided to opt for a dark theme. This choice aims to create a "soft tech-friendly" ambiance, providing a sleek, modern look that's gentle on the eyes, inviting for users, and indicative of a tech-forward approach.
COLORS
The color scheme for the app is both soft and vibrant. Neutral 1, a muted tone, will be used for the card elements to ensure a clean and uncluttered appearance. The traditional colors of red and green will be used to indicate the rise or fall states in the stock market, offering immediate visual cues for users. Blue 1, a striking tone, will serve as an accent color to draw attention to important features or information. Finally, Blue 2, purple, and yellow will be utilized for the chart graph displayed on the homepage, providing an array of colors for visual distinction and user-friendly data representation.
ICONS
Icons have a weight of 2px, round shape, and remain unfilled, exuding timeless elegance.
LOGO CONSTRUCTION
The name of the app is "Stokam". This choice is simple and intuitive, subtly hinting at its purpose related to stock trading. Furthermore, the modern, shortened spelling gives it a techy vibe, aligning with the app's innovative, digital focus.
STORYBOARD
Following the main principles of UI animation—such as maintaining a sense of continuity, guiding user attention, and providing visual feedback—I've created a storyboard that demonstrates how static screens can be enlivened through motion. This motion implementation not only adds visual interest but also facilitates more intuitive user interactions.
01 / SPLASH SCREEN
STAGE 1
STAGE 2
