UX Design | Group Project
13/09/2023 - 29/11/2023 (Week 3 - Week 14)
Metta Angelica (0349095)
Bachelor of Design (Hons) in Creative Media
UX Design | Assignment 2
List
Lecture
Instructions
Continuing from the exercises, we use what we find from the last task to create our own mobile app design, and using MIRO we all start brainstorming for ideas.
Brainstorming
Finding our concepts
On the first stage of the brainstorming, we all try to gather many themes of clothes we can gather.
 |
| Fig. 1 |
From there we decide which theme we want to go for by using the random wheels and voting, eliminating the theme one by one until the last one left.
 |
| Fig. 2 |
With that, we finally started our moodboard.
 |
| Fig. 3 |
For the aesthetic, we choose to have a contrast and appealing theme that is catchy and stylish.
 |
| Fig. 4 |
Then for the app style and layout, we chose a style with rounded corners for the cute and appealing looks.
 |
| Fig. 5 |
For the colours, we took a set of warm but also contrasting colours to match the first aesthetic.
 |
| Fig. 6 |
Persona
Another task is to make 3 personas of our potential customers.
 |
| Fig. 7 |
 |
| Fig. 8 |
 |
| Fig. 9 |
Emphaty Map
 |
| Fig. 10 |
 |
| Fig. 11 |
User Journey Map
 |
| Fig. 12 |
Wireframe
 |
| Fig. 13 |
While brainstorming, we also think of making another layout in case of people who don't want to sign in or who prefer to be guests.
For a better view, here below is the link direct to our MIRO board.
MIRO Board Link
Wireframe Design
After brainstorming stage we start creating our wireframes.
In the mids of finishing our parts sometimes we would help each other to create elements to be used in the wireframes to keep good consistency with each other. What I am working on are:
- Browse page
- Clothing overview page
- Deals & voucher page
- Input measurement page
Browse Page
 |
| Fig. 14 (Browse Page - Wireframe) |
Clothing Overview Page
 |
| Fig. 15.1 (Clothes overview page - Wireframe) |
 |
| Fig. 15.2 (Clothes overview page - Wireframe) |
 | |
|
Deals & Voucher Page
 |
| Fig. 16 (Deals & Voucher page - Wireframe) |
Input Measurement Page
 |
| Fig. 17 (Input Measurement page - Wireframe) |
Other Elements & Icons
Some of the elements used in the pages were made by my groupmates and we reused it to keep the consistency with each other page.
 |
| Fig. 18 (Bottom page elements) |
 |
| Fig. 19 (Top page elements) |
Final Wireframe
 |
| Fig.20 (Full overview of the wireframe) |
Final Design Process
After finishing the base or wireframe design for our app. The next thing we did was to find a good typefont to match with our app theme.
 |
| Fig. 21 |
Then we look for pictures and themes in pinterest that we could use for our design (Fashion clothes, background pics, etc.).
After finding pictures and all, we finsihed our app design.
But that is not the end yet. The next thing to do is to make it into a working app. Using Figma it is possible by linking the page and elements to immitate a real working app.
After linking the page, we need to make a functional game setting using Figma. Unfortunately with Figma, we can't make a fully functinal game, so we just create a similar way of how the game would work.
Final Design
Prototype Testing Link
Slide Proposal
After finishing our slide the last thing to do was to present our final presentation. I was unable to attend due to urgent personal need and ask for permission from both my teammates and teacher.
Comments
Post a Comment