Categories
Prototyping

Google UX Specialization Course 3: Build Wireframes & Low-Fidelity Prototypes

View the original post

Ideation requires you to push your creative boundaries and try to think of new perspectives to your design approach. So, no limits!

NOTE: This blog is a follow-up to my previous blog that is “Google UX Specialization Course 2: Start the UX Design Process: Empathize, Define, and Ideate.”

Course 3 of Coursera’s Google UX Specialization is about coming up with a solution for the project prompt I chose in course 2. Through this blog, I will be documenting my entire journey and how I approached each assignment in course 3 of the specialization.

Overview

Prompt: Design a flower catalog and delivery app for a florist in Jaipur, India.

Duration of course 3: 29 June 2021 to 13 July 2021

Tasks:

  1. Build a goal statement
  2. Outline the user flow
  3. Create storyboard
  4. Draw paper wireframes and digital wireframes in Figma
  5. Build low-fidelity prototype in Figma

Peer graded assignments:

  1. Create storyboard
  2. Create digital wireframes
  3. Build a low-fidelity prototype

IDEATE

In course 3, I continued the ideation phase, which had been supported by research from course 2, user interviews, and personas and journey map insights. My goal was to generate as many ideas as possible that could be viable solutions to the issues people have while purchasing flowers online or in person. I made sure that my solutions were based on my user research rather than my personal notions while brainstorming ideas.

TASK 1: Build a goal statement.

I built 2 goal statements for both of my personas, Aryan and Sara. The goal statements helped me describe my product and its benefits for my targeted user group. For creating goal statements, I revisited my problem statement, and used the following steps:

  1. Identified my product
  2. Described the specific action my product will let users perform
  3. Described who the action will primarily affect
  4. Described how the action will positively affect that person
  5. Described how I’ll measure the action’s effectiveness

NOTE: If you don’t have you can combine the empathy maps, personas, user stories, and user journey maps to make a final goal statement.

Goal statement for user persona Aryan
Goal statement for user persona Sara

The solution to my users’ painpoints became much clear after I defined my goal statement. Along with one-time delivery, there may be a subscription service for Aryan’s pain points, which would deliver the flowers he chooses on a daily basis. Care tips for each flower/plant, as well as real pictures and user feedback, might be provided for Sara’s pain points.

TASK 2: Outline the user flow

For this task, I outlined the typical path user will take while ordering flowers online. I referenced the problem statements I created to make sure that my design really addresses the user’s needs. Keep in mind that the user flow will change as the problem statement changes and you need to come up with a new user flow for every possible circumstance of your product. I used the problem statement where the customer wishes to buy one-time delivery flowers or start a subscription to outline my user flow.

User flow

TASK 3: Create a storyboard

The most enjoyable part of course 3 was storyboarding! Storyboarding was one of my favorite things to do because I’ve always enjoyed sketching and doodling. Here I created two different storyboards:

  1. The big picture storyboard: This focused on the user and their needs, along with their emotions.
  2. The close-up storyboard: This focused on the interaction of the user with the product and how the product will work.

NOTE: You don’t need to draw high-fidelity storyboards with a lot of details! As long as you know how to tell a story, the fidelity of your storyboards won’t matter. So don’t be concerned; simply make a basic outline of your story.

The big picture storyboard
The close-up storyboard

TASK 4: Draw paper wireframes and digital wireframes in Figma

Okay, so task 4 is also one of my favorites! Hands-on ideating began at this stage, and I began with converting my ideas into low-fidelity paper wireframes, which I later digitalized using Figma. Figma is a popular design tool that is available for free. There are several videos available on youtube to help you in getting started.

At first, I sketched four to five screens for my homepage using paper, as you can see in the image below. Then I created one refined one wireframe for my homepage that I highlighted as a star. I repeated the same process for the rest of the screens.

Paper wireframe for home screen

After low-fidelity paper wireframes were created, I used Figma to create low-fidelity digital wireframes. As you can see, after I started sketching out the concepts digitally, they got a lot more refined. The flower catalog screen, for example, is more detailed in the digital wireframe because I included elements like pricing, rating, and an add to cart button.

Wireframes for Home screen and Flower screen

Also, while working on digital wireframes, I noticed that some of the paper wireframes were difficult to use, and hence I had to redesign them. Users may want to modify the flowers they choose while designing a bouquet, for example. However, as you can see from the paper wireframe, it’s difficult to go back and modify the flowers they chose before. Therefore, in the digital wireframe, I tried to create a flow where the user will be redirected to another screen to complete each step and will have to come back on the main screen where he can track all the completed steps of the bouquet customization process.

Wireframe for Bouquet Customization
Wireframe for booking the flowers

To properly organize the content of my wireframes, I used the Gestalt principles. Gestalt principles describe how humans group similar elements and recognize patterns. Check out this article from UX Collective to learn more about Gestalt principles with examples.

Lastly, as this is coursework and not a client project, I did not wireframe each feature and screen. In the prototype, you’ll see that one-time delivery options, payment modes, etc are not wireframed and prototyped. I have paper wireframes ready for these and I am planning to convert these directly into a high-fidelity prototype.

Prototype

Here starts the 4th phase of the design thinking process! Prototyping is fun because it requires you to think about how your product will interact in the real world. Besides that, digital prototyping makes it easier to share, and get feedback!

TASK 5: Build a low-fidelity prototype in Figma

Cool right?

Figma will allow you to check your prototype in another window while you are connecting the nodes in Figma. You can also use Figma Mirror to check how your prototype works on mobiles.

You can check the prototype I have built so far here and let me know suggestions if any!

Strive to design ethically and for inclusion

While wireframing and ideating, make sure your design is inclusive, accessible, and use assistive technologies!

Photo by Clay Banks on Unsplash

As UX Designer, it is important for us to prioritize our users irrespective of their gender, race, age, or disabilities. While wireframing and ideating, check if have any biases and make your designs inclusive, ethical, and accessible for every user out there.

Consider this example: On many shopping sites, there is a red prompt that warns “ONLY TWO LEFT IN STOCK, BOOK FAST!” This is a deceptive pattern that encourages users to purchase something right away or risk missing out on a deal as the item is out of stock. It is important to recognize the Deceptive patterns (Dark patterns) in your designs and design a product that won’t harm your users mentally or physically.

Check these resources about how to make technology more inclusive and ethical:

  1. Gender Shades: A study of how facial recognition algorithms can avoid racial biases.
  2. 10 principles for ethical UX Design from UX Collective
  3. Designing for All: Building Inclusive and Equitable experiences by Vidhi Raghvani
  4. What Are Dark Patterns in UX Design? by Career Foundry

Conclusion

Okay, so course 3 was fun! I procrastinated at some point but yes I got through and the results turned out to be good! All the designers out there working on course 3, YOU GOT THIS! Keep up the great work!

Please share your thoughts and suggestions on my project and let me know if you think I could do a better job on any of the tasks. I’d be happy to connect and talk with you! My social media handles are:

Linkedin | Dribbble | Portfolio

or just drop me an email at: jhanvi.mbhatia@gmail.com

Thank you for reading!


Google UX Specialization Course 3: Build Wireframes & Low-Fidelity Prototypes was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.