Quicksling
Leveraging Apple's Design System To design, develop, and deploy an app to the app store
case study, design system, design, development
![](https://framerusercontent.com/images/86DPzY9zLSLmNvwEZENL6pMn1ig.jpg)
Tools used
iOS Swift Objective C Adobe XD
Challenge Statement
My task was to establish a new style guide using Apple's Human Interface Guidelines with client's brand, and to develop an ios app. for the client's contractors to effectively make quotes while on site with a potential customer.Starting at the atomic level
Framer allows you to create fully interactive and animated components, and even allows you to nest components within other components. We’re building a navigation bar component for a website that will contain two different kinds of nested components, with their own unique interactions. Our project will contain a Navigation bar that contains various nested components, namely five Nav items and one Shopping cart component. The design of our nested components, the nav list item and the shopping cart, will impact how we design our navigation bar. For this reason, an optimal workflow includes starting with the 'deepest' nested component and building up from there.
![](https://framerusercontent.com/images/CloRkXbzJgggH29mMlCxx94AbQ.png)
Understanding
The journey begins by fully understanding the client's business and their goals. I evaluated responses from the list of questions I asked the client. I researched the company and their customers to get a sense of their brand and their values.
The average age of contractors are above 30, and thus may not be familiar with mobile interfaces. It was imperative that the app be intuitive, and familiar. Incorporating familiar patterns with Apple's Human Interface Guidelines helped to reach desired behaviors.
Creating Guiding Principles
After understanding the client's brand, the desired behaviors, and users I began to establish key principles for the project which are:
quick
easy
intuitive
efficient
These principles will guide my design decisions through the project's timeline. these are my 'north star' on the journey of building a useful product.
Wireframes and sketches
I wanted to keep my designs focused on 'efficiency'. Placing myself in the user's shoes, as a contractor I quickly want to convey to the home owner, my client, what products they need.
![](https://framerusercontent.com/images/UhjEt9IpJ5rZyQgLLyeGnip8ASc.jpg)
![](https://framerusercontent.com/images/BAQNRLu2Ue4OMZZBHNIeLRoKkw.jpg)
![](https://framerusercontent.com/images/UDgWRA9kqTmXaOt5YYSMPJZE.jpg)
![](https://framerusercontent.com/images/fsHjWv7RnK3RUILvS35yz60tgw.jpg)
Iterations & Prototype
after the first iterations of prototypes I sought feedback from the stakeholders and made adjustments.
![](https://framerusercontent.com/images/Tw98pCntA9Q4hMcpzsLfzPX5IcA.png)
![](https://framerusercontent.com/images/b0D9AhXqVpBiAYPv1KBKaKsT8E.png)
![](https://framerusercontent.com/images/OW27e9jxYTGUIZ2hmKhPQ69tJw.png)
Results and Reflection
The key challenges were accomplished and I became more adverse with the Swift, Objective-c languages, XCode, and the MVVM architecture. From a design perspective being able to incorporate good practices and understand a different design style with Apple's Human Interface Guidelines improved my other works greatly.
Currently the app. has a 5 star rating in the app store, thousands of downloads, and the client has expressed such gratitude of not only accomplishing all features within the scope but going above and behind. Their product has improved contractors workflow, provided customers an easier path to purchasing, and will be a useful product for a lifetime.
you can download the app or interact with a prototype here
![](https://framerusercontent.com/images/WTEM6pUHyhZZ1qK0WPs4SjKnck.png)
© Patrick Tunga-Lergo 2024