APP DESIGN, PROTOTYPE & CODE

PROBLEM & SOLUTION

Fake reviews and bots make online shopping frustrating. The solution: A safe space with real users & reviews plus a clean design for more clarity to find great products.

TEAM & RESPONSIBILITIES

In a team of two, where my teammate focused more on the coding part, I led research, design, and prototyping/testing phases, using the design thinking process – #Double Diamond . I incorporated the #ISO’s 9241-110 dialogue principles and #Don Norman's fundamental design principles as well as the #Heuristics by Jakob Nielsen . Alongside the prototype, we built parts of the app using Ionic, web scraping, and Firebase OTP. (University project)

Design System Diagram

I. EMPATHIZE & DEFINE

Problem: Distrust in Online Reviews

UEQ Icon 1 UEQ Icon 2

QUESTIONNAIRE BASED ON THE UEQ

Analysis of average values and standard deviations for each dimension.

Reliability Mean = –1.1 (SD = 0.7) → indicates low perceived trustworthiness.

Clarity Mean = +1.3 (SD = 0.6) → shows strong desire for transparency.

Efficiency Mean = +0.4 (SD = 0.8) → moderate ease of use.

Interview Icon 1 Interview Icon 2

USER INTERVIEWS

Audio recordings transcribed. Affinity mapping for clustering central problems.
  • Users do not trust current reviews and often doubt their authenticity.
  • A “safe space” for online shopping is perceived as a great added value.
  • Verification of reviews and users could greatly increase trust.
Design System Diagram

RESEARCH RESULT

Yes, it’s a real human problem. Users demand more transparency and trustworthiness for online reviews and e-commerce platforms overall.

II. IDEATE, PROTOTYPE & TEST

TEST THE DESIGN

HIGH-FIDELITY PROTOTYPE

Interview Icon 1 Interview Icon 2

Usability testing with mixed methods: Eyetracking & Thinking Aloud + SUS & AttrakDiff.

SUS (System Usability Scale)

Mean SUS score 84/100 → indicates high usability and ease of navigation.

“Navigation felt intuitive and tasks were easy to complete.”

“I could find what I needed without getting lost or confused.”

Design System Diagram

AttrakDiff (User Experience / Aesthetics)

Hedonic Quality (stimulation & motivation) Mean = +1.8/3 → users enjoyed interactive features like “Spotlights” and “Glorified Products”.

Pragmatic Quality (efficiency & controllability) Mean = +1.4/3 → app perceived as functional and responsive.

Attractiveness Mean = +2.0/3 → design considered professional, appealing, and modern.

Design System Diagram

EYETRACKING & THINKING ALOUD

Problem example: Difficulty finding product options such as “Share” or “Save”. “Scan behavior” and expressed confusion.
Improvement example: Integration of more product options like "save", "like" or "share". #Don Norman_Mental Model Alignment

Design System Diagram

III. FINAL DESIGN

GENERAL DESIGN PHILOSOPHY

Combination of iOS components & custom design elements

  • iOS-typical UI elements for high quality, timelessness and conformity to expectations.
    #ISO 9241-110_Conformity to expectations . Custom design elements that fit seamlessly into the Apple ecosystem.

Use of blur effects for depth & high quality

  • Blur for a modern, sophisticated look & feel, inspired by leading digital services, e.g. Apple, Netflix, Trade Republic. #Jakob Nielsen_Aesthetic and minimalist design
Design System Diagram

Immediate feedback & Controllability

  • Animations, loading & status indicators and confirmation messages ensure users stay informed. #Don Norman_Feedback. #Jakob Nielson_Visibility of System Status
  • Control over step-by-step guidance like during account verification. #ISO 9241-110_Controllability

Color choice & visual clarity for trust

  • Blue as primary color for trust, security and calm. Often used to show affordance. Light Mode to promote transparency and clarity. #Don Norman_Signifiers
Design System Diagram

IV. DEVELOPMENT

We developed parts of the app using Ionic and Angular with features like Firebase Authentication and web scraping. Here are some key insights from the process.

Firebase Authentication (OTP)

For secure user registration, we used phone number OTP verification. This ensures users are authenticated securely via a one-time password sent to their phone. Once the OTP is verified, user data is securely saved.


firebase.auth().signInWithPhoneNumber(this.phoneNumber, this.recaptchaVerifier)
    .then((confirmationResult) => {
        this.confirmationResult = confirmationResult;
    });

        
Design System Diagram

Web Scraping for Trustworthiness

To verify user credibility, we integrated ScraperAPI, which scrapes public data from platforms like LinkedIn. This data helps assign a trust level to users based on their online presence.


fetchSearchResults() {
    this.apiService.getResults(this.username).subscribe(response => {
        this.results = response;
        this.updateTrustLevel();
    });
}
updateTrustLevel() {
    if (this.results.length > 50) this.trustLevel = 5;
    else if (this.results.length > 20) this.trustLevel = 4;
}

        

V. CHALLENGES & KEY LEARNINGS

REFLECTION

Icon

Designer–Dev. Collaboration

Challenge: The initial coded version didn’t fully match the Figma design.
Learning: Frequent, focused check-ins helped bridge the gap — I learned that clear feedback is essential to deliver pixel-level consistency.

Icon

Letting Go for Better UX

Challenge: Letting go of design directions I personally liked after negative feedback.
Learning: Embracing user feedback – even when it contradicts my preferences – led to better, more user-centered outcomes.

Icon

Value of Respectful Disagreement

Challenge: In discussions, I sometimes held back my opinion to avoid unnecessary friction – even when I had strong design reasoning.
Learning: Respectful disagreement can actually build trust and lead to better, more thoughtful team decisions.