portfolio-site/index2.html at main · pratiikkk-kumar/portfolio-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project Details | Zest Food App</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link rel="stylesheet" href="style2.css" />
  </head>
  <body>
    <nav class="navbar">
      <div class="nav-container">
        <a href="index.html#home" class="logo">Pratik Kumar Sethi</a>
        <ul class="nav-links">
          <li><a href="index.html#home" class="nav-link">Home</a></li>
          <li><a href="index.html#about" class="nav-link">About</a></li>
          <li><a href="index.html#projects" class="nav-link">Projects</a></li>
          <li><a href="index.html#contact" class="nav-link">Contact</a></li>
        </ul>
        <div class="hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </nav>

    <section id="project-detail">
      <div class="container">
        <a href="index.html#projects" class="btn btn-back">
          <i class="fas fa-arrow-left"></i>
          Back to Projects
        </a>

        <div class="project-content">
          <h2 class="section-title">Zest - A Food Ordering App</h2>

          <p class="fade-in">
            Zest is a high-fidelity UI concept for a food delivery app, designed
            from the ground up to tackle common user frustrations. The core
            problem it solves is the lack of transparency in pricing and payment
            that plagues many food apps. As the sole UI/UX designer, I handled
            the entire design process, focusing on creating a polished,
            intuitive, and honest user experience.
          </p>

          <div class="image-wrapper fade-in">
            <img
              src="imgs/allZest.jpg"
              alt="Zest App UI Collage"
              onerror="this.src='https://placehold.co/1000x600/0A192F/FFFFFF?text=Image+Not+Found'"
            />
          </div>

          <h4>The Problem:</h4>
          <p class="fade-in" style="text-align: left">
            The food delivery market is crowded, but many apps still fall short
            of user expectations. I identified three core problems I wanted to
            solve with Zest:
          </p>
          <p class="fade-in" style="text-align: left">
            <strong>1. Hidden Fees:</strong> Users are constantly frustrated by
            seeing one price on the menu, only to have taxes, service fees, and
            delivery charges added at the very last step.
          </p>
          <p class="fade-in" style="text-align: left">
            <strong>2. Accidental Purchases:</strong> A single, poorly-placed
            "Confirm Order" button can easily be mis-tapped, leading to a
            frustrating and often non-refundable accidental purchase.
          </p>
          <p class="fade-in" style="text-align: left">
            <strong>3. Vague Timelines:</strong> Unreliable delivery estimates
            leave users guessing and break trust with the platform.
          </p>

          <h4>Key Design Decisions & Solutions:</h4>
          <p class="fade-in" style="text-align: left">
            To solve these problems, I focused on a few key design solutions
            that define the Zest experience:
          </p>
          <p class="fade-in" style="text-align: left">
            <strong>Problem:</strong> Users hate surprise fees and hidden
            charges at checkout. <br />
            <strong>Solution:</strong> I implemented
            <strong>True Price Visibility</strong>. The app clearly states that
            the price you see on a food item is the final, tax-inclusive amount.
            This means no surprises at checkout, which builds immediate trust
            and confidence in the app.
          </p>

          <div class="image-wrapper medium fade-in">
            <img
              src="imgs/foodSingle.jpg"
              alt="Zest App Chicken Biryani Details"
              onerror="this.src='https://placehold.co/400x800/0A192F/FFFFFF?text=Image+Not+Found'"
            />
          </div>

          <p class="fade-in" style="text-align: left">
            <strong>Problem:</strong> A simple tap can lead to an expensive,
            accidental purchase. <br />
            <strong>Solution:</strong> Instead of a standard button, I designed
            a <strong>slide-to-pay mechanism</strong>. This is a deliberate,
            two-step action that makes it impossible to "mis-click" and confirm
            a payment. It ensures that every order is intentional, giving users
            an extra layer of security.
          </p>

          <div class="image-wrapper medium fade-in">
            <img
              src="imgs/payScreen.jpg"
              alt="Zest App My Orders and Checkout"
              onerror="this.src='https://placehold.co/400x800/0A192F/FFFFFF?text=Image+Not+Found'"
            />
          </div>

          <p class="fade-in" style="text-align: left">
            <strong>Problem:</strong> Vague or inaccurate delivery times are a
            top user complaint. <br />
            <strong>Solution:</strong> The Zest UI is built to provide
            <strong>clear and reliable delivery time estimates</strong> upfront.
            This focus on predictability allows users to manage their
            expectations and schedules, making for a much less stressful
            ordering experience.
          </p>

          <div class="image-wrapper medium fade-in">
            <img
              src="imgs/orderedScreen.jpg"
              alt="Zest App Home Screen with Discount"
              onerror="this.src='https://placehold.co/400x800/0A192F/FFFFFF?text=Image+Not+Found'"
            />
          </div>

          <h4>Takeaways & Next Steps:</h4>
          <p class="fade-in" style="text-align: left">
            <strong>What I Learned:</strong> This project reinforced that in-app
            design, <em>how</em> you build trust is just as important as
            <em>what</em> you build. Features like the slide-to-pay and
            all-inclusive pricing aren't just small details; they are
            fundamental to a positive user experience.
          </p>
          <p class="fade-in" style="text-align: left">
            <strong>Next Steps:</strong> If I were to continue developing Zest,
            my first step would be to conduct user testing on the slide-to-pay
            flow to gather real-world feedback. After that, I would focus on
            designing the "live order tracking" feature to further enhance the
            app's commitment to transparency.
          </p>

          <h3>Thank You for Exploring Zest!</h3>
        </div>
      </div>
    </section>

    <footer class="footer">
      <div class="container">
        <p>&copy; 2025 Pratik Kumar Sethi. All Rights Reserved.</p>
      </div>
    </footer>

    <script src="script2.js"></script>
  </body>
</html>