The «Journey» from UI kit to live mobile application

The case story of how a ready-made UI kit with templates helped Luke O'Brien to release the app of his dreams.

Case Studies

Published on

July 29, 2020

|

4 mins

Blog

iOS / Android app case study — From Figma UI kit to application release

Navigation

Subscribe to newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing you agree to with our Privacy Policy.

Share this post

Jamshed Kasimov

To save on design

<span class="blog_big-paragraph">In this case study, we want to share with you the real story of career growth from the sales manager to an entrepreneur who purchased Figma iOS kit and created the Journey mobile application, a social network that helps you learn new skills, achieve your goals and create communities around these achievements.</span>

Buying a UI kit today is the «lean design» approach, so the following goals are pursued:

  • accelerate the design process;
  • understand how the architecture of a design system is built and learn how to follow it;
  • to save time and money - this is, in particular, a lifesaving option for solopreneurs and firms who create their startups from scratch.

{{spacer-64}}

{{setproduct-gpt}}

{{spacer-64}}

<span class="blog_subtitle-caps">IDEATION & PROBLEM</span>

Putting $100K for live app

To create his own app was a long-cherished dream of Luke O'Brien, the founder of «Journey». A few things inspired him to create this application:

  • Communities in which he received invaluable life and professional experience are usually difficult to find.
  • He always liked to learn something new, but difficulties arose due to lack of time, lack of knowledge of where to start, or due to the lack of like-minded people.
  • He was constantly in search of such a social network that would not allow him to procrastinate, but rather set goals, put the phone aside and use the precious time for things that matter to him.

That's how the idea of creating «Journey» was born, and in April 2019, Luke started working on his application. And when you come up with an idea, you can start designing the app and then make it work by programming. That easy, right? Not really.

Having no professional skills in either design or programming, Luke had a meeting with a web design and development agency. However, his inspiration from meeting them did not last very long: the amount of $80-100k that they requested turned out to be much higher than what he was counting on.

Realizing the thorny path of the solopreneur, he decided that he should put maximum efforts and do a lot by himself, minimizing the costs along the way.

{{spacer-64}}

<span class="blog_subtitle-caps">WIREFRAMING</span>

Working on user flow

After countless hours spent in research, reading various resources, brainstorming with friends, the time to start the real work had come.

Luke wanted his application to have a convenient and personalized interface.

AirBnB and Instagram were chosen as reference points for Journey's UX (and yes, AirBnB's "Explore" section and Instagram's "Feed" section are really good).

To create a clearer vision of how the application will work, user flow diagrams have been compiled. These diagrams helped to see in more detail the users' step by step process in using the app.

Next, Luke and his friends began sketching wireframes by hand:

They worked hard on getting the best visual hierarchy. At the stage of building the wireframes, they used the help of target groups to get the impressions, and Luke could have a clear idea of which wireframes are best to be used. After compiling the entire UX architecture, a Marvel low-fidelity prototype was born.

{{spacer-64}}

<span class="blog_subtitle-caps">PROTOTYPING</span>

Working on screens

The moment has come to design the user interface. As we mentioned above, Luke did not have strong design skills, and creating a beautiful user interface could become an extremely difficult and painful process for him. But this is exactly what commercial design systems and UI kits are for. With their help, even an amateur in design will be able to create a competent UI.

In our case, the Figma iOS kit became such a product. Perhaps Luke would be interested in our other product - Most iOS system, with ideal native components across all Apple guidelines. But, for the development on Flutter, the first was more suitable than «Most». The significant advantage of Flutter development among native Swift is an objection to cover iOS and Android devices at once. One app development environment for all.

So, Figma iOS kit has a huge number of different components and templates, which, moreover, are suitable for all the platforms. With such an extensive library of elements at hand, Luke had a great flexibility to work on the interface.

It's just Most in action. Recommended for native Apple HID apps.

According to the founder of the application, it is difficult to overstate how much time and money Setproduct saved him when developing «Journey». Only in the process of working on the interface can you understand the full power of the UI kit.

The whole system is built on the magic of components, when you make a change to the master component, and all instances of this component automatically change. Of course, this also applies to the color palette and typography of the UI kit. They have the same nature of dynamic changes as the components. I.e. within minutes you can change the whole look and feel of your app. As a result, the speed of design and particularly iterations increase.

"It is difficult to overstate the amount of time and money Setproduct saved me in designing Journey. It is an insanely powerful tool. The more you understand how to use it, the more powerful it becomes. Not only did Setproduct save me the cost of a UI designer, but it also actually increased the speed of design and particularly the iterations thereafter. Now for any change I want to make or new features I want to add, I can do so in a matter of minutes"
- @Luke_OBrien Founder of Journey app.

Luke created the app UI design in less than a month. Considering that it took him some time to learn Figma, and that he was working on it part-time – we think that the result is very impressive. And this once again shows the difference that commercial UI kits make.

{{spacer-64}}

<span class="blog_subtitle-caps">DEVELOPMENT</span>

Hiring team to code

Being a lifetime self-learner, and having managed to create a good UI design, Luke was ready to jump into the world of coding. Luke really wanted to finish the job himself and write the code for his app. He spent 8 hours a day studying Flutter. But after a month of intensive training, he realised that he had not advanced far in knowledge, and that it would take him much more time to master the art of programming.

He hired experienced programmers who developed the Journey for an affordable price and a short time. Of course, this was a great feeling for Luke - to see how the design of the interface, which he created himself, comes to life and turns into a functional application.

However, after the release of the beta version of Journey, it became clear that there will be a long and difficult path of testing and iterating. A path that dragged on for several months.

{{spacer-64}}

Before the release

When your application is developed, you may have a deceptive feeling that all the work has already been done. However, there is a lot that still needs to be done. «Journey» needed a great content. Also, it was necessary to set up an e-mail newsletter so that users could receive notifications in a timely manner. And if the newsletter was handled by a competent specialist, copywriting was the problem that Luke wanted to solve himself.

In copywriting, as well as in any other craft, there are times when you feel like a genius, and there are times when you feel like a completely mediocre. That is what Luke experienced, when he went through numerous iterations of ideas when writing a new text, conducting brainstorming and research on the topic of readability of content.

Knowing that copywriting is an iterative improvement, Luke conducted surveys of his audience not only on the UX and UI of his app, but also on the attractiveness of his content.

{{spacer-64}}

<span class="blog_subtitle-caps">USABILITY REVIEW</span>

Conclusions and problems

After the official launch of «Journey», Luke was faced with the problem of user retention. The fact is that after downloading the app, some people could not immediately understand what the value of the product is. As a result, there is a high outflow of users.

We believe this is due to the fact that Luke did not use the services of UX professionals, which ultimately affected the user experience. You can't minimize the merits of Luke and the efforts that he made at the stage of building the UX. There are lots of users who are happy and satisfied with his app. Just take a look at Journey's rating on the App Store (Rated 4.9⭐ out of 5) or read reviews on ProductHunt. Download for Android.

Nevertheless, at the moment he is very actively solving the problem of the users outflow. Аnd we decided to help him with this.

Luke is a productive person — He recreated 80+ new screens for his app

{{spacer-24}}

UX issues we've discovered

  1. On the start screen, we see the video clips that create a good mood, but already on the registration screen we see some inconsistency, a mixture of system and custom typography. The < Back button in the upper left corner is lost, because painted in blue.
  2. Nowadays, it's quite risky to immediately require registration from the users until they have familiarized themselves with the application's functionality. Registration in three steps can scare them away if the users have not found a value for them before that.
  3. Next, we get to the Explore screen with cards, and we are met by a fairly effective introductory instruction. The focus on certain design elements shifts clearly and intelligibly, but does not reveal the entire functionality of the application. For example, it is not clear how to add content and what value it represents to the user.
  4. At the same time, the Magnifier icon is highlighted in the lower tab bar and this is misleading. It turns out that the app is urging us to immediately look for something, but why? It would be logical to start with the Home section, and put the Feed in a separate section.
  5. It would be great to see a unified and consistent font style, dimensions and icons. Some items in the popup menu and system components are not aligned properly.

{{spacer-24}}

But better than we expected!

We rate Luke's app at a solid 7 out of 10 points. And frankly, we expected the worst :) This is a very good result for a person who is far from project management, who launched his own application himself, having traveled a path longer than a year from the idea to release. However, it needs a better explanation of the value for the user in the first steps, because many users might think that this is another Instagram and uninstall the app. Inconsistency in detail is also absolutely normal for a solopreneur. Such moments can always be improved later.

{{spacer-64}}

Pros of buying UI kit

  • Your efficiency increases. If you have a well-crafted library of reusable components, patterns and templates, you can be sure that your time spent on technical things will be reduced. As a result, you can effectively create a user interface and then focus on rapid prototyping and iterations, without the risk of quality loss.
  • You save time and money. If you are a solopreneur, like a hero of this story, then instead of hiring a UI designer, you can buy a ready-made UI kit, and you can create a user interface yourself. You will save time that you could spend on searching for a designer, as well as significantly save money for hiring him.
  • Better collaboration and knowledge sharing. This applies to companies. Because they also purchase UI kits. And when all employees are given access to the system, cooperation and knowledge sharing increase at times. All team members work on the same page, they have a unified system. Also, having a unified system, it is very easy to bring new members up to date.

{{spacer-64}}

Cons

  • Design trends change quickly. Over time, some decisions cease to be relevant, and therefore UI kits need to be reviewed. However, from our side, we make sure to regularly monitor trends and update our products.
  • It takes time to customize the design language of your existing product guidelines. For example, you work for a company that recently purchased a UI kit. It has a lot of necessary components and patterns, but all of them are similar to the elements of Material Design. And the company wants to have its own identity. So in this case you will need to spend some time changing fonts, colors, strokes, shadows, corners radius, etc.
  • Sometimes you will still need the services of a professional UX designer after the purchase. And since UX is the basis and a very important stage in creating a product design, then it becomes a necessity to use the services of a UX designer.

That is why we are launching a Custom Design & Development service based on our design systems. To avoid Luke's problems, then send a brief to hello@setproduct.com. We will make you an app on Flutter, or on React / Angular, taking as a basis any of our design systems presented, so you can browse it within the left panel.

{{spacer-64}}

{{stars-conclusion}}

{{spacer-64}}

Conclusion

"SetProduct was one of the best investments I made during the development process"Luke O'Brien

Leading by his own example, Luke showed what it means to go from dream to action. He did a great job! Having shown his willpower and desire to grow, he accomplished his mission. As a real entrepreneur, he managed to do a lot by himself, and to delegate authority where he needed to. By investing properly, he launched an excellent application. We wish him monetization, development and success in his new projects.

And finally, we want to remind you that the pandemic is not the time to sit back and get depressed. Quite the contrary, a crisis is the best time for growth, experimentation, and the search for new solutions to various problems. As Christopher Columbus once said: "You can never cross the ocean until you have the courage to lose sight of the shore".

Therefore, start experimenting now, take your inner genius to new heights and increase your productivity in whatever business you are currently in. Make sure to check out this article to learn more about increasing productivity while remote.

Share this post

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications
Oops! Something went wrong while submitting the form.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

Congratulations!

You're in! Expect awesome updates in your inbox

FAQs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
No items found.

Our Dashboard Templates Will Make It A Treat To View Data

Experience the magic of data visualization with our user-friendly dashboard templates. Try out our dashboards now and enjoy efficient reporting processes, greater transparency in, among others monitoring and making educated decisions easily.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Related posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Case Studies

5 mins read

Why do we need UI kits: Our customer's redesign case study for ecommerce

Discover the redesign of GTrendz e-shop seller's panel by talented Indian freelancer Narendra Ram, using our Material-X UI kit. See how his work elevates the user experience.

Figma Templates & UI kits

Save time and human resources by reusing hundreds of pre-made templates crafted by us. Based on top notch UX taken from the World's best apps.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Figma iOS kit

Figma library of iOS patterns served as ready-made templates. This UI kit inspired by World's best apps. Based on Human Interface guidelines.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

Most iOS UI kit for Figma

iOS native components and app templates organized into a «Most Design System» fully compatible with Apple's Human Interface guidelines.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Nucleus UI

Nucleus UI contains 1000 components and variants with 500+ mobile screens designed for Figma (including 9 themes from Event, E-commerce, Finance, NFT, etc.).

Figma Android UI kit

Components-driven Android mobile UI library for Figma. Consists of 140 high quality application templates made of total 250+ UI components.

Mobile X UI kit

Customizable & adjustable iOS / Android design system loaded with ready-made 157 app templates based on 860+ variants for 20 components.

Appka iOS UI kit

Customizable & adjustable iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts crafted for Figma.

Full iOS UI kit

Customizable iOS design system with 320 ready-to-use app layouts. You can modify them or use as it is to save time and never design from scratch again.

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma Charts UI kit

Components-driven graphs design kit for dashboards, presentations, infographics & data visualisation. Includes 25+ charts types for all the viewports.

Hyper Charts

Create impressive visuals with Figma's graphs templates – dozens of scalable and customizable data visualization blocks for dark and light modes.

Orion UI kit

Figma library with 40+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Levitate 3D kit for Figma

Components-driven 3D kit to design eye-catching Figma presentations. Helps to enhance your landing page, product or app, brand ident, etc.

Website templates UI kit

Landing pages reusable templates kit based on most effective web design patterns. 140+ dark & light constrained design blocks.

Figma Landing Pages UI kit

Landing pages templates library based on constrained & organized components aimed to speed-up the production of effective websites.

Zeus UI kit

Create hassle-free landing pages in Figma. This kit is based on 10 landing page templates, powered by 1600+ variants for 630+ web blocks.

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gtp-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.

Start now

SetGPT is a free service; however, authentication is required

This is some text inside of a div block.
This is some text inside of a div block.