Gallery

241

Brew & Book app design

Designing for all users mobile applications

Leslie Alexander Raihan Suman
Date 12 March 2024

LIKE THIS 241

VIEW PROJECT

Client: Leslie Alexander

Brew & Book offers a unique and convenient solution for users who enjoy the combined experience of coffee and books. This mobile app allows users to browse and order from curated menus and book selections, facilitating seamless dining experiences from anywhere. With an intuitive interface, Brew & Book aims to streamline the ordering process, making it easy to enjoy your favorite brews and reads with just a few taps.

Role and Responsibilities

In this project, I was responsible for a range of UX/UI activities, including: UX research, UI design, usability testing, wireframing (from low to high fidelity), prototyping, and conducting user interviews.

Table Booking Challenges

Real-time availability, varied slots.
Clear details (location, cuisine, etc.).
Party size, modifications, bill split.
Booking confirmation, changes.
Filtering by criteria (cuisine, price).
Directions integration.

Coffee Ordering Challenges

Options (milk, sugar), error prevention.
Accurate display, updates.
Order correct, review before submit.
Options, logistics, tracking.
Secure, options, tipping.
Programs, tracking.

Problem Statement

Recognizing that users value their time, the app provides an efficient way to book restaurant tables, minimizing the steps required to secure a reservation and ensuring a seamless dining experience. Understanding that coffee lovers often seek speed and efficiency, the app allows for quick and easy online ordering, enabling users to customize their drinks and place orders in a few taps, saving them valuable time.

Strategy

Design: Deep user understanding through research, personas, and journey mapping.
Business Alignment: Ensuring design supports business objectives (conversions, satisfaction, loyalty).
Clear Problem Definition: Identifying and solving user pain points.
Effective Information Architecture: Logical content organization for easy navigation.
Smooth Interaction Design: Intuitive user flows and controls.
Consistent Visual Design: Appealing UI with a defined design system.
Iterative Usability Testing: User feedback for continuous improvement.
Inclusive Accessibility: Designing for all users, adhering to accessibility standards.

Double Diamond Design Process

_____________________

Phase 1 – Discovery

I conducted user interviews to start the process with 5 candidates. Here is what I discovered,

Competitor Feature Comparison

User persona 1

User persona 2

User flow

_____________________

Phase 2 – Define

I defined the Problem statement, Prioritized opportunities, and Set project goals

Restaurant Table Booking Problems

Availability Issues
I tried to book a table for 4 people, but the online system shows no availability, even though I suspected there might be some open tables.
The online booking system shows available times, but when I arrive at the restaurant, they claim they have no record of my reservation.

App Functionality
The restaurant’s website keeps crashing when I try to complete my reservation.
The mobile app won’t load the calendar of available days.

Reservation Specifics
I am trying to change my reservation, but the website will not let me.

Communication Problems
I made an online reservation, but I never received a confirmation email.
I tried to call the restaurant to confirm my online booking, but no one answered.

Online Coffee Ordering Problems

Menu/Customization:
The online menu doesn’t show all the available coffee options or customizations.
I find difficulties in adding a specific milk alternative to my latte, but the online ordering system doesn’t have that option.

Order Accuracy/Pickup
I ordered a hot coffee online, but it was cold when I picked it up.
The app gave me the wrong pickup time, and my coffee was sitting out for a long time.

App Issues

Restaurant Table Booking:
Availability Accuracy issue found
Mobile Usability is not good
Special Request Handling

Online Coffee Ordering:
The coffee shop’s app is slow and glitchy.
Order Accuracy problem
Payment Reliability need to solve
Menu Customization option needed

_____________________

Phase 3 – Develop

Wireframing, prototyping, and testing

Wireframes

These mid-fidelity wireframes illustrate the Brew & Book app’s layout and functionality, detailing the user flow for browsing books, ordering beverages, and managing reservations.

Typography

The Inter font is an excellent choice for this app’s typography because it prioritizes legibility and clarity, which is essential for users who need to quickly process information on their screens. Its clean, sans-serif design ensures that text remains readable across various screen sizes and resolutions, reducing eye strain and improving the overall user experience. This is particularly important for an app where users will be viewing details such as locations, schedules, and booking information. Inter’s modern and neutral appearance also helps to create a sleek and user-friendly interface, aligning well with contemporary design principles.

Color style

The Brew & Book app’s color palette creates a sophisticated and inviting atmosphere. The combination of deep blacks and a vibrant secondary color, likely a rich green, evokes the cozy yet modern ambiance of a contemporary bookstore or coffee shop. This is balanced by the use of neutral grays, which provide a calming backdrop and ensure that the vibrant accent color doesn’t overwhelm the user. The overall effect is a visually appealing palette that feels both contemporary and comfortable, perfectly aligning with the app’s purpose of providing a relaxing space to browse books and order refreshments.

_____________________

Phase 4 – Deliver

Visual Design

The visual design of the Brew & Book app aims to create a welcoming and modern digital space that reflects the ambiance of a contemporary bookstore or coffee shop. The color palette centers around deep blacks and a vibrant secondary color, creating a sophisticated and energetic feel, while ensuring strong contrast for optimal readability. Neutral grays provide a balanced backdrop, preventing visual clutter and maintaining a clean, user-friendly interface.

Thank you for scrolling!

Say hello: [email protected]

Video

129

SkyRoute Bus Ticket Booking app

Sky Rout offers a seamless and intuitive interface, making bus ticket booking quick and stress-free. Experience a smooth journey from search to seat selection.

LIKE THIS 129

VIEW PROJECT

1. Project Overview

Sky Rout is a mobile application designed to streamline the process of booking bus tickets. It provides users with a convenient and efficient way to search, select, and purchase tickets for various bus routes. The app aims to simplify travel for frequent bus users, individuals without access to personal vehicles, and travelers seeking affordable transportation options.

Strategy

The core strategy for Sky Rout is to establish a user-friendly and efficient platform that revolutionizes the bus ticket booking experience. My core steps are:

The Design Approach
Project Challenge
The Solution

Design approach

The design approach for Sky Rout centers on a user-centered methodology. This means prioritizing intuitive navigation, clear information architecture, and a visually appealing interface. By focusing on the user’s journey, we aim to simplify the booking process and empower users to manage their travel needs effectively.

Project Challenge:

The primary challenge was to create a digital solution that addresses the common pain points associated with traditional bus ticket booking, such as complex interfaces, lack of real-time information, and limited payment options. Sky Rout needed to stand out by offering a more streamlined, transparent, and convenient experience.

The Solution:

Sky Rout is a mobile application designed to simplify bus ticket booking. The solution delivers a user-friendly experience through intuitive navigation, clear information, and secure transactions.

Client

Teresa clinton

Let’s see full design process

Project goal

The primary goal of this project was to design a user-friendly mobile application that simplifies and streamlines the bus ticket booking process. This involved creating an intuitive interface that allows all the users accessibility to efficiently search for routes, compare options, select seats, and complete transactions.

Improving the overall user experience compared to existing bus ticket booking methods.
Increasing user engagement and satisfaction.
Providing a reliable and secure platform for ticket purchases.

Target Audience

Frequent bus travelers: For daily commutes; they prioritize convenience and reliability.
People without personal vehicles: Students, urban dwellers, and budget travelers needing occasional transport.
Travelers seeking affordability: For leisure, family visits, and cost-effective travel.
Tech-savvy users: Want seamless digital experiences, mobile ticketing, and personalized features.
Elderly/less mobile users: Need simplified, accessible interfaces with clear instructions.

Research

User surveys
Interviews with bus travelers
Competitive analysis of existing bus booking apps

User needs and pain points

Need for a quick and easy booking process
Wheel chair availability
Desire for clear and reliable information
Importance of secure payment options
Need for real-time bus tracking

Persona 1

Persona 2

Competitor feature comperison

Information Architecture

The app follows a logical flow, starting with onboarding and login/signup. Key features are organized into four main sections:

My Trip: Users can view their tickets and track buses.
Notification: Users can view the notifications.
Search Ticket: Users can search for tickets, filter the results, view time and road options, select seats, add details, preview and make payments, and get confirmation.
Profile: Users can view/edit their profile information.

The booking process is linear, taking users through the necessary steps to complete a purchase.

Low-fidelity Wireframes

These low-fidelity wireframes outline the user flow and key screen layouts for the SkyRoute bus ticket booking app. They illustrate the app’s structure and functionality, focusing on a user-centered design approach

Mid-fidelity wireframes

These mid-fidelity wireframes outline the user flow and key screen layouts for the SkyRoute bus ticket booking app. They illustrate the app’s structure and functionality, focusing on a user-centered design approach

Color style

The color palette chosen for SkyRoute effectively balances aesthetics and functionality. The combination of a dark background with a vibrant green accent creates a modern and energetic feel, while ensuring sufficient contrast for readability, which is crucial for usability. The neutral grays provide a subtle backdrop for text and other UI elements, preventing visual clutter and maintaining a clean, user-friendly interface. This thoughtful selection of colors not only aligns with contemporary design trends but also enhances the overall user experience by making the app visually appealing and easy to navigate.

Typography

The choice of the Inter font family for typography further enhances the app’s modern and user-friendly design. Inter is a versatile sans-serif free font known for its excellent readability on screens, which is crucial for an app like SkyRoute where users need to quickly scan and process information such as bus schedules, ticket details, and booking confirmations. Its clean and neutral appearance ensures that the text remains legible and visually appealing across various screen sizes and resolutions, contributing to a seamless and comfortable user experience.

Visual design

Sky Rout’s design encompasses UI/UX design and art direction, resulting in a visually engaging and highly functional app. The design is more than just a plan; it’s a carefully crafted specification for a user experience that is both efficient and enjoyable.

SkyRoute’s visual design effectively prioritizes clarity and a modern user experience. The bold color palette and clean typography create a contemporary feel, while the consistent spacing and alignment of elements ensure ease of use. This focus on a clean, modern aesthetic contributes to a positive initial impression and sets the stage for a smooth and efficient booking process. The design also aligns with iOS guidelines by using standard UI elements, ensuring consistency across the platform, and providing a familiar experience for iOS users. Additionally, the design adheres to WCAG guidelines by ensuring sufficient color contrast for readability.

Outcomes:

The design effectively met the initial project goals and objectives, delivering positive results.

Quantifiable improvements were achieved, such as an 80% decrease in booking time (compared to competitor apps) and a 60% reduction in user errors in the cancellation flow.

Lessons Learned:

Thorough user research at the beginning of the project is crucial for informing effective design decisions.

Iterative testing, with continuous incorporation of user feedback, is essential for optimizing the user experience.

Thank you for scrolling..

External Link

112

CDSFC Website Redesign.

CDSFC Website Redesign.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 112

VIEW PROJECT

Heska Corporation HSKA, Tandem Diabetes Care, Inc. TNDM, Credit Suisse Group CS,Zalando SE ZLNDY and Las Vegas Sands LVS are a few such toxic stocks.Screening Criteria

Image

100

Graphic Design.

Graphic Design.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 100

VIEW PROJECT

Strategy

A strategy is a general plan to achieve one or more long-term.

The Design Approach
Project Challenge
The Solution

Design

UI/UX Design, Art Direction, A design is a plan or specification for art.

Project Challenge
The Design Approach
The Solution

Client

ThemeForest

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commod viverra maecenas accumsan lacus vel facilisis. ut labore et dolore magna aliqua.

There are always some stocks, which illusively scale lofty heights in a given time period. However, the good show doesn’t last for these overblown toxic stocks as their current price is not justified by their fundamental strength.

Toxic companies are usually characterized by huge debt loads and are vulnerable to external shocks. Accurately identifying such bloated stocks and getting rid of them at the right time can protect your portfolio.

Overpricing of these toxic stocks can be attributed to either an irrational enthusiasm surrounding them or some serious fundamental drawbacks. If you own such bubble stocks for an inordinate period of time, you are bound to see a massive erosion of wealth.

However, if you can precisely spot such toxic stocks, you may gain by resorting to an investing strategy called short selling. This strategy allows one to sell a stock first and then buy it when the price falls.

While short selling excels in bear markets, it typically loses money in bull markets.

So, just like identifying stocks with growth potential, pinpointing toxic stocks and offloading them at the right time is crucial to guard one’s portfolio from big losses or make profits by short selling them. Heska Corporation HSKA, Tandem Diabetes Care, Inc. TNDM, Credit Suisse Group CS,Zalando SE ZLNDY and Las Vegas Sands LVS are a few such toxic stocks.Screening Criteria

Standard

105

Logo and Brand style guide design.

Logo and Brand style guide design.

I developed a comprehensive logo and brand style guide for YS Engineering, encompassing color palette, typography, and iconography

LIKE THIS 105

VIEW PROJECT

Logo Design

I created a letter based logo design for YS Engineering

Sketches
Degital design
Finalize

Style Guide Design

Full brand style guide included Logo, color, Typography and iconography etc.

Research for color
Typography
Finalaize to deliver

Client

Susanne Geier

I was commissioned by Susanne Geier to design a logo for her fiber optics and solar company. She sought a modern, yet clean aesthetic, conveying international presence and seriousness, and provided an AI-generated example as a reference.

Finally, she was so happy with the final result. Scroll to see all the details.

Thank you so much for your time.

Image

Class app design

Class app design

The Class app is a comprehensive tool for students, enabling them to view schedules, assignments, and results, and to connect with teachers and university officials.

LIKE THIS 86

VIEW PROJECT

Strategy

Create a user-friendly app that simplifies administrative tasks for teachers, promotes student engagement, and facilitates seamless communication with parents.

The Design Approach
Project Challenge
The Solution

Design

As a UX/UI designer, my process is centered around creating user-friendly and visually appealing digital experiences.

Research
Design
Implement
Evaluate

Client

For Research

The Class app is designed to streamline and enrich the academic journey of students by offering a centralized platform where they can effortlessly manage their class schedules, track assignments, and view academic results. In addition to organizing essential academic information, the app fosters smooth and effective communication between students, teachers, and university officials, ensuring everyone stays connected and informed throughout the academic year.

User flow

The user flow for the Class app is a key element in its design, ensuring an intuitive and efficient experience for students. The app is designed to allow students to easily navigate to their class schedules, view assignment details, check their results, and use the communication tools to connect with teachers and university officials. This intuitive flow is established from the mid-fidelity wireframes, which prioritize a clear visual hierarchy to help students quickly find the information they need and complete their tasks.

Lofidelity wireframes

These low-fidelity wireframes provide a foundational outline of the Class app’s user interface and navigation. They illustrate the basic structure and layout of key screens, showing how students will access essential features such as class schedules, assignments, results, and communication tools for connecting with teachers and university officials. The wireframes focus on presenting the core functionality and information hierarchy, emphasizing a user-centered approach to ensure a clear and intuitive experience.

Mid-fidelity wireframes

These mid-fidelity wireframes offer a more refined representation of the Class app’s user interface than low-fidelity wireframes. While still focusing on structure and layout, they incorporate more specific details, such as basic typography and UI elements. They provide a clearer sense of how students will interact with the app’s features, including class schedules, assignments, results, and communication tools, and establish a visual hierarchy for the interface.

Standard

190

Remindly app full case study

Remindly app full case study

Remindly is now an exceptional app. Its personalized reminders, seamless integration, and user-friendly interface make it a powerful tool for managing tasks and events.

LIKE THIS 190

VIEW PROJECT

Strategy

Remindly’s strategy is to provide timely, personalized reminders and integrated support, including gift suggestions, shopping locations, and event directions, to help users act on their commitments and enhance their relationships

Personalized Reminders:
Seamless Integration
User-Friendly Interface

Design

Here are the general design process

Research: Understand user needs
Design: Create solutions and prototypes.
Implement: Build and launch the designed solution.
Evaluate: Assess the solution’s effectiveness and impact.

Client

Josh Baron

To cater to diverse user preferences and usage scenarios, I designed both light and dark versions of the Remindly app. The light version offers a bright and airy interface, suitable for daytime use, while the dark version provides a comfortable viewing experience in low-light conditions, reducing eye strain and improving battery life. Both versions maintain the app’s core user-friendly design and functionality, ensuring a consistent and enjoyable experience across different environments.

Heuristic Valuation

This document presents a heuristic evaluation of the Remindly app, a reminder application. The evaluation was conducted on April 10, 2025, using an iPhone 13 Pro Max. The evaluation focused on the task of setting up a reminder within the app.

The evaluation identifies several usability issues, including:

The login form including a “Division Code” field, which is not used in many countries.

Mandatory login/registration preventing users from previewing the app’s features.

The evaluation was based on Nielsen’s 10 Usability Heuristics, and the document details the following:

Evaluator: You, Raihan Uddin Suman

Device and OS: iPhone 13 Pro Max, iOS

Website/App: Remind

Task/Feature: A reminder app setup to finish the task

For each identified issue, the evaluation provides a severity rating (ranging from 0 to 4) and a recommendation for improvement. For example, the recommendation for the login/signup button issue is to “Use color combinations that meet WCAG guidelines to ensure readability for all users, including those with visual impairments

The evaluation demonstrates a systematic approach to identifying and prioritizing usability issues within the Remindly app. The findings and recommendations can be used to inform design improvements and enhance the overall user experience.

This heuristic evaluation showcases:

Mandatory login/registration prevents users from exploring app features before signing up.

The app includes too many unnecessary or rarely used features.

User Personas

User interviews helped me understand busy individuals’ needs for timely reminders, revealing pain points like forgetting important tasks. This led to creating detailed personas that highlighted user motivations and frustrations. By designing for these specific personas, I ensured Remindly’s features directly addressed user needs, making it intuitive and effective.

Wireflows

Wireflows were crucial in designing Remindly, acting as a dynamic blueprint. By combining wireframes with user flow diagrams, they allowed me to visualize how users would navigate through the app, screen by screen, and interaction by interaction. This integrated approach helped identify potential dead ends or confusing pathways early on, ensuring a seamless and intuitive user experience for setting, managing, and dismissing reminders.

Typography

Choosing SF Pro Text for Remindly provides excellent legibility and a native feel for Apple users. Its systematic weights and sizes create a clear hierarchy, making information easily scannable and the app highly intuitive and readable.

Logo design

This logo for Remindly cleverly combines the initial “R” with a prominent bell icon, instantly communicating the app’s function of reminders and notifications. The clean, solid shapes and harmonious integration within the circular frame create a memorable and effective visual identity. The choice of a soft blue against a dark background suggests reliability and clarity.

High Fidelity Wireframes

Hi-Fi wireframes for Remindly are detailed blueprints that simulate the final app experience. They incorporate specific typography, color, actual content, and interactive elements, allowing users to “click through” and experience the app flow precisely. This high level of detail is crucial for realistic user testing, clear communication among teams, and refining the visual design before development, ultimately minimizing guesswork and maximizing efficiency.

Designing Remindly with both light and dark mode versions is crucial for several reasons, significantly enhancing user experience and accessibility:

User Preference: Allowing personalization to individual comfort.

Reduced Eye Strain: Optimizing readability in diverse lighting.

Battery Efficiency: Saving power on OLED screens.

Accessibility: Catering to varied visual needs.

Modern Aesthetic: Signifying a contemporary, user-centric design.

Signup process (Light Version)

Signup process (Dark Version)

All screens (Light)

All screens (Dark)

Thank you for scrolling..

To see the full project prototype click view project button

Gallery

261

Online Golf Playing App Design.

Online Golf Playing App Design.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 261

VIEW PROJECT

Strategy

A strategy is a general plan to achieve one or more long-term.

The Design Approach
Project Challenge
The Solution

Design

UI/UX Design, Art Direction, A design is a plan or specification for art.

Project Challenge
The Design Approach
The Solution

Client

ThemeForest

While short selling excels in bear markets, it typically loses money in bull markets.

Here is a winning strategy that will help you to identify overhyped toxic stocks:

Most recent Debt/Equity Ratio greater than the median industry average: High debt/equity ratio implies high leverage. High leverage indicates a huge level of repayment that the company has to make in connection with the debt amount.

Image

247

Lumina Jewellery shopping app design

Lumina Jewellery shopping app design

Lumina is a mobile app designed to provide users with a seamless and engaging jewelry shopping experience. The app offers a curated selection of high-quality pieces, combining elegant design with user-friendly functionality.

LIKE THIS 247

VIEW PROJECT

Strategy

Here are 3 strategy points for the Lumina app, along with a one-paragraph description

Focus on a curated selection of high-quality jewelry
Prioritize a seamless and engaging user experience
Combine elegant design with user-friendly functionality

Design

My design process for Lumina

User Research
Design Solutions
Visual Language
Implementation and Evaluation

Client

Kristin Watson

The Lumina app is strategically positioned to capture the market segment that values both high-quality jewelry and a sophisticated shopping experience. By offering a curated selection of pieces and emphasizing a seamless, engaging user journey, Lumina aims to foster customer loyalty and stand out from competitors. The app’s design philosophy centers on the fusion of elegant aesthetics and user-friendly functionality, ensuring that customers can effortlessly find and purchase the perfect piece of jewelry.

My design process for Lumina is as follows:

I collaborated with developers to ensure that the design was implemented accurately and effectively. I also conducted user testing and gathered feedback to evaluate the design’s effectiveness and identify areas for improvement. This iterative process of design, implementation, and evaluation ensures that the final product meets both user needs and business goals.

I translated research findings into tangible design solutions. This included creating user flows, wireframes, and prototypes to visualize the user journey and interaction patterns. I paid close attention to information architecture, ensuring that content is organized in a clear and intuitive manner.

I began by deeply understanding the target audience and project goals. This involved conducting user research, analyzing market trends, and gathering insights to inform design decisions.

I developed the visual language of the product, including color palettes, typography, and imagery. I strove to create a cohesive and modern aesthetic that aligns with the brand and enhances the user experience. I adhered to accessibility guidelines (such as WCAG) and platform-specific design principles (such as iOS guidelines) to ensure that the final product is usable by everyone.

All screens

Excited to share! I’ll be uploading all the screen designs and design stage elements soon.” “Coming soon: A complete look at the screen designs and all design stage elements.

External Link

179

Minimalist Logo Design

My freelance career on Fiverr & Upwork , has allowed me to create over 1800 unique logos, honing my design skills across a vast array of client needs.

LIKE THIS 179

VIEW PROJECT

With outstanding logo design experience, I consistently deliver unique, impactful, and memorable brand identities that resonate with target audiences and effectively communicate core values. My expertise spans conceptualization, iterative refinement, and delivering polished designs that stand out in competitive markets.