UI Design: NFT APP Case Study

Direction for Mood Board 01

For my first mood board I wanted to express a fantastical dreamlike state induced by video games like, “Monumental Valley”, “Back to Bed”, “Animal Crossing” and “Lunar Flowers”. They had the following traits that I found useful for this project: Bright and yet subdued colors; lots of imagery through graphics; narrative.

Direction for Mood Board 02

For the second mood board, I wanted to go with an idyllic feeling. Klimt’s garden and painting of a woman, the villa with the pristine blue pool, painting of homes by a lake, a cycling studio with a gold interior and the earth tones in the Pilates studio. Architecture emphasizes the feeling a particular space can create.

I searched for: Earth & Metallic tones and a feeling of ease and comfort in a given space.

First Splash Screen

The first screen that I made a mock up for took inspiration from the first mood board. I used the image from Monumental Valley and worked with the bright colors. From this draft I learned that I liked the font “Perpetua” and wanted to work with it.

Second Splash Screen

For this design, I thought about the word “wave” and tried to imagine a color scheme that reminded me of the beach. I triedto capture the pale blue sky and the golden sand. This reflects the Idyllic mood, while also keeping aspects of the dreamscape feel I put together in mood board one.

Ultimately, I decided to go with this design because it seemed like it could have the most potential for success.

Why?

Due to the light background and metallic tones, I found it fit well with the nature of the app. It sets the stage for colorful artwork and photographs to be presented. It also seemed youthful with a hint of elegance. Additionally, it gives off a similar aesthetic as trading cards or Tarot cards, which are still popular due to their ability to play on nostalgia and mystique.

Ultimately, these aspects come together to deliver a design for the tech-savvy audience that values beautiful and curated experiences.

Splash Screen

I wanted to focus on the name of the company with the picture of the moonlit path. I knew the hero card was going to be a fictional lunar flower. So, it was by coincidence that I found a path made of lunar flowers.I chose to go with this very light blue, which I named “Sea Foam Blue” in my style guide because it was calming and inviting. I imagined the open space of an art gallery or museum. Specifically, “La Reina Sofia” in Madrid.

I selected the gold font and strokes because it’s elegant and there were hints of it in the image. Additionally, upon further reviewing, I found that it captured the essence of a sun beaming through the light blue background. Summer days tend to be synonymous with youth. The bright energy and carefree attitu

Home

I used the same light blue background color to highlight the dark hero card. I used navy font and utilized gold for the CTA. For the information card, I used a milky white color that still contrasted with the light blue background, but only to emphasize the contents.

Search

For the search bar, I used a beige color to compliment both the light blue background and gold detailing. I used images inspired by my mood board such as Klimt’s flowers and graphic arts. I added a blurry background behind the search results/prompts to add some contrast.

Profile

I had a good time making this page. Instead of writing John Doe, I made it my own profile using art that I have created and a photograph someone took of me. I added details about myself. I think this added a personal touch to the project, demonstrating that I could be part of the demographic that would be a potential user on the app.

NFT Page

This page was inspired by Yu-Gi-Oh! Cards that my brother and I used to collect. Trading cards are youthful and bringing the design to a digital space through NFT seemed fitting. I also included some text to describe the flower. The design now becomes a slightly nostalgic experience, but in modernity.

Design Systems

I used fonts Perpetua, PERPETUA Titling MT, and Roboto. I found that they fit the color scheme best.

Reflections

This project was fun to put together! I learned a lot of different things about Figma that made the task a lot easier. For example, shortcuts and a brief introduction to interaction design. It felt like playing a video game and using logic to advance to the next sequence. This was fun but intimidating because I did not allocate enough time to play with the functions.

Overall, I am very proud of my efforts and the design I made in a short time. I would have wanted to spend more time learning how to get my screen to scroll horizontally and fix the navigation on the home screen. I will eventually return to this project and assess how it improves with experience.

In summary, the things I am taking away from this case study are:

· Time management skills: allocating space for troubleshooting.

· Design is something that one builds upon. There is always something to adjust or improve.· Play is essential to the design process.

· It is easy to get overwhelmed with the number of tasks, so some downtime needs to be considered.

· It may seem like someone has more skills and talent than you, but your experiences contribute something unique to the process.

· Comparison is good if you want to learn whether you have interpreted the assignment correctly, but never to discredit yourself.

· Trust the process and have patience.

Thank you for the opportunity to learn!