APPLICATION DESIGN II - FINAL PROJECT

-



Week 1 - Week 14

Phoebe Ansel 0340165

Application Design II

Final Project 

INSTRUCTIONS    



Final Project

For our project, we had a collaboration with the business school and IT school. We were tasked to create a mobile app for the business school. They wanted to create a virtual fitting room app that would allow users to see how the clothes would fit them virtually so that wouldn't have to try them on.

We were first divided into 2 groups to work on the user flow, user journey, and wireframe. 

We did our work on miro:


We then had a meeting with the business school students and made changes after receiving feedback from them. After doing the user flow and user journey, we started working on our wireframe. The idea was for both teams to create wireframes and then choose and combine them together to create a better version of it.

my group's wireframe

We had a meeting again with the business students and also showed Mr Razif our work, he then chose which elements we were going to use from each group's wireframe for the final wireframe design.

This is the result of the final wireframe:



After finalizing the wireframe, we started working on the design and the proposal to give to the business as well. The Business team specifically asked for the layout to be "pink" themed and gave us the color code to use for the design.

We divided the workload and each worked on several pages for the hi-fi design.


These are the proposal slides:
After we submitted our work to the IT team and the Business team, we started to work on our individual projects. We were asked to create a simpler version of the app and to code it into a functional app using jquery mobile in Dreamweaver.

We had to do several pages which are:


1. Splash logo page
2. Login Page
3. Main Page or Home Page
4. Category Page or Search Page
5. Scan Page
6. Virtual Fitting Page

I decided to make a few changes and redesign the app's layout, however, I chose to maintain its initial theme and color. 

This is the result of the redesigned app layout:


 I then exported the assets on Illustrator to get the SVG versions, and a higher quality png version as well. After that, I started working on the coding on Dreamweaver.

coding process on Dreamweaver

This is the final result:





Comments

Post a Comment

Popular posts from this blog

MAJOR PROJECT

-
Image
28/03/2022 - 27/04/2022 (Week 1 - Week 14) Week 1 During our first class, we were briefed about what to expect for our major project / final year project. We were given 3 different pathways to choose from: 1. To find a client and work with them 2. Do a project based on our previous dissertation  3. Do a project based on UNSDG's Goals The first step was to choose one of the pathways and then think of a specific project we want to do. After doing research, I decided to do a project based on UNSDG's Goals. _______ Week 2 This week I started looking into what I could do to fulfill the specific UNSDG target and goal I chose. I chose UNSDG's third goal, "Good Health and Well-being" which is to ensure healthy lives and promote well-being for all ages. I wanted to specifically focus on Mental Health which is mentioned in Target 3.4 -  "to reduce by one-third premature mortality from non-communicable diseases through prevention and treatment and promote mental health
Read more

ADVANCED INTERACTIVE DESIGN - PROJECT 2

-
Image
Week 5 - Week 10 Phoebe Ansel (0340165) Advanced Interactive Design Project 2 INSTRUCTIONS   Project 2 For our second project, we had to create an AR filter using Spark AR. We were allowed to choose any theme and concept for our filter as long we followed the basic requirements, which are: 1. use face tracker 2. Use UI picker (min 3 options) 3. Background replacement 4. Use face interaction patch  For my filter, I had two ideas. The first one was a music-themed filter based on music genres. The second idea was to do a "movie" themed filter, which is based on movie genres. The idea was to create 4 different filters based on 4 movie genres, which are Horror, Romance, Crime, and Drama. I decided on doing the second idea.  I started by creating these frames in photoshop: music themed frame in photoshop movie themed frame in photoshop After receiving approval for my idea from Mr. Lun, I  continued working on my assets in Photoshop and Illustrator. design process on illustrator Af
Read more