SixD

SixD

SixD

SwiftUI & Interaction Design

SwiftUI & Interaction Design

SwiftUI & Interaction Design

SixD comes from my vision of creating a bridge between designers and developers. It empowers people to design and prototype with SwiftUI and develop apps with great design. Designed and Developed by Haolun Yang. Awarded by Apple WWDC23 Swift Student Challenge.

SixD comes from my vision of creating a bridge between designers and developers. It empowers people to design and prototype with SwiftUI and develop apps with great design. Designed and Developed by Haolun Yang. Awarded by Apple WWDC23 Swift Student Challenge.

SixD comes from my vision of creating a bridge between designers and developers. It empowers people to design and prototype with SwiftUI and develop apps with great design. Designed and Developed by Haolun Yang. Awarded by Apple WWDC23 Swift Student Challenge.

Get on the App Store

Get on the App Store

Case Study

Case Study

Case Study

Project Background

Project Background

Project Background

As SwiftUI is becoming one of the most future-oriented tools for prototyping with native capabilities and developing multiplatform apps that work across mobile, desktop, and spatial, an increasing number of design prototypers and app developers are starting to learn it.

Informations

Informations

Role: Founder, UI/UX Designer, SwiftUI Developer.

Tools: Xcode (Swift, SwiftUI, RealityKit, UIKit), Figma

Timeline: Mar 2023 - July 2023 (MVP to 2.0)

Research

Research

Research

I conducted 30+ qualitative interviews with people working with SwiftUI, ranging from UX designers learning to prototype with SwiftUI, to developers using SwiftUI in their day-to-day professional workflow, to discover the pain points during their SwiftUI learning and creation process.

Who will be using it?

Who will be using it?

Who will be using it?

SwiftUI Developers

Design Prototypers

CS & IxD Students

Key Findings

Key Findings

Key Findings

It's challenging to discover the available components and modifiers.

It's challenging to find "paste to work" code in documentation or get a preview of the result.

It's challenging to use the components "correctly" with the best practice of design.

What is the problem?

What is the problem?

What is the problem?

Creatives like indie, prototypers, and students who do not fall under the traditional definition of "professional software engineers" are learning SwiftUI. However, they are facing the challenge of actualizing their ideas with code and discovering the available components and modifiers.

What haven't competitors solved?

What haven't competitors solved?

What haven't competitors solved?

SixD is not alone when it comes to empowering SwiftUI creators. However, after interviews and second hand research, here are something I learned about what problems have SixD's competitors not solved.

Details Pro

Some design tools tries to let the user complete the full design workflow inside the app. However, "no code" apps who tries to replace instead of elevate the SwiftUI coding workflow have few of the problems.


First, it is counterintuitive to force the user layout 2-dimension frames in a 1 dimension list.


Second, they has a ceiling of utilizing all the components and advanced capabilities that SwiftUI has to offer.


Third, with limited capabilities, they still have their own learning curves. When people step up from Figma, they want to use invest their learning on the full power of SwiftUI and speak the same language with developers.

Interactful

A list of the components is a good start, but it's not enough for people to just get a reference code. Components list apps don't provide a design tool experience, and the code they provided are neither "paste to work", nor exactly reflects the design they modified and previewed on the canvas.

ChatGPT

While LLM is convenient for creating quick and simple prototypes, without a native real-time preview, it's hard to observe what each modifier does and learn to modify the code with understanding.

Challenge

Challenge

Enable people to learn and create with SwiftUI interactively through a graphical user interface, "what you see is what you get."

What is the solution?

What is the solution?

An interactive design guide.

A visual canvas for modifying SwiftUI components.

SwiftUI code that reflects the design on the preview.

What does each feature solve?

What does each feature solve?

An interactive design guidelines

Let the people design their apps that are easy to use and native.


A visual canvas for modifying SwiftUI components

Let people understand what's possible for each component and modifier and compare the results easily.


SwiftUI code that reflects the design on the preview

Let people understand the relationship between the design change and code modifier, and use what they created in Xcode.

Additional Features

Additional Features

An interactive guide that onboards the user with UI design fundamentals with "How to do it with SwiftUI".


An SF Symbol browser that allows the user to search with natural descriptions ("code" instead of "chevron.left.forwardslash.chevron.right".)

Achivements

Achivements

Awarded by Apple WWDC23 Swift Student Challenge.

Designed and developed the app from the ground up.

Top App Store rank for "SwiftUI".

Launched with visionOS on Day 1.

4.9 out of 5 rating worldwide.

Copyright © 2024 Haolun Yang. All rights reserved.

Copyright © 2024 Haolun Yang. All rights reserved.

Copyright © 2024 Haolun Yang. All rights reserved.