APP DESIGN, PROTOTYPE & CODE

PROBLEM & SOLUTION

Fake reviews and bots make online shopping frustrating. With SafeRated, we created a secure, AI-verified space where users are authentically registered, ensuring credible product reviews and more clarity which products are truly good.

TEAM & DESIGN EXECUTION

In a team of two, I led the research, design, and prototyping 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 . In addition to the prototype, we developed the app with Ionic, web scraping, and Firebase OTP, blending Apple’s guidelines with custom elements—created during my studies at University of Osnabrück.

Design System Diagram

I. EMPATHIZE & DEFINE

Problem: Distrust in Online Reviews

QUESTIONNAIRE BASED ON THE UEQ - QUANTITATIVE (52 PARTICIPANTS)

Analysis of average values and standard deviations for each dimension in Excel.

75% often distrust online reviews (low scores in “reliability”).

82% would like more transparency (high desire for “clarity”).

68% would be more likely to buy if the reviews were checked by a verification process (need for “reliability” and “efficiency”).

USER INTERVIEWS - QUALITATIVE (12 PARTICIPANTS)

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

FROM LOW- TO HIGH-FIDELITY

LOW-FIDELITY PROTOTYPE

Usability test with thinking aloud method for first impressions regarding general navigability and flows. (9 participants)

MID-FIDELITY PROTOTYPE

Usability testing with mixed methods: Eyetracking (quantitative) + Thinking Aloud (qualitative) + UEQ with 12 participants (quantitative)

UEQ

84% navigated easily through the app (efficiency, controllability)

92% found the design to be professional and appealing (attractiveness, aesthetics)

78% enjoyed using the app thanks to “Spotlights” and “Glorified Products” (stimulation, motivation to use)

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".

Design System Diagram

HIGH-FIDELITY PROTOTYPE

Final fine-tuning of the design with the help of usability testing and thinking aloud.

USABILITY TEST WHILE THINKING ALOUD

Problem examples: Unclear hierarchy for price, title and ratings.
Lack of signifiers for interactive elements and unclear affordance.
Improvement examples: Price in larger font and further adjustments.
Interactive elements highlighted in bright blue for clear affordance.

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.
    Interaction principles according to ISO 9241-110: Conformity to expectations: behavior predictable based on context and general conventions.
  • 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.
    Heuristics by Jakob Nielsen: Aesthetic and minimalist design. Just necessary information & elements.
Design System Diagram

Color choice & visual clarity for trust

  • Blue as primary color for trust, security and calm. Often used to show an affordance. Donald Norman’s Design Principles: Signifiers - Clear visual cues for readability and interaction.
  • Light Mode deliberately chosen to promote transparency, clarity and usability.
Design System Diagram

Clear navigation & intuitive user flow

  • Simple, structured layout with recognizable icons and buttons.
    Donald Norman’s Design Principles: Mappings - Logical arrangement of navigation elements for intuitive use.
  • Primary actions always within easy reach for quick interaction.
    Interaction principles according to ISO 9241-110: Self-descriptiveness - Users understand functions without unnecessary steps.

Immediate feedback & Controllability

  • Step-by-step guidance for actions like account verification.
    Interaction principles according to ISO 9241-110: Controllability - Users have control over the verification process, including the ability to go back or adjust inputs.
  • Animations and status indicators provide instant visual feedback.
    Donald Norman’s Design Principles: Feedback - Users always know what’s happening.
  • Loading indicators and confirmation messages ensure users stay informed.
    Heuristics by Jakob Nielsen: Visibility of system status - Immediate updates on ongoing processes.

IV. DEVELOPMENT

We developed SafeRated using Ionic and Angular, implementing critical features like Firebase Authentication and web scraping to enhance security and credibility. Here are a few key insights from the app development process.

Firebase Authentication (OTP)

For secure user registration, we used Firebase Authentication with phone number OTP verification. This ensures users are authenticated securely via a one-time password sent to their phone.


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

        

Once the OTP is verified, user data is securely saved:


this.confirmationResult.confirm(this.otp).then(() => {
    this.userService.saveUserData(this.phoneNumber, this.username);
});

        
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;
}

        
Design System Diagram