Labels

Collaborative Design Practice / Task 2 / Brainstorming to Ideate the Solution for the Problem Statement

14.5.2024 - 28.5.2024 (Week 4 - Week 6)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Collaborative Design Practice
Task 2 / Brainstorming to Ideate the Solution for the Problem Statement

INSTRUCTION

Task 2 Outline

Using defined human-centered problem statements, attempt to think outside the box to identify new solutions to the application. Use various ideation methods, such as brainstorming, to consider the growth of the final product. At the same time, we also set out to identify art direction, as we needed to move forward with a concrete design.

1. Division of roles in Group Members
Since I am a UI/UX major, I was assigned to be the main designer of the app. The website, icons are left partially to other members, while members majoring in video will be in charge of planning pitch videos and other projects. Finally, when all the ideas are finalized, the slides for the presentation and documentation will be done by all members.

2. Identification of user flow and structure in the application

Fig1: Estimated User Flow (from Initial App Proposal)

We first created a user flow from the functionality assumed from the proposal in order to understand the structure within the app, in parallel with Task 1.

Fig.2: Organized Structure in the App

From the user flow, the structure in the application was organized. There are 3 types of parts: implemented only on the homeowner side, for contractors only, or a common system. It is also conceivable that the bottom navigation and other specifications will differ on each side, resulting in a slightly different appearance.

The detailed specifications and elements of each page are finalized in the following wireframing phase.

3. Wireframing
Fig.3: Wireframing


On both the homeowner and contractor sides, priority was given to creating pages with the main functionality and identifying the elements needed for each page.

New elements added at this stage include the content of the single service page and specifications for the edit screen, and service insights for the contractor main page.

4. Determination of Design Regulation for App UI

Fig.4: App UI Design Regulation

4-1. Logo
First, the logo was finalized by other members, but it was intended to be used by both bright and dark. in Fig.4, different logos are used by homeowners and contractors. However, after final discussion, we decided to use a common logo so as not to confuse users.

4-2. Font
The fonts were changed because both group members and lecturers agreed that the client's recommended fonts were not suitable for screen display, although I had personally considered this since Task 1.

The standard font is Roboto, one of the web standard fonts. Multiple fonts are set on the website along with their priority, and alternative fonts are displayed in case of font missing. However, this may cause minute deviations in screen design. In particular, the use of simple, well-known fonts was deemed desirable, as design disruption due to unanticipated indentation is not very desirable.

The accent font used in the logo was also to be utilized as a headline on the advice of the lecturer. This reduced the monotony of the screen design.

4-3. Color Scheme
Two color schemes were created for the application from the standard color palette. On the homeowner side, where orange is the standard, navy is used as an accent. On the contractor side, this is the opposite. And while a color scheme that is too complicated is undesirable, having only one standard color would not allow for a wide range of design possibilities. Therefore, sub-colors were set for each scheme, such as orange + light orange. In the end, there are four standard color schemes, including the base and accent colors.

4-4. Other Design Elements
The corner radii of the elements used in this application, including the button design, carousel, and card design, were identified and made common. This creates a sense of unity in the overall design of the application. Icons designed by other members will be used for the menu. These are lined and used as background patterns. Both of them unify the overall atmosphere.

5. Screen Design Development
I will proceed with the design according to the specific regulations as described above. The Figma board for the design is below.


Fig.5: App First View (Data Loading)

Fig.6: Log-in (Homeowner)

Fig.6: Main Page (Homeowner)

Fig.7: Search Results Page

Fig.8: Single Service Page

Fig.6: Log-in (Contractor)

Fig.10: Main Page (Contractor)

Fig.11: Content Editor

6. Prototype Design
Fig.12: Prototyping

Created page transitions and simple movements in Figma, assuming the movements when viewed on the actual device. We do not envision any complex moves at this time and will consider them with the rest of the pages in the development period for W9.

Fig.13: Prototyping Play Demo

The actual activation was filmed as a video for presentation purposes. No sound is included in the presentation, as the presentation will explain verbally.

6. Slide Making for W6 Presentation and Documentation
Fig.14: Presentation Slide Making

From this point on, the group members will work together. In addition to my app design, we consolidated the various processes in place for this project, including microsite design, pitch videos, promotional video storyboards. Meetings to create this took place offline.

FINAL OUTCOME

Week 6 Presentation Slides
 

Project Document
 



REFLECTIONS

Experiences
In Task 2, as in Task 1, we spent more time thinking about the detailed specifications of the application. There was some group discussion, but basically each member of the group worked separately on the tasks they were responsible for. I was in charge of the app design, which I believe relatively proceeding well.

Observation
In designing this application, I attempted the assignment with an emphasis on formalizing and regulating the process. I am also concerned that the final design did not turn out to be that great, despite the fact that we discussed each of the settings in great detail. Personally, after seeing the other groups' presentations, I got the impression that our design was a little less bold. We will need to further study to create a good design.

Findings
I felt a difference between what the client wanted and what I thought was a good design. It is quite difficult to try to provide the best design within the scope of the client's satisfaction. I guess this is an never-ending dilemma for designers.
Labels:

Comments

Post a Comment

Popular Posts