Application Design I / Project 1
29.08.2022 - 30.09.2022 (Week 1 - Week 5)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Application Design I
Project 1: Mobile Application Proposal
LECTURES
 |
| Fig 1.0: Thumbnail |
What are the differences between UI and UX?
1. User Experience
UX would say that button should physically press down when you click it.
• UX Designer
UX Designers focus on the structure and layout of content, navigation, and how users interact with them. The types of deliverables they produce include site maps, user flows, prototypes, and wireframes, which are more focussed on the underlying structure and purpose of the software. The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.
2. User Interface
The UI would be a series of buttons and how they look. UI Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. It brings together concepts from interaction design, visual design, and information architecture (IA).
Users have become familiar with interface elements acting in a certain way, being consistent and predictable in the choices and layout design. Doing so will help with task completion, efficiency, and satisfaction. Interface elements include but are not limited to:
– Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
– Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
– Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
– Containers: accordion
• UI Designer
Focus on the way the functionality is displayed and the fine detail of how users interact with the interface. They produce the visual comps and functioning front-end code. This is very much about polished final production quality outputs.
Designing for the USER
Successful user interface design improves products. In fact, in some ways, the UI is the product, according to Jakob Nielsen, User Advocate and Principal of the Nielsen Norman Group. “If people can’t use a product, it might as well not exist.” This concept is especially true in a world where every marketplace-from books to electronics-is highly competitive.
• Common Characteristics
There are a couple of standards that identify effective design across the board (regardless of media or discipline). The first consideration is determining who the user is. The design must be as broad or narrow as necessary to accommodate the intended user. There is no recipe that’s going to make your design appropriate for all applications and users.
Listen to your users and observe them interacting with your design. Think ahead of who will actually be using your product and go from there. Graphic designers have been reared on a variety of formulaic methods and approaches for successful design. It helps to think of any designed piece as an interface, be it a book, shampoo bottle, retail store, or Web site. In order to make a connection with the user, the design’s interface must achieve its mission-communicating information through the printed word, dispensing a product, projecting an image, or creating a space that’s easy to navigate. Changing the focus from the designer’s aesthetic to the user’s need allows the product to be designed in a way that helps the user succeed.
• Golden Rules of Interface Design
Interface expert Nielsen identifies five usability attributes designers should put more attention to when creating a design interface, no matter what their medium:
– Ease of Learning
– Efficiency of Use
– Memorability
– Minimize Errors
– Satisfy the User
Do's and Don'ts of UI Design
User Interface is what a user sees when interacting with any product, application, or platform. Engaging user experiences are built on a foundation of solid interface design. As a beginner, we all get fascinated by designs of different websites and wonder how to create such designs on our own.
There are a few things to consider as fundamental design concepts for building clean, efficient interfaces for a broad set of users.
• Strong Logo Position
 |
| Fig 1.1: Strong Logo Position in UI Design |
• Provide Hierarchy
 |
| Fig 1.2: Provide Hierarchy |
• Don't Use Placeholders as Labels
 |
| Fig 1.3: Don't Use Placeholders as Labels |
• Primary CTA button should always stand out
 |
| Fig 1.4: Primary CTA button should always stand out |
 |
| Fig 1.5: Format the text properly |
 |
| Fig 1.6: Use card instead of radio button |
 |
| Fig 1.7: Provide a sample and use simple email address text field |
• Use color psychology
 |
| Fig 1.8: Use color psychology |
 |
| Fig 1.9: Horizontal Alignment |
• Keep fields minimal
 |
| Fig 1.10: Keep fields minimal |
• Properly place CTA button
 |
| Fig 1.11: Properly place CTA button |
Defining Project Goal
1. Project Goals
– What do you want to achieve
– What is your desired outcome
2. Why?
– What needs to be solved?
– Input real user data
3. Where?
– Type of OS (Android OS, iOS, macOS, Windows, etc.)
– Input real user data
4. When?
– Draft your timeline
5. Who?
– Who is experiencing the pain points
6. Success Metrics
– State your Key Performance Index (KPI)
INSTRUCTIONS
Project 1: Mobile Application Proposal
For the first project, we are required to redesign an existing app that you find unsatisfactory in terms of the user experience or interface design. It is subject to preliminary approval by the module coordinator. Students are required to create proposal documentation for their mobile application project. Students need to do surveys, interviews, market studies, and research on the selected topic.
I was thinking of several apps which can be redesigned, but in the end, I chose Beyond LIVE Mobile App to redesign.
 |
| Fig 2.1: Beyond LIVE |
Below here is some of the original designs of Beyond LIVE Mobile App.
 |
| Fig 2.2: Beyond LIVE Mobile App's Landing Page & Navigation |
 |
| Fig 2.3: Beyond LIVE Mobile App's Landing Page #2 |
 |
Fig 2.4: Beyond LIVE Mobile App's Landing Page #3 |
 |
| Fig 2.5: Beyond LIVE Mobile App's Product Page |
 |
| Fig 2.6: Beyond LIVE Mobile App's History Page |
Before starting, we are to fill out a template from Miro Board our business problem, and the solution idea of the app that we chose to redesign. Following the identification process, I also created the original flow chart of the Beyond LIVE Mobile App. Here's the embed link of my Miro Board.
What we should have in our proposal (First Document):
- DISCOVERY SESSION; Surveys, interviews, market studies, and research
- HOW MIGHT WE; Project Name, Key Partners, Key Activities, Key Resources, Key Proposition, Customer Relationship, Channels, Customer Segment, Cost Structure, Revenue Stream
This is the final proposal for my redesigned app.
FEEDBACK
REFLECTIONS
Starting the project with the proposal is absolutely a good idea. Actually, I am kinda lazy to create things like this because my brain is very poor for something like this. However, I think this proposal will help me a lot in doing the redesigning project. I can carry out a survey to see what the public desire and also have market research to get the idea to bring a better design. So I can say that overall I had fun doing this proposal.