UXimize

Documenting a Product Design Journey

Three images showing the progress of one of the screens from a rough sketch to a low fidelity wireframe to a high fidelity prototype

Role: Product Designer

Tools: Figma/FigJam

Duration: 7 weeks - 2025

Before you proceed

This project is not about the final design. It is about the process behind the design.

The Challenge

Design an app with an intuitive interface.

The Questions

This was the easiest part! I thought of something that would help me in my daily UX work. So, I decided to build an AI-powered app that creates time-consuming UX deliverables like website audits or competitive analyses in a few seconds. Then, I thought, why not include user modeling deliverables, like personas and user journeys? And, there, I had my app idea.

  1. What app am I going to design?

2. How do I want users to feel?

Supported

Informed

In control

Delighted

3. What should this app communicate?

Reliability

Usefulness

Convenience

Delight

Building the app

AKA The Site Map. The site map is important! It helps you specify the structure of the app, the potential navigation routes and tasks. I went through three iterations of the site map as I was trying to avoid making the navigation too deep/complex. I also resisted the urge to overload the app with features so users get overwhelmed instead of feeling supported. In all cases, I decided on a dashboard layout where users move harmoniously through the different features without feeling stuck or confused. I was creating “an environment”.

Previous iterations

The inspiration

A collage of screenshots showcasing a project management or design software interface, with annotations pointing to various features such as repository projects, export options, project saving steps, and a dashboard with financial and customer data.

Now that I knew what kind of app I was going to build, I started looking for UI elements that I liked and felt would work well with the experience I wanted to create. Here is a snippet of my inspiration board.

Sketching the wireframes

Next, I moved to sketching the wireframes. While working on layout options for each screen, the persistent questions were:

  • Does this make sense? Does it feel intuitive?

  • What task(s) does this screen support?

  • What are the top priority functions that a UX designer would need from this app?

  • What other scenarios are possible besides the current flow?

  • Does the screen feel clean or crowded?

  • Will the user be stuck anywhere in the experience?

  • How would people who are using this app feel?

  • What UI options feel the most intuitive and elegant?

A collection of hand-drawn sketches of user interface wireframes and prototypes for a web analysis and delivery application, showing different screens such as dashboards, user modeling, content delivery, and side menu UI, with handwritten notes and annotations.

Digitizing the lo-fi prototype

Moving from sketches to lo-fi digital wireframes involved revisiting some design decisions and not simply digitizing the existing sketches. This is what I love most about the process–how ever-evolving the design is and how new questions arise each step of the way!

Screenshots of a webpage titled 'Generate Deliverables' showing various sections such as URL input, uploading transcripts, project management, saved projects, and help menu, with a blue and gray color scheme.

Finalizing the interface

App landing page, and new and existing user login

“Projects” page for new/existing user

“Generate Deliverables” page

Backstory

It took me some back and forth to decide which of these two pages would be the users’ default view once they log in. I was between two ideas:

1) Get the user directly to action! Send them directly to “Generate Deliverables”

2) Ease the new user into the experience by bringing them to the projects page where they can start a new project and then add deliverables to it.


I went with option #2 since the micropcopy I used on the “Projects” screen felt like some onboarding to the experience.

Additionally, I offered existing users the opportunity to start by generating deliverables and then saving them as a new project or adding them to an existing one.

Email message from Ayat Elamrawy discussing project management and delivery screens.

Editing a deliverable

Backstory

This was the trickiest page to design. I wanted the interface to be as intuitive as possible, and I also wanted to avoid crowding the screen with options. So I went with contextual CTAs that pop up upon hovering on any area of the persona. I also clarified that this is the expected interaction by adding “Click anywhere to edit”. I was inspired by Photoshop’s contextual menus, which made the app more approachable to new creatives.

Screenshot of a survey question asking what a user should be able to do with created deliverables, with multiple choice options including change image, change style, edit text, change color, and change font. An orange arrow points to the top right corner of the screen where a purple circle icon is partially visible.

The color palette

Backstory

I wanted a simple palette that communicates reliability and professionalism via the navy blue color, and energy, innovation, and creativity via the orange, in addition to the other basic shades.

See Full Prototype

What I learned

and next steps

  • When it comes to UI design, sometimes the fix to a problem is as simple as rearranging the screens of a given user flow, or changing the placement of a button. The whole design does not necessarily need to be reconsidered.

  • While trying to rationalize to reach each design decision in the interface, I realized that, sometimes, more than one rationale can “make sense” when explained. However, the biggest lesson I learn every time I design something is that no matter how much I believe my rationale makes sense, seeing how users interact with the design is the biggest eye-opener. So, I will test the app with a few people and see how much of my rationale actually makes sense, especially about navigation and UI decisions. And I will probably revisit my sketches and iterate, iterate, iterate…