UX Design for App as Complete Newbie with Figma

An Exercise from Coursera Google UX Design Specification

UX Design? What is it about? I’m taking my first UX design class from Coursera called “Google UX Design“. The course is designed for beginners who may have no design experience in the past. I’m gonna share with you my very first UX design project, so bear with me if it looks too rough.

The full name of the class is “Google UX Design Professional Certificate”, where students have to finish all 7 modules, each comes with 3~7 weekly courses. There are 3 design projects throughout the whole professional certificate (also called “Specification” by Coursera). In this article, I will share my first UX design project in a case study approach with notes of my thinking process.

In the first course, students have to pick a design topic from a Sharpen Design Challenge Generator. I chose to design a virtual tour app and set National Palace Museum as my study subject.

Please note that I made a lot of assumptions for the purpose of this case study, so all the research interviews results are hypothetical. And National Palace Museum owned all the copyrights of artworks images and logo used in this design project.

Here we go:

Project Overview

Let me start with a direct screenshot of the case study deck.

Understanding The User

User Research — Summary

I conducted Fundamental Research to understand National Palace Museum’s target clients and their needs and pain points. The museum already has a website with rich content, and I will try to transfer those contents to a brand new app.

Initial research showed that while the museum released a few apps in the past, it’s not widely used outside the premise and only Android versions were available. The aftermath of COVID makes most museums worldwide suffer financially due to the long time closure. I see some famous museums have already developed powerful apps for virtual tour services. Given that foreign tourists account for 75% of the National Palace Museum’s visitor counts (source), the museum must release an app for similar service soon in addition to digital content on their website.

My app design will focus on serving customers’ needs when a physical visit is not possible and on building up long-term usage for NBU (the Next Billion Users).

User Pain Points — Persona of Sally & George

I create 2 personas to reflect different target client groups, as shown below.

When drafting personas and value proposition for the museum, I put myself in the shoes of its overseas and local visitors. It all comes naturally to me. As a long-time art lover, I almost always visit at least one gallery or museum of some sort when traveling abroad. I even include my own pain points and frustration. These are usually caused by museums merely trying to transfer all their website contents into an app without considering the diversity in their respective user base and the ultimate goals these apps are trying to accomplish.

User Journey Map — George’s Example

George’s user journey reveals that the museum should provide more exhibitions to choose from, enrich the contents, and consider adding closed captioning for users with hearing disabilities. Enhancing overall app stability and the loading speed is also critical.

Storyboard

Storyboard. I heard the word a lot when watching some behind-the-scenes movie clips, but I never really got it until now. My task was to tell a story about why the app can address customers’ pain points. It’s been ages since I drew something with only pencil and paper, but duty calls, let’s do it!

Sitemap

Draft a “sitemap” of the app after all the research phrases to ensure you have a high-level view of your app’s structure. Preparing a sitemap will help you think through the user flow and select key screens to start the design.

Starting the Design

Paper Wireframes

As a start, I need to craft some “paper wireframes.” I drew 5 versions of the “artwork info” screen showing how artworks were displayed after users selected them from the “virtual tour” screen. “Jadeite Cabbage” was the chosen placeholder as it is one of the most famous collections of the museum.

I kept a straightforward design and hid the long context of the artwork description in the telescope icon. The 3-dots carousel function can display other information like artists’ anecdotes. Also, at the bottom of the screen, users can choose 3 related artworks.

Yeah, I know. Above is an elementary-level drawing. I used stars to mark the elements of each sketch for the later digital wireframes.

Digital Wireframes

The next step is where the UX design tool comes in. Here I use Figma to draw my first digital wireframes. An excellent tool for beginners to draft a simple layout and a lot of functions to play with if you have more time to explore.

Low-fidelity Prototype

The “low-fidelity prototype” (“lo-fi” for short) connected the virtual tour user flow from welcome message, map navigation to artwork selection and appreciation. It also embeds interesting features like saving your favorite artworks in a gallery. I will set this feature to be accessible for museum members only. The lo-fi fidelity prototype at this stage will be used in a later usability test.

Usability Study with Findings

This step is to conduct 2 rounds of usability studies. Findings from the 1st study helped guide the design from wireframes to “mockups.” For the 2nd round, I used a high-fidelity prototype to iterate changes based on new feedback before starting the final design. Multiple findings are discovered during the process, so I need to prioritize and decide which ones should be fine-tuned.

Refine the Design

Now let me add some colors. The screen looks much accurate with actual images.

Mockups

Time for connecting the screens. I felt like doing kids’ “number connecting game,” and it’s always satisfying to see the final output reveal itself. Feel free to play with my design for the virtual tour user flow here.

Of course, a good UX designer can’t ignore “accessibility,” so I’ll make sure that each image will have alternative text, all audio files will come with transcripts, and any video will be embedded with closed captioning, etc. There’s a lot more to consider when designing with a diversity and inclusion mindset.

Responsive Design

Although I’m designing an app, I also need to consider “responsive design” when users browse content on different devices. Below is a mockups design for 3 devices (iPhone X, iPad mini, and Macbook Pro) to showcase screen size variations.

Takeaway and Personal Notes

When I conducted competitor research, I learned a lot from other museums app like Rijksmuseum in Amsterdam, British Museum in London, and American Museum of Natural History in New York. Without saying, they are the best in the industry (source). I haven’t found any other museum or art gallery app that can come close. I wonder how long did it take for them to develop such interactive and powerful platforms.

It’s also challenging to embed accessibility functions in an app. For the project I am working on and for all elites alike. In the end, everything comes to how much effort a museum is willing to commit and how professional and artistic the designer team is.

Hope you like my first UX case study. If you are a fellow museum fan and are doing some self-learning on UX design, too, don’t be shy to give me a shout-out below or simply drop me anemail.

Before you leave, don’t forget to subscribe to this site Second Star To The Right’s newsletter so that you won’t miss all the fun. You can find other learning articles here. 

Last but not least, if you find this article useful, you can support me by clicking the icon below so that I can continue to create high-quality content on this website without ads.