Understanding the Project
DEFINE THE APP'S PURPOSE
What problem does the app solve?
Who is the target audience?
What are the app's main goals?
List the essential functions the app must have
Prioritize features based on user needs and business goals
Gather data about user behavior, preferences, and pain points
Information Architecture (IA):
Structure the app's content and features
Create a sitemap or diagram showing the hierarchy of screens and sections
USER FLOW: This is a crucial step in demonstrating UX skills
Map out the steps a user takes to complete a task within the app
Visualize the flow with diagrams, showing screen connections and decision points
Wireframing
LO-FI WIREFRAMES:
Create basic sketches of each screen
Focus on layout, content placement, and functionality
Use simple shapes and text
Figma allows you to quickly create wireframes using basic shapes and text tools
MID-FI WIREFRAMES:
Refine the low-fidelity wireframes
Add more detail, such as UI elements (buttons, menus, etc.)
Consider interaction and navigation patterns
Using the assests panel I was able to add more detail and include more features to expand function
Visual Design (UI)
VISUAL STYLE GUIDE
Choose colors, typography, and imagery
Maintain consistency with branding
Utilized Figma's Styles
HI-FI MOCKUPS
Transform the mid-fidelity wireframes into polished, high-fidelity mockups
Apply the visual style guide
Pay attention to every detail (spacing, alignment, etc.)
Figma’s design tools allow for pixel-perfect precision, utilized grid feature
Prototyping & Iteration
INTERACTIVE PROTOTYPE
Bring the mockups to life with interactions
Link screens together to simulate navigation
Add animations and transitions
Figma’s Prototyping tools are essential for this
INTERACTIVE PROTOTYPE
Test the prototype with users
Gather feedback on usability, design, and overall experience
Figma allows you to share prototypes and gather feedback
ITERATION
Refine the design based on user feedback and testing
Make necessary changes to improve the UI and UX
Figma makes it easy to update designs and prototypes
