Figma UI/UX Design Essentials Class Project

Scroll ↓

I recently took a class called Figma UI/UX Design Essentials, in which I was tasked with creating mockups for a simple e-commerce purchasing app. Here’s what I came up with. :)

My first two tasks:

  1. To use a random project generator to come up with a product to sell and a plain albeit easily understandable name for the app.

  2. Create a simple user task flow chart detailing the user’s journey within the app.

Note: I really appreciated this part of the course as it provided context for the screens I was about to design. In UX, as in many disciplines, it is crucial to keep the user, customer, or consumer in mind from the very beginning to the end of the process.

1. Define

In this project, my main objective was to develop a mobile application that elevates the user experience during an ecommerce transaction. Throughout the design phase, my focus was on crafting an interface that seamlessly caters to the target audience's requirements while offering an intuitive and visually captivating experience.

Project Brief

Task Flow

1. Design

I was tasked with coming up with 4 sets of 4 mockups (4 mobile wireframes, 4 mobile prototypes, 4 desktop wireframes, 4 desktop prototypes) for my project. In order to guide the transition from the wireframes, I created a color scheme, typography set, and moodboard.

Color Palette

Mood Board

All three of these resources helped me envision my final design before I had even begun designing the wireframe screens. Having a guide to reference to kept me keyed into the colors, font, and overall design inspiration throughout the duration of the project and streamlined my entire thinking process.

Typography Set (Playfair Display)

Mobile Mockups

Desktop Mockups

Then, I had to take these desktop wireframes…

… into these high-fidelity mockups.

After creating the resources to guide the design process, I used them to turn these mobile wireframes…

… and turn them into these high-fidelity mockups.

Throughout this Figma UX Design Essentials class, I not honed my design skills but also gained valuable insights that inform my views as a UX writer. Some key takeaways include:

  • Understanding the user journey: By learning about wireframing and high-fidelity mockups, I have gained a deeper understanding of the user journey and how design elements can enhance the overall user experience. This knowledge helps me craft more impactful and effective UX copy that aligns with the design and guides users through their interactions.

  • Collaborating with designers: Through Figma, I have experienced the collaborative nature of design projects, working closely with designers to bring the interface to life. This collaboration has strengthened my ability to communicate and align my UX writing with the visual elements, resulting in a more cohesive and seamless user experience.

  • Design thinking approach: Learning design essentials has allowed me to embrace a design thinking approach to my UX writing process. By understanding the principles of color schemes, typography, and visual hierarchy, I can strategically choose words and phrases that complement the design, evoke emotions, and guide users towards their goals.

  • Bridging the gap between design and content: By having a solid foundation in design essentials, I can bridge the gap between design and content more effectively. I can communicate with designers using the common language of design, ensuring that my UX writing integrates seamlessly with the visual aspects of the interface.

Overall, my understanding of design essentials has enriched my perspective as a UX writer, enabling me to create more impactful and user-centered copy that aligns harmoniously with the overall design and user experience.

Previous

UX Writing Case Study (DK Prep)