UX Design | App Prototype and Final Project

on

 

4/10/2023 - 29/11/2023 | Week 8 - Week 14
Shofwa Alyadiena | 0350019
UX Design | Bachelor of Design in Creative Media

Instructions 


Process

As we were all rather busy/sick, we had to assign everyone 3 pages each at first; except for Ayshan, who's in charge of the logos. I had the responsibility of first designing the sign-up and log-in pages, then the sort/filter options. We all made the browse page but I had to change it to fit the filters. 

For the signup/login page, I created two versions: standardized and messy. I REALLY didn't like how the sign-up looked, but this was a very rough stage. The group agreed it's worth a shot to explore the messy version. I left it as it is, until we coloured it in.

Fig. 1.1 Log-In and Sign-Up page (15/10/2023)

The sort/filter pages were standard, so there's not much to talk about. Instead, here's the logo design.


Fig. 1.2 Logo Options (16/10/2023)

Ayshan provided a large variety of logos, and here were our personal favourites:

Fig. 1.3 Favourite Logo Options (16/10/2023)

The leafy-like one was my favourite. I just vibe with it, though I understand how it doesn't get the point across that well. It's still really cool though. I then proposed an idea where the "list" looks like a list- with bullet points.

Fig. 1.4 "List" List Idea (16/10/2023)

I don't think I was very clear with what I meant.

Fig 1.5 New Version (31/10/2023)

This was our chosen favourite. Unfortunately during the meeting, Ayshan was unavailable, so I asked if I could clean it up for our final logo. Once she returned I was given permission and worked on it in Adobe Illustrator. I discussed again with the rest about the bullet points and they agreed that it would be good. As of then, it was still in the B&W version.

Fig. 1.5 B&W Logo (7/11/2023)

We simultaneously worked on the coloured version of the prototype. The busy background for login and signup is replaced with a colourful image instead.

Fig. 1. 6 First Coloured Pages (19/10/2023)

A similar process for the rest of the pages, we just chose one colour for a specific set of pages (the user page is all green, Payment pages are all blue, etc). It was at this moment as well that we remembered about making the game prototype. I volunteered to do the memory game as I believed it would be an interesting challenge especially as I was unfamiliar with Figma's animations.

I spent several nights trying to figure out how to make it work the way I wanted to. This was one tutorial:

Tutorial 1 | Tutorial 2

There were very few tutorials in regards to a card-flip card match game, but these two are linked because "Tutorial 1" is what I aimed for, but "Tutorial 2" was the skill level I'm at. There were many times I felt like giving up but a working card flip (of 9 pieces) with the same answers no matter which 2 you open first was good enough. 

Afterwards, we gathered survey questions for our interviews. I was the only one in the group who managed to find an available, maximalist-loving, and willing interviewee. Every other answer was collected from the online version of the questionnaire. 

Survey Link

I was pleasantly surprised to know the majority enjoyed the refreshing "crowded colourful" look of the app as we were derailing ourselves from the standardized minimalist interface of, well, everything.


Submission


Fig. 2.1 MAXILIST Final Presentation (29/11/2023)

Feedback

  1. We balanced the aesthetic and functionality rather well.
  2. It's nice to see how we approached the maximalist look with an application.
  3. Some pages were missed.
  4. The prices are a bit expensive.
  5. It would be really good to have a "compare" option for the items.

Reflection: 

Experience 

The most memorable experience throughout the whole prototyping phase is the agonizing frustration of attempting to make a working memory/card-flip game. It was such a fun challenge and I really am proud it works to some extent! There was a deadline to finish the game, and I had two plans- if it works, use the one that works properly. If it doesn't work, I should take the safe option; which was having every card open the same answer. I really did keep trying but to no avail. It was also overwhelming as the examples were all focused solely on the memory game while the one I had to do was within one page with non-related functions. It was really distracting with all the arrows that I had to make a second Figma file just for it. It still didn't work out the way I expected but for a beginner, I think I did pretty well!

Observation 

I noticed from the other groups that they tried implementing their designs into the logo. I took inspiration from that, which was what sparked the idea of the "list" looking like a bullet list. It was such an interesting sight as well to see how similar the aesthetics were in some way. Everyone had new ideas- KawaiiCrypt's "swipe" function was very insightful, and Ollie's logo design is extremely fun and fitting, while GYPSY had what I believed to be the most detailed and explored research. 

Findings

From this project, I found reassurance that although it would be difficult to create something that's never been done before, it's still possible to propose existing concepts in newer spaces that provide a fresh experience for every user. I thought it was really interesting how most of our concepts and ideas already existed, just in a different space and situation. It's also a great way to understand creativity isn't limited to being something defined as "never been done before".

Comments

Post a Comment