Written by Flexy.Global

Case #4: How we designed a Sleep mobile app in 2 weeks

Every project is a new opportunity to show our excellency in design. This time we get the opportunity to bring all of our passion and experience in designing a sleep app. Our client desired to have a sleep sounds app and our task was to come up with a genuine design for that. The client shared his idea of the app, their development team was ready to realize it, but a piece of puzzle was missing. That was when team Flexy did the branding and UI/UX design for the app, collaboratively working with the client and development team.

Understanding the goals of the client and doing research is the crucial part of each project. With this app, the client wanted to bring value to the users helping them to fall asleep easier. The goal of the app is to analyze each user’s sleep and assist them in improving it. The task of our design team was to give intuitive design to the app to meet its goals.

The Challenge

In an initial stage of research, we realized that there is a wide number of sleep apps existing in the market. Furthermore, our challenge was to design the app in a way that it will stand out from the rest of the apps available. In such designs specifically, it is more important to have the design not only to amaze users but also to be easily accessible and user friendly. The design of the sleep app should also ensure a smooth user experience. Bearing in mind all of these key factors, we kick-started our new project.

The Project Timeline

Disciplined work, motivation and devotion, “Et Voila” — we have the project done within 2 weeks. During these two weeks, the project went through a number of steps:

  • A project kickoff — we got familiar with our client, got to know his goals for creating a sleep app, understood his perspective of the project and discussed work details.
  • Research — we did major competitor research to understand what works for sleep apps, made estimations about what is good to be done, and gathered significant amounts of information and data to make data-driven decisions.
  • Ideation — we created user personas and shaped the design based on their preferences, created mood board, and shared our vision of the sleep app with the client.
  • Testing and validation — initially having the wireframes from our client we finalized them and tested them to understand how the design meets the overall expectations.
  • The design stage — previously tested and validated ideas are turned into practical designs. We did sketching, user interface, visual design, and shared the design for the main screens with our client.
  • Implementation — we collaboratively worked with the development team, provided them with UI kit, icons, tabs, buttons.
  • In the improvement stage, we did final changes and improvements to the design in accordance with client's suggestions, and till now based on data analytics received from the market, we make iterations to take the design to its expected height.

Project Process and Outcomes

To have the best final result for the Sleep app, we had detailed discussions with our client. Thoroughly understanding his perspective of the app, his preferences and ideas for design, the purpose beyond creating it, we set to work.

No design can be created without proper research of the given field. In this case, we did huge competitor research for Sleep app to craft new design solutions. The aim of the competitor research was to find out the best practices of available sleep apps, what works, as some of them might have their UX tested and A/B tests done, and particularly to reveal what news we could bring by our app design.

Designing a sleep app also requires research in psychology, as the concept of it is slightly related to the human mind. During our research, we found out that color psychology is a thing. Moreover, it appears that psychologically purple brings a calming effect to the human brain and body. This information helped us a lot in color choice and smoothed the right path for the expected design.

Wireframes, Mood boards, Logo and Icons

As the continuation of the design process for the Sleep app, we worked on the wireframes. Those are like the skeleton of the app — they give structure, shape the UX of the app, and they also give us a clearer picture of what functionalities the application is going to have. We were gifted with already existing wireframes by the client, which we slightly updated to improve the UX of the app.

Moving forward, our design team came up with creating the mood boards. At the initial stages of the design process, we already had some ideas of what they will look like. Is it going to be super minimalistic with outlined icon patterns? Or with dark color illustrations? The options were showcased to our client, another opportunity to communicate with him and make sure we are all on the same page of the design process. After some meaningful discussions over mood board design, our choice stood on the one with dark color illustrations.

No successful project can stand out without a logo. We aimed to come up with a logo design that will transfer all the core ideas of the Sleep app and will also be well remembered. This is why the logo is formed of purple – the already chosen color for the app design, icons of the moon, stars, music note, and clouds in the background.

Here comes one of our pride of the Sleep app – the icons. Sleep Sounds’ functionality gives the user an opportunity to choose a sleep song to listen to, then go and add other sounds (such as sounds of birds, wind chimes, fire, rain, etc.) We needed to create icons for each to showcase these sounds. And, we put our creativity in it, but also kept in mind the brand personality of the app.

UI Kit

Part of our design process is the preparation of the UI kit for the app that would contain all the critical UI assets such as fonts, layered design files, and everything needed to understand the branding of the app. Later on, whenever any changes are necessary to make, we can simply look back at the UI kit. Lastly, once designs are approved, we hand over polished and organized design components to the development team. Of course, if necessary, we do final check-ups and improvements to ensure high-end results.

We are certain — hard work always pays off! Two weeks of dedication to the Sleep app project by our team brought the outcome we aspired for its design. Collaborative work with the client and the development team ensured the success of the Sleep app. And, we are thrilled to share one more project design accomplished!

Are you someone who’s looking for a creative team to help you out with design-related decisions? Check out our website — there’s so much we can do to bring your ideas to life!

Read more

Case #5: Designing for Impact: GenocideEdu’s change-inducing interface

8 min

Case #3: Vicious Curl - Design that boosted sales by 60%

12 min read

Case #2: Stimulating Writesonic's traffic with a total redesign

9 min read
Don’t want to miss anything?
Get weekly updates on the newest design stories, case studies and tips right in your mailbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.