Project: Dolce Joy UI Design
I recently enrolled in the UI/UX Design Specialisation offered by CalArts to build my skills in UI/UX design. I completed the first course in the specialisation, Visual Elements of User Interface Design, by designing my very first user interface. This project provided an opportunity to learn about steps in the UI design process such as ideation, creating mood boards and sketching an interface before designing it on my laptop.
For this project, I designed two screens of an app named ‘Dolce Joy.’ Dolce Joy is a mobile app that searches for dessert cafés in Hong Kong within walking distance of the user.
In terms of functionality, the user opens the app and enters their address. They use a slider (0 ft to 1 mile) to specify their search radius and the app will return a list of cafés within walking distance of their current location. Each café name is accompanied by an image, the cafés address, and approximate distance from user. The user can “like” a café to add the café to their favorite list.
The user can tap on a café name to access more information on a second screen including: a map showing the café’s location, photos of desserts, and reviews/ratings from other users. The user can respond to reviews by liking or disliking them based on how helpful they are.
Dolce Joy Mood board
This mood board was built in Adobe InDesign and features 15 images to define the mood of my product, two typefaces, and a color palette based on the imagery I collected.
Dolce Joy Interface Sketches
These are fairly rough sketches that were intended to help me visualise the two screens I would design in Adobe XD in the next step. I was still deciding whether to include a map in the second screen and that is why the first version of it doesn’t include the map at the top.
Dolce Joy Interface Design
I designed the interface in Adobe XD and used the UI kit provided by Adobe for some of the basic user interface elements. The color palette and pattern library along with other design decisions were based on the mood board I built. However, some of the text wasn’t readable when I utilised the font I had previously selected for the mood board (Zapfino) so I found a font that would be better suited to the app (Qualey and Plantagenet Cherokee). Images are from Unsplash and I used the names of real cafés in Hong Kong with real addresses but all other details are fictional.
