My Role
Brand Designer
UI Developer
Design Tool
Figma/ illustrator/ photoshop
Development Tool
React.js / Next.js/ Express.js / Firebase / Firebase Authenticatio / Firebase Storage / React-Dom / Stripe API
Oklao website was designed to streamline the shopping experience with a user-friendly interface and robust backend integration. Key features include:
- 1. User Authentication:
- Leveraging Firebase for secure user login and authentication.
- 2. Product Display and Categorization:
- Products are dynamically displayed using a slice from
data.js, allowing for easy categorization and management.
- 3. Checkout and Payment:
- Integrated with Stripe for secure and efficient payment processing, featuring components like
<CheckOutProducts /> and <CardElement />.
- 4. State Management:
- Utilizes a StateProvider and works similarly to Redux, with actions and reducers to manage the application state effectively.
- 5. Modular Component Structure:
- Organized folder structure with dedicated components for various functionalities including header, footer, products, and checkout.
Mobile-first, adaptive layout using CSS media queries for optimal viewing on any device.
Pages:
Routing and Server-Side Rendering
The first part of the diagram focuses on the routing structure, utilizing Next.js's server-side rendering (SSR) feature. This approach significantly improves SEO and initial load times by rendering pages on the server before sending them to the client.
Key components in this section include page.js for defining routes, layout.js for consistent page layout, and StateProvider.js for managing the global state.
Components:
Component Structure and State Management
The second part emphasizes the component architecture and state management to ensure data flow and state consistency.
Each component is designed to handle specific tasks, such as displaying products, managing checkout processes, and rendering UI elements.
The application uses a state provider similar to Redux, with actions and reducers to update and manage the state.
Responsive Design
Explore the Demo:
To get started, follow these steps to set up your testing account:
Option 1: Create a Test Account
Click on "Sign Up" on the demo website. Follow the on-screen instructions to create a unique account using your email and a secure password.
Option 2: Use the Shared Testing Account
Account: testtest@gmail.com
Password: 123456
Card NUmber : 5555 5555 5555 4444
Brand Design
- Our goal was to create a dynamic atmosphere and attract younger customers to Oklao, a Taiwan-based coffee brand. To achieve this, we focused on designing a modern and energetic visual identity that would resonate with this demographic.
Website and Logo before
Market Analysis:
The specialty coffee market is rapidly growing, with younger consumers (ages 18-24) being the primary drivers of this growth. This demographic values not only the quality of the coffee but also the overall experience, including the ambiance of the coffee shop and the brand’s online presence. Younger customers are drawn to brands that offer a blend of authenticity and modernity, with a strong emphasis on aesthetics and storytelling.
- Specialty Coffee Market Size, Share & Trends Analysis Report By Age Group (18-24, 25-39, 40-59, Above 60)
Armed with these insights, I set out to redesign Oklao’s brand identity to better attract younger customers. Our approach included:
- 1. Logo Redesign:
- Creating a modern and dynamic logo that reflects Oklao’s energy and appeal.
- 2. Color Palette:
- Developing a lively color palette that conveys energy and freshness, appealing to the youthful market.
- 3. Typography Selection:
- Choosing typography that is both stylish and readable, aligning with contemporary design trends.
4. Brand Pattern:
Establishing a cohesive brand style that ensures consistency across all touchpoints, from packaging to social media.
- By focusing on these elements, we aimed to create a brand identity that not only attracts younger customers but also fosters a lasting connection with them. The new visual identity of Oklao is designed to be vibrant, engaging, and reflective of the values and preferences of the modern coffee consumer.
