From Medium-Fidelity to a Polished Hi-Fidelity Prototype

 

HCI Blog 5

Building the hi-fidelity prototype for DriveShare felt like the moment where everything finally came together—our user research, the medium-fidelity sketches, and all the messy feedback we collected in between. This stage wasn’t just about making the app look better; it was about understanding what makes an interface trustworthy, intuitive, and good enough for real people to use. Using Nielsen’s 10 Usability Heuristics as my guide, this was the first time I felt like a real product designer—someone who listens, iterates, and reshapes a design based on evidence, not assumptions.

This blog reflects on how I evaluated the medium-fidelity design, the usability flaws we uncovered, and how the DriveShare experience transformed into a cleaner, more reliable prototype. It also touches on what this taught me about UX, and how these lessons shape my future as an AI product engineer.

1. Evaluating the UI with Nielsen’s Heuristic Evaluation

To evaluate our medium-fidelity prototype, I went through each screen using Nielsen’s 10 heuristics—visibility of system status, consistency, error prevention, recognition over recall, and so on. I treated the process like a formal UX audit: slow, intentional, and brutally honest.



Right away, I noticed how strongly the heuristics exposed issues that weren’t obvious before:

The most challenging heuristics

  • Consistency & Standards (H4):
    Our renter and homeowner flows looked like they came from two different apps. Colors were inconsistent, spacing varied, and components didn’t feel unified.
    As the evaluator, it was surprising how much inconsistency can quietly damage trust.

  • Error Prevention (H5):
    Homeowners could post a driveway with no photo, no safety information, and incomplete availability, which could lead to real-world risks. Until the heuristic evaluation, I underestimated how far error prevention needs to go.

  • Recognition, Not Recall (H6):
    Filters were hidden inside menus, making renters forget they even existed. This was one of those “aha” moments—design shouldn’t demand memory.

Unexpected usability flaws

According to our internal report , some issues genuinely surprised me:

  • There was no indicator of an active reservation (H1), which could confuse renters.

  • Icons didn’t match mental models (H2)—one tester thought the filter icon was a settings button.

  • There was no way to cancel booking mid-flow (H3), which is the opposite of user freedom.

These weren’t tiny issues—they affected trust, clarity, and the basic rhythm of using the app.

How the evaluation improved the design

The heuristic evaluation forced us to step back and rethink the whole structure of DriveShare. Instead of changing colors or icons randomly, every decision became purposeful. For example:

  • A persistent “Active Reservation” banner was added.

  • Industry-standard icons replaced ambiguous ones.

  • A full cancellation path was added to every screen.

  • Homeowners now must upload photos, safety tags, and availability before posting.

This stage became the backbone of our final design.

2. Refining the Design Based on Evaluation

After identifying the heuristic violations, we refined the UI into a much more coherent, trustworthy, and polished hi-fidelity prototype. The changes were not cosmetic—they reshaped the user experience from the ground up.

Major improvements we implemented

From the report :

  • Unified Design System:
    We built a color palette, spacing scale, typography system, and consistent components to bring both flows under one visual language.

  • Differentiated User Paths:
    We completed both flows end-to-end:

    • Renter: Search → Map → Filters → Details → Booking → Confirmation

    • Homeowner: List Driveway → Upload → Safety Tags → Availability → Pricing → Dashboard

  • Safety Features:
    Added verified badges, lighting indicators, security cameras, and neighborhood safety scores to increase trust.

  • Better Navigation & Error Handling:
    Added cancel buttons, better microcopy, loading animations, and error explanations.

  • Recognition-Friendly UI:
    Persistent filter chips on the map screen solved the recall issue.

Balancing aesthetics with usability

The hi-fidelity design brought softer blues, clean spacing, and better visual hierarchy. But while aesthetics mattered, I kept returning to this idea: beautiful is useless if usability is weak.
So every design choice had to pass a test:

  • Does it reduce friction?

  • Does it help the user understand what’s happening?

  • Does it make the app feel safer or more reliable?

Before-and-after examples



The difference between our medium-fi and hi-fi screens is almost shocking.
For example, the early renter booking screen was cluttered and visually inconsistent. In contrast, the hi-fi version features:

  • Clean calendar interface

  • Clear price per hour

  • Consistent icons

  • Legible time picker

  • A focused “Confirm Booking” CTA

These changes turned confusion into clarity.



3. What I Learned from the Process

This project taught me more about UX than any textbook. Here are the biggest lessons I walked away with:

1. Users need clarity more than creativity.

I used to think creative screens made a better app. The heuristic evaluation showed the opposite: clear, predictable patterns make users feel safe.

2. UX is about removing friction, not adding features.

Deleting unnecessary elements often improved usability more than adding new ones.

3. Evaluation changes how you see your own work.

The medium-fi prototype felt “good enough” before the evaluation. After applying the heuristics, I couldn’t unsee the problems. This changed how I’ll design forever.

4. Trust is the core of any sharing-economy platform.

DriveShare involves parking in a stranger’s driveway—safety cues and verification aren’t optional; they are essential.

4. How This Shapes My Career as a Digital Product Designer

This project didn’t just improve DriveShare—it taught me how to think like a designer.

How I’ll apply this going forward

  • I now understand how to apply systematic evaluation to any interface, not rely on intuition.

  • I’ll build future AI products with clear flows, transparent states, and strong error messaging.

  • I’ll focus on trust, clarity, and minimal design when building real-world applications.

Key takeaways for my career

  • Design is iterative, not linear.

  • Users reveal what designers overlook.

  • Heuristics provide structure when intuition isn’t enough.

  • Polished design requires both empathy and discipline.

This experience confirmed something important about my future: I want to build digital products—especially AI-powered ones—that feel natural, supportive, and truly human-centered.

Conclusion

Designing DriveShare from medium-fi to hi-fi was more than an assignment. It was a transformation in how I understand usability, trust, and user-centered design. It taught me to evaluate honestly, iterate intentionally, and design responsibly. And most importantly, it taught me that great interfaces are not just beautiful—they are thoughtful, predictable, and empowering.

Comments

Post a Comment

Popular posts from this blog

The Final Chapter

Image
  HCI Blog 6 – The Final Chapter: If Blog 1 was called A Beginning , then this one feels like A Becoming . Somewhere between the paper prototypes, the late-night Figma edits, the interviews with sleepy commuters, and the endless “HMW” questions, something shifted in me. It’s funny—HCI wasn’t just a class; it became a mirror, a map, and sometimes a punch in the stomach reminding me, “Design is not about you. It’s about them.” This final reflection is not an essay. It’s a letter to the version of me who walked into this course on the first day, half-curious, half-confident, and completely unaware of how much this journey would change him. Dear Rustam (from 3 months ago), You had no idea what you were walking into. You thought HCI was going to be “another design course.” You thought UX decisions were mostly about aesthetics. You thought you already knew how users think because you are a user. You were wrong—and that’s what made this course so important. There will be mome...
Read more

Bringing Ideas to Life

Image
  Introduction In my previous blog, I reflected on how user research helped my team rethink our direction and move from an AR Cooking Assistant to a more practical, everyday concept: DriveShare —a peer-to-peer parking app that allows homeowners to rent out their driveways to drivers looking for affordable, reliable parking. This blog is about the creative process that followed—how our team transformed research findings into a visual story through brainstorming, design planning, and finally, our DriveShare concept video . The journey taught me that bringing an idea to life isn’t only about visuals or technology—it’s about empathy, storytelling, and making the design feel real. From Idea to Solution: Shaping the Concept After completing our user interviews, we discovered that trust and safety mattered as much as cost. That finding shifted how we defined DriveShare’s core purpose: not just to make parking cheaper, but to make it predictable and secure for both drivers and homeo...
Read more