Application Design I: Project 1 / Mobile Application UI Documentation

Seojeong Kim / 0350085

Application Design I / Bachelor of Design (Hons) in Creative Media

Project / E-Portfolio

Instruction

Mobile Application UI Documentation

Lectures: App Design I - Lecture Digital Documentation

Before starting my project 1, I need to get the basics of a UI document. Also, this document will be used until I complete the final project.

Documentation

- Research

- Define

- Ideate

- Design

- Prototype

- Iterate

Overview (Define)

- Project summary

- Problem

- Solution

- Definition

Focused, actionable, and purposeful. Project’s goals, objectives and vision.

Discovery (Empathize)

- Market Research

- User Research

- User Personas

- Key Findings

Essential user research includes user personas, empathy maps, user journey maps, interviews, market research, and any other information that pertains to the customer.

Design (Ideate)

- Sketch

- Wireframe

- Usability prototyping

- Key Findings

A summary of initial concepts and sketches of how the product’s journey began and the thought processes behind the product’s features. Also include sprints and brainstorming sessions reports.

Prototype (Test)

- Final Design

- Prototype

- Documentation

Presented to stakeholders to explore the product and understand the context behind usability testing and design concepts.

Handover

- Engineer

- Developer

- Video Prototype

Summarize your UX documentation and include the project’s goals, objectives, and vision. Allows every stakeholder to read about the UX design process and how the product has evolved.

My Mobile Application UI Documentation Link:

PDF Files:

Description

Research:

- Research about UI Design Starbucks MY Application

The UI design of the existing Starbucks Malaysia app is simple and comfortable to look at, but it is not a very practical and attractive UI design. First, the basic font is not attractive to look at, as it uses a round typeface that does not fit Starbucks. Next, the combination of matching colors also doesn't go well together.

In this Application Design I project, we need to redesign an existing app that is judged unsatisfactory in terms of user experience or interface design. At first, I was very worried about which application to choose. First of all, I wanted to select an application that people use frequently, the reason is that the criteria are clear, and the more examples there are, the more information about the app that I can upgrade.

The app I ended up choosing was the 'Starbucks Malaysia' application. The main reason I chose this app is because it's in high demand, but it has a rating of 1.2 out of 5 based on the Apple Store. I thought that there must be a reason for the low ratings of all applications. So I chose the 'Starbucks Malaysia' app.

I researched some users' critical app reviews. For all the critical reviews, most of them criticize the app's poor UI design and usage. I had to redevelop it with a better UI design using these reviews as feedback.

When I looked through all the reviews, most of the stories were 'this app is useless'. First, Starbucks is a service business that provides drinks and desserts. Therefore, this application must be equipped with various discount factors or functions that can help people. However, if you look at the reviews, all consumers who give it a 1 star say that this application is too useless. And if you look at other reviews, it is written that this app was made with very little understanding of UI/UX principles. The next most common complaint was login issues. Quite a lot of people say they can't use the other features because they can't sign up for the application. (I am also having the same problem) So I have to think about how to redesign this application, which has an average score of 1.2.

Discovery (Empathize):

Business Problem:

- Starbucks is an application used by people all over the world, so it has a lot of demand. The most famous beverage application would be Starbucks. Even in Malaysia, Starbucks has a very high market share. It's ridiculous that the average rating for such a popular application is 1.4.

Business Solution:

- As mentioned earlier, UI design makes the first impression of an application. It also indicates that there is a strong link with the business of the application. A rating of 1.4 has a big impact on business. This is because it is highly likely that consumers will not download this application after seeing this rating. In order to solve this, it need to further develop the UI design first.

UI Problem:

- People first look at the UI design of an application and make a first impression. As much as that, UI design occupies a very important aspect in applications. As mentioned earlier, in the critical review of this application, many critical reviews were written about the UI design of the Starbucks Malaysia application.

UI Solution:

- Therefore, in this project, I will develop a new Starbucks Malaysia application UI design through my research and ideas, leaving behind the basic UI design of the Malaysian Starbucks application. I need to develop my UI design based on the thoughts and experiences of users.

Market Research:

One notable way that Starbucks conducts its own form of market research is through its My Starbucks Idea platform, which it rolled out in 2008 as part of the company's "Transformation Agenda" at the time.

Since then it has gone through some different iterations, but the basic idea behind it remains the same: customers, potential customers, and employees can go to the website to submit any ideas they have for new offerings, changes they’d like to see to anything that already exists, requests to bring back old products, and more.

Starbucks regularly tests new products in some of its stores, which helps the company determine if changes are needed before launching products in other markets, or whether to continue launching them in other markets. Starbucks also uses data from several market research companies and data collected from its own stores to form new product lines.

Malaysia Starbuck Market Data Analysis

Starbucks has been in Malaysia since 1998 and has more than 320 stores all over the country (Starbucks, n.d.).

As of 30 June 2022, when Berjaya Food posted its most recent financial results, Starbucks operated 356 stores across Malaysia. The US coffee giant opened its first Malaysian store in December 1998 in Kuala Lumpur.

User Research / Interview

Question List:

1. Do you frequently use the Starbucks Malaysia application?

2. What features do you primarily use in this application?

3. What are the advantages of this application?

4. What are the disadvantages of this application?

5. What needs to be fixed to make this application even better?

User Personas: Mico Jeong

Q. Do you frequently use the Starbucks Malaysia application?

A. Sometimes I use the app to check the new menu, but I don't use it often.

Q. What features do you primarily use in this application?

A. To check what menu is available? None of the features of this application are useful. Since it is difficult to deliver, Grab Food is much more convenient to use.

Q. What are the advantages of this application?

A. It is very convenient to use my GPS to find Starbucks near me. You can find the time and contact information of the cafe.

Q. What are the disadvantages of this application?

A. All other functions are very inconvenient. First of all, I am not a member of this application either. Because I need email approval to sign up for this application, but I'm getting more than 10 errors about this.

Q. What needs to be fixed to make this application even better?

A. Once you sign up for the application, they need to fix the error first. That way you can use other functions.

User Personas: Suzy Lee

User Personas: Andrew Lee

Design (Ideate):

Key features of the app:

Typography

- I searched for different types of typography for my UI design. Since my topic is 'Starbucks', I preferred a simple font with a gothic style. Among the various typography, I looked for various fonts such as 'Arial', 'Impact', 'Bahnschrift', 'Gill Sans Std', 'S-Core Dream', etc. So out of these, I thought the font that best suited my idea was 'S-Core Dream'. As a font with a full rectangular structure, it is a style font with a modern sensibility in a retro form.

Color Palette

- I first extracted the main color from the Starbucks logo. The color was #00643C 'Cadmium Green'. Starting with 'Cadmium Green', I chose a color that was one level down, one level lighter, two levels lighter, and black.

Icon Design

- I would like the icons to be used in my UI design to be round rather than angular. The reason is because my typography is an angled gothic font, so if the icon is angled, it may look too sharp. So I researched the icon into a round shape.

Grid Systems

Device: Iphone 13

Frame Size: 390 x 844

Buttons

- Buttons were also identified through various research, and simple buttons were the most convenient for people to use. So I wanted to make my buttons as simple as possible.