Nightcap: Mobile App Design Project
Project Overview
This is my graduation year; and it’s the very last semester, Winter 2023. For the last project, I decided to further the project that I worked on last semester — which is Nightcap, the app designed for those with sleep disorders. Last year, I spent time on mainly branding and building the foundation of the product. This time, I was finally able to spend more time on actual building UX and design.
Project Goals
To begin with, I have been planning to submit this work to a design competition. Thus, polishing this work and developing UI components was one of the key points in the design sprint planning. Furthermore, this will be a project that I initiated and finished all self-directed in my portfolio.
Secondly, UX audits. I ran UX audits when starting this design sprint to catch any possible problems beforehand. Lastly, review and elaborate on the information architecture.
These three are the main goals of this project.
Tools Used
Figma, pen & paper, Adobe Illustrator CC, Adobe After Effects CC, web colour contrast tool(WebAIM)
Creative Process
- UX Audit
After the audit, I found out that the menu design was not very user-friendly. Not to mention, it was inevitable to make it look cramped in one button. Instead, I decided to change it to a tab UI design.
2. Information architecture
As the design changed, the information architecture also had to change. While reshaping the architecture, I saw problems of the old structure again; cramped menus in one button. By changing it to a tab UI design, the structure got far more organized and user-friendly. Also, I numbered the screens by depth in the new information architecture since it’s going to be easier for designers to design screens and for developers to implement them.
As you can see from the images above, they’re more detailed and organized.
3. Wire framing
After the process above, I worked on wireframes with a pen and paper first, then a digitized version on Figma.
4. Colour scheme — part of the design system
I have been interested in creating a design system for a product and saw the need for a design system while working on this project. Alongside the button style, components and icons, I created the colour scheme learning and studying design systems and accessibility.
Final Deliverable
After the process, now I have a better version of the hi-fi prototype. It’s subtle, but there is also a gradient animation in the logo. Please expand the Figma prototype and enjoy it better!
Reflection
- What were your project goals, and did you meet them? Why/why not?
I was a little behind the schedule due to a lot of workloads from other projects that I was handling. However, I eventually finished the project and met the goals!
- What main difficulties did you come across when working on this project?
Since it’s a self-direct project, the most difficult part was leading myself and meeting the plans.
- What did you learn about your chosen topic/project area?
Particularly in this study, the newest field that I explored while working on this is ‘design system’. I have been interested in it and have wanted to be a designer who has a great understanding of it and is capable of it. I got a chance to explore and I found out it’s very technical, which made me more fascinated.
- Most importantly, what did you learn about yourself?
I learned that I do love this field and enjoy working on product design projects. During my undergrad, the most fascinating field was graphic design, editorial design and typography. I did not picture myself interested in the field then, but somehow I have been shaping my career throughout my journey. I am certain that this is the field that I want to work in currently and also excited to see how I am going to shape my career journey in the future.
Thank you for reading my design journal!
