Nightcap: Better Sleep, Better Life
Role: UX Designer
Work timeframe: September 23rd — December 9th
Targeted OS: iOS — iPhone & Apple Watch
Progress status: In progress (developing), December 9th
Tools used: Figma, Adobe Illustrator CC, Adobe Photoshop CC, Pen & Paper
Say it aloud; better sleep, better life
Research and How I began this project
A lot of people experience a sleep disorder at least once in their lifetime, and some have a long-term, chronic sleep disorder. Many studies argue that 1 in 3 Canadians have sleep disorders, and this may lead to severe health issues.
This project started from my sleep disorder. I currently am based in Toronto, Ontario, Canada. I had a very bad sleep disorder for the first time in my life, however, there was no way to solve this problem. Why? I did not have a health card, so-called OHIP. Without a health card, you have limited medical access and it gets much harder for you to have proper medical services because you do not have a family doctor (GP).
Not to mention, some with particular sleep disorders such as sleep walk and sexsomnia may require special care. However, their access gets limited in distant areas even if they have a health card.
Therefore, this service is planned and designed with the goal: Make sleep disorder assistance timely and accessible regardless of your location or situation — within Ontario, Canada.
Work scope
Branding
As designing a new product from scratch, I had to build a brand by myself. In the beginning, I came up with a name derived from Latin; Somnumdoc in the beginning.
BI with a unique character is likely to be remembered. In order to make the product unique, the most common visual languages such as the moon and clock were avoided. In the end, a nightcap image was chosen for the brand identity. There was a concern regarding this brand identity: It may not look like a nightcap.
A feedback session with my insightful great peers, Yuri and Konrad; led me to a decision to change its name to Nightcap since it’s much easier to remember and pronounce and keep the visual identity. Given that this is a sleep-regarding service, mainly darker colours are applied for the service. *Branding should be addressed in a separate chapter, so it won’t be much addressed in this article.
Persona & Painpoints
With the two personas, I’ve listed the pain points as the following:
︎✓ Less complex sleep analysis — there will be sleep tracking and analysis
︎✓ Easy access to medical assistance regarding sleep disorders; virtual appointments and prescriptions — in case an in-person visit is needed, clinic addresses also should be shown
︎✓ Medication delivered to their door at a time of need
The only restriction: this service is available within only Ontario, Canada
In-app functions
- Sleep tracking and analysis
- Virtual appointments
- Medication delivery
- Inform when the user seems to need medical assist
Information Architecture
There are 3 different steps before the user gets to see the home screen: Entry, Welcome, Onboarding and then Home — entry to the service. In Welcome, the user sees a verification system, which is a former medical history upload process.
Wireframing and Lo-fi Prototype
Before getting started on actual digitized app design, hand-drawn prototypes proceeded first. After getting a feel of the structure, I started working on the project on Figma.
When working on the digitized lo-fi prototypes, darker colours were used in order to have a better picture of the app.
Hi-fi Prototype
In the hi-fi prototype stage, there were a few things that I kept in mind:
a. Work in an 8-px grid
b. Use proper UX writing instead of random text
c. Work in an actual device by having your phone mirrored
d. Test colours before applying and try to use colour combinations that pass contrast tests
Try to scroll to see the screen details and click anywhere on the screen to move to the next screen. OR, please press HERE to try the prototype.
Reflection
- What were your project goals, and did you meet them? Why/why not?
The project goal that I had, in the beginning, was to have something that I could showcase in my portfolio. In terms of directions and work scope planning, I can say that It’s very successful. However, I could have managed my work timeframe better and the project work scope was much bigger than expected. All in all, I am happy with the outcomes; however, there is still room for improvement!
- What main difficulties did you come across when working on this project?
As I have mentioned above, time management was the only problem. There are a lot of things to develop and be modified in this project, so its status is still in progress — developing. Needless to say, it was much harder because it’s a self-directed project!
- What did you learn about your chosen topic/project area?
Honestly, I have done this type of project — from defining a problem and branding to hi-fi and showcasing 5 years ago. However, it felt very different when working on this project now that I have actual work experience in design. I was very confident, I knew the industry standards and the workflow. This project assured me that I am ready to go back to the field and made me feel much more confident. I also leanred a lot about the tool, Figma, while working on this project — I used to use Sketch App, this project helped me migrate to Figma!
- Most importantly, what did you learn about yourself?
As I have mentioned, this project made me confident that I am ready to work in the field and realize that I have learned A LOT. Also, I enjoyed the process; which means I chose the right project and the right field for me.
Thank you for reading this article! I hope you enjoyed my design journey.
