The «Journey» from UI kit to live mobile application

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:

{{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.

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.

{{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.