{"id":723,"date":"2026-05-03T02:53:44","date_gmt":"2026-05-03T02:53:44","guid":{"rendered":"https:\/\/sova.ourcloud.ou.edu\/mariannsalinas\/?p=723"},"modified":"2026-05-03T04:44:38","modified_gmt":"2026-05-03T04:44:38","slug":"aix-design-prototype-hi-fi-test-iterate","status":"publish","type":"post","link":"https:\/\/sova.ourcloud.ou.edu\/mariannsalinas\/2026\/05\/03\/aix-design-prototype-hi-fi-test-iterate\/","title":{"rendered":"AIX Design: Prototype Hi-Fi, Test & Iterate"},"content":{"rendered":"\n
\n
\n
\"\"<\/figure><\/div>\n\n\n\n
\n\n

AIX Design: Prototype Hi-Fi, Test & Iterate<\/h2>\n\n

We’ve been through it all, so what is my final stance on AI? <\/p><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n

Objective<\/h1>\n\n\n\n
\n

The objective of this stage in the design thinking process was to transform initial concepts from previous phases, sketches and low-fidelity wireframes into a fully interactive high-fidelity (hi-fi) prototype. In turn, this allows us to evaluate its usability, and refine the design based on feedback. Specifically, this phase focused on:<\/p>\n\n\n\n

    \n
  • Enhancing visual design and interaction quality<\/li>\n\n\n\n
  • Integrating and refining AI-driven features<\/li>\n\n\n\n
  • Identifying usability issues through heuristic evaluation<\/li>\n\n\n\n
  • Iterating on the design to improve user experience, trust, and clarity<\/li>\n<\/ul>\n\n\n\n

    Ultimately, the goal was to produce a functional and polished prototype that effectively addresses the core design problem while leveraging AI in a meaningful, user-centered way.<\/p>\n<\/div>\n\n\n\n

    AI Usage<\/h1>\n\n\n\n

    AI usage had actually felt like it tripled in all my previous usages as I had decided to explore the multiple options available to me to understand what they can do and how to even incorporate it into my app. <\/p>\n\n\n\n

    AI apps I had worked with were:<\/p>\n\n\n\n

    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \n

    Adobe Firefly<\/p>\n<\/div>\n\n\n\n

    \n

    ChatGPT<\/p>\n<\/div>\n\n\n\n

    \n

    Figma Make<\/p>\n<\/div>\n<\/div>\n\n\n\n

    AI assisted in:<\/p>\n\n\n\n

      \n
    • Generating UI content and microcopy<\/strong><\/li>\n\n\n\n
    • Suggesting AI interaction patterns based off given screens<\/strong><\/li>\n\n\n\n
    • Helping structure heuristic evaluation summaries<\/strong><\/li>\n\n\n\n
    • Improving UX writing clarity and tone<\/strong><\/li>\n\n\n\n
    • Brainstorming feature improvements based on feedback<\/strong><\/li>\n<\/ul>\n\n\n\n
      \n
      \n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      \n

      ChatGPT<\/h2>\n\n\n\n

      Logp and Video frame creation<\/p>\n<\/div>\n<\/div>\n\n\n\n

      Using Adobe Firefly was a huge learning curve. I had wanted an animation for when the user entered the app, but not just any animation, I wanted something eye catching. This led me to experiment with the logo designs. So I began with ChatGPT in prompting what I would be animating:v<\/p>\n\n\n\n

      \n

      “Can you create a cute and simple logo examples, up to 4 options that says “Dearly” that is in a calming blue palette for a mental health journaling app with a transparent background, please?”<\/p>\n<\/blockquote>\n\n\n\n

      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      When looking into the options given to me, I couldn’t only think of looks, I had to also think of how it would appear in the app. I gave it the beginning but now this part came to me as the user. This is where I had to remember all our previous lessons in prompting AI as I had to then edit it down to the top left through some quick prompts. <\/p>\n\n\n\n

      From there I had begun to work with the designs and refine them to what I would eventually be using to animate, asking ChatGPT to give me the frame that I would be working with. <\/p>\n\n\n\n

      \n

      “Can you prepare a gif of the logo being written out and then the book opening to reveal the heart coming up and the sparkles appearing afterwards?”<\/p>\n<\/blockquote>\n\n\n\n

      Which I quickly found out ChatGPT could not do for me. <\/p>\n\n\n\n

      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      I had instead received frames.<\/p>\n\n\n\n

      I had not used AI to create videos before so I had a bit of trouble trying to decipher what each of these would need or how to even begin this process. So I turned to Adobe FireFly.<\/p>\n\n\n\n

      \n
      \n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      \n

      Adobe Firefly<\/h2>\n\n\n\n

      Logo video creation<\/p>\n<\/div>\n<\/div>\n\n\n\n

      When trying to animate this logo I had gone in completely blind. I had no idea where to prompt it, I had clicked throughout multiple screens and found my own eyes going in spirals. I looked around before finding my goal and even then, I had found out just how simple and flexible Adobe made it.<\/p>\n\n\n\n

      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      I had seen that the most I had to do was mess with duration and put my first and last frame and Adobe Firefly would do the rest. In the end, without even having to prompt it, Adobe Firefly took these two frames<\/p>\n\n\n\n

      \n
      \n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      First Frame<\/p>\n<\/div>\n\n\n\n

      \n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      Final Frame<\/p>\n<\/div>\n<\/div>\n\n\n\n