Initial Meeting

Phone call, Zoom, Teams, GoodNotes, Google Docs, Microsoft Word

I spend time researching the company before the initial meeting. If I am working with a team, I like to discuss my findings and make sure we all have the same level of understanding before going into the meeting.

The next step is the initial 30 minute to one hour meeting with the client(s). I'll ask questions about their company, customer base, inspirations/vision, expected traffic flow, an so on. These questions help me picture what style and kind of product they are looking for (examples include: subtle or bold design, professional or casual design, a lot of text descriptions or more user actions, and demographic age).

I'll provide the client(s) with examples of similar products to theirs to give them ideas if they're struggling to describe the design they want. I also like to be as thorough as possible during this phase.

Research

Google, Safari, Opera GX, Google Forms, SurveyMonkey, GoodNotes, Google Docs, Microsoft Word

After gathering all the information I need from the client, I begin the research phase. If it is a new product, I'll look into similar apps/products out on the market, the client's competitor product reviews, and mess around with those products to get the UX feel. If I am working on an existing product, I'll get my hands dirty and dissect it.

I'll create surveys and analyze the data if required for existing products. I'll also collaborate with other UX/UI designers and developers to get more ideas and information for the product. The initial creation of a storyboard, card sorting technique, and a user flow diagram will begin at this phase as well.

Design

Figma, Adobe Suite (Photoshop, Illustrate, After Effects), Procreate, Blender, Lottie Files, Azure DevOps, Kanban boards (Trello & GitHub), Scrum, Slack,

The design phase is where I start "getting lost in the sauce". I'll continue to conceptualize the product with low fidelity designs (user flow diagrams, card sorting, paper prototypes, and drawing a rough wireframe). After receiving feedback, I'll move forward with medium fidelity prototypes, creating a comprehensive design mockup using Figma, Photoshop, Illustrate, Procreate, etc. I'll also create color pallets, detailed storyboards, brand assets, and choose a few typography designs.

Once the bases have been covered and the design has been approved by the client and team, I'll move on to creating a high fidelity prototype via interactive design using Figma. When designing, I always make sure that the designs can be coded and I find my background in full-stack web development helps a lot with that - along with knowing what types of designs are out there.

More Meetings

Same technologies used as phase 1 through phase 3

The More Meetings phase and Design phase bounce between each other until the high fidelity prototype has been approved. I'll provide different versions of the medium and high fidelity prototypes to make this process smoother. This can include different versions of the product, button or image placement designs, and differences in certain sections.

Building and working with Developers

Figma, VS Code, Atom, PHPStorm, GitHub, Heroku, MongoDB, Firebase, Azure DevOps, Trello, Scrum, Slack, Lottie Files

Depending on my role in the project, I may code the app as well. This may be the entire app with the team or just the Front-end, using JavaScript, HTML5, and CSS3 or SASS. We'll run through a few tests along the way, just to make sure everything is working properly. Once the coding has been completed, we'll run through some user tests, analyze the data, then make any necessary changes.

Finalizing & Delivery

Once the product is ready, it will get a full run through with the client and be handed over. Depending on the project, I may continue working on it for updates or seasonal design changes.