Collaborative Design Practice // Task 3: Prototype, Test and Iterative Designs

-

3.9.2023 - 31.10.2023 (Week 6 - Week 10)
Britney Chow Pei Jun / 0350043 / BDCM
Collaborative Design Practice
Task 3: Prototype, Test and Iterative Designs

RESEARCH

For this task, we are required to create a prototype for our clients. Before I proceed to do that, I first look up for some other references for layout inspirations. 

Fig 1.0; Little Red Hen Bakery Website by Yanst; sauce: (Behance)

Fig 1.1; Mountain Story website by Samuel Scalzo; sauce: (Dribble)

Fig 1.2; Brighten Made; sauce: (Brighten Made)

Fig 1.3; intero Website Design by Akshaya Arasu; sauce: (Behance)

Fig 1.4; Clinique Nuage - Beauty Clinic Website by Basili Kamladze; sauce: (Behance)

Fig 1.5; Lombok Website by Samson Vowles; sauce: (Behance)
 

INSTRUCTIONS

 

PROCESS

In order to get an outline of how and what needs to be done, we decided to first design a few wireframes. Below are some of our progression:

Fig 2.1; Wireframes done in Figma;

Fig 2.2; Wireframes done in Figma 2;

Fig 2.3; Wireframes done in Figma 3;

However, the above does not mean much there are a lot of the other elements have yet to be decided. Thus, in order to keep the consistency between all our deliverables, our group then held a meeting to discuss and decide our final choice of typography, color palette and more. 

Not only that, but we also needed to get website information from our client so that we could organize well which information go to which part and therefore, make our website workload much more smoother. In the meantime, my teammates then decided on the final wireframes that we're going to go for. 

Fig 2.4; Final wireframes; 

After all the above mentioned are done, we also started to do our designs, I was in charge of refining the "About us" and "Sign in" page. Below is some of my work:

Fig 2.5; Refined websites;

I made a few other designs to see which one would look better for the overall view of the website and after some brief discussion with my teammates, I decided to make some more refinements to improve it. Below are some more of the website's progression:

Fig 2.6; Making slider component; 

Fig 2.7; Hover and pressed buttons; 

Fig 2.8; Other website components; 

Fig 2.9; Making the transitions and animations;

Final Website Designs: 

Fig 3.0; Home Page;

Fig 3.1; Product Page; 

Fig 3.2; About Us Page;

Fig 3.3; FAQs; 

Fig 3.4; Sign In Page; 

Fig 3.5 Product buying page; 

Meanwhile, while Siew Ni, Cheryl and I are in charge of the website, our teammate Jo Min is in charge of making the promotional video. 

Fig 3.6; Promotional Video Storyboard; 


Fig 3.7; Promotional Video Storyboard;

At the same time, Cecil, Eva and Vernice are in charge of the packaging designs. Below is some of the progression: 

Fig 3.8; Packaging Design by Cecil;

Fig 3.9; Packaging Design by Eva;

Fig 4.0; Packaging Design by Vernice;

After discussing these designs with the business school, they decided to go with Vernice's designs. Below is the mockup version of Vernice's design: 


Fig 4.1; Mockup of packaging design; 

FEEDBACK

Week 6:
  • Our group is slightly slow compare to the other groups, and we need to finalized a lot of things.
  • We also need to get the website, video and packaging design information from our clients.
  • We also need to know the final format of all the deliverables so we know what to do.

Week 7: 
  • The progression on the promotional video is good, other than that, the other deliverables needs to be work on more. 

Week 9: 
  • For the website, avoid using justify text as it will cause the rivers and it looks ugly, the graphic elements are a little too heavy on the home page. As for the sign in page, the image chosen needs a bit adjustments, however, good work on using the graphic elements with the image. 
  • As for the promotional video, you can think of other ways to improve the way you showcase the typography. 
  • The packaging design looks nice and incorporates the graphic elements well.
 

NEXT COURSE OF ACTION

Week 6:
  • Have a discussion with TBS to confirm the output and obtain data and images from them.
  • Continue to refine and design the deliverables

Week 7: 
  • Continue to refine and design the deliverables

Week 8:
  • Things should at least be 90% completion to get feedback from our lecturer and TBS.

Week 9: 
  • Amend designs based on feedback
  • Submit all the deliverables to TBS
  • Prepare presentation slides and complete other tasks. 

SUBMISSION

 

REFLECTIONS

Experience: 
The whole process of refining the designs from our sketches/wireframes are similar to what we have done during the past semesters. However, by doing this project, I felt like it's preparing us in the future where we get to communicate with clients all the time and design things that based on their preference, however, not all of the people know what they want at first and some of their preferences might not matches with what they want to achieve. In that case, that's where we came in to tell them and refining the designs. I feel nice that we get to experience this, but I can't deny the fact that this is not something I look forward to in my future as I do not favor the process of this. However, luckily, my group and I are able to face any problems that came up well and thus, there weren't any big problems during the process.

Observation:
By doing this project, I observed that communication is super duper important, not only between us designers and business school, but also among our team members. Relying solely on tacit agreements and logical thinking is not the right way to go as we usually would find each other doing the same thing and thus, not using our time efficiently. Fortunately, we were able to resolve it once we got it out. I also observed how important team leading is in a team. Previously, I thought that in our team, things will go well and the team would not be as "dead"(atmosphere) as I have seen my team members work before and I have also been in a team with a few of them previously. However, I observed that in order to have a good atmosphere when working, team leader have a very important role in this as they need to know how to guide a team properly and constantly update team members on what needs to be done and what is the next step that we need to take. Although I know that having the knowledge and experience to do this is definitely not easy, I would like to have a try next time if given the chance. 

Findings:
I realized when completing the project, that there are numerous skills I need to sharpen. First of all, my skills of layout compositing, while having improvements compare to some of my previous work, is still not the best and I definitely think I could do better. Next, I also found out that I really admired my teammate Jomin to be able to do what she visualized so well, the fact that she was able to do 3D rendering so well (with all the details and more) motivates me to learn more than just what UI/UX teaches. I hope that I can get inspired from her and do much more things that I think are useful and cool.     

Comments

Post a Comment

Popular posts from this blog

Major Project // Final Submission

-
Image
Week 1 - Week 16 (22.04.2024 - 09.08.2024) Britney Chow Pei Jun / 0350043 / BDCM Major Project Progression INSTRUCTIONS PROGRESSION Week 1 - 2: For the first week, we started our class with Mr. Asrizal giving us a brief on what major project is. He told us that this time we're allowed to be in groups to work on our major project. Furthermore, Mr. Kannan also mentioned how we should brainstorm for our major project. After that I started to think how I should proceed with my major project while in the meantime, searching for partners. I then started to group up with Jia Yee for my major project. We then started to brainstorm for ideas, both of us have came up with all sorts of ideas, yet none of them feels like it would be best suited for us. After coming up with a few ideas we think could work, we started organizing it: Fig 1.1; Ideation 1; Week 1 Fig 1.2; Ideation 2; Week 1; ...
Read more

Game Development // Task 1: Game Proposal

-
Image
1.9.2023- 29.9.2023 (Week 1 - Week 5) Britney Chow Pei Jun / 0350043 / BDCM Game Development Task 1: Game Proposal LECTURES/EXERCISES WEEK 1 In this week's class, we are required to review a game made by our seniors. Fig 1.1; Reaper Test Game; sauce:  TDS Gamezone ; Although the graphic of this game does not feel as good as the other game in Gamezone. However, it is still nice as it uses simple shapes and design, the colors used in the game does not feel very out of place, the background also feels alright, but for my first time playing this game, I did not know about the environment of the game. Furthermore, the music chosen also able to fit in to the game itself. The story of the game is nice as there's a goal behind it. Due to the limitations the developer faces, there won't be more to the story. Moreover, the movement of the character is slightly "slippery" as it sometimes slipped even th...
Read more

Design Principle: Project 2

-
Image
11.10.2021 - 31.10.2021 (Week 8 - Week 10) Britney Chow Pei Jun / 0350043 / BDCM Design Principles Lectures and Project 2 LECTURES  Introduction A designer's role is to solve problems with effective visual communication. Ranging from personal goals to community events, and from corporate functions to world changing projects. Observation Be attentive to your surroundings Pay attention to the details and to be analytical about them Sources of observation can stem from artifacts, daily happenings, physical surroundings, and such.  An active act of acquiring information through the senses, of a subject matter in its natural setting. Senses are important for us to know, feel, understand, analyze and even plan what we want to do. Important to designers as it enables them t...
Read more