Softglow Skincare Shop Homepage Design

I created this homepage design on Figma for Softglow, a fictitious online skincare shop. I began with the mobile (yay for mobile-first design), then modified it for the desktop size.

This was a really fun project! Even though I opted for a beige (rather than white) for the background/base colour, the thin borders help give it a nice and clean look, which is fitting as this is a skincare shop. I think it also goes very nicely with the muted blue accent.

The post Softglow Skincare Shop Homepage Design appeared first on Julie Yim.

Daringly Homepage Design

I created this homepage design on Figma for Daringly, a fictitious online clothing shop. I began with the mobile (yay for mobile-first design), then modified it for the desktop size.

The colours and gradients made this very fun! The window + horizontal scrollbar design came first, and then I designed the rest based around that.

The post Daringly Homepage Design appeared first on Julie Yim.

Letterboxd Mobile/App Redesign

For my Web Usability class, I was tasked to find a problem relating to UI/UX design and solve the problem. I decided to redesign the mobile/app home page design of Letterboxd, a social media website revolving around films.

The Problems

On using Letterboxd for several years, I found a few problems in regards to usability and user experience.

Screen responsiveness

First, I found that the website is not responsive to different screen sizes.

Small text and images

Second, while Letterboxd has a mobile app, the usability and design of it could be improved. As seen in the screenshot below, the size of the content is fairly small. The text below the posters — the reviewers’ username and rating — are small and hard to read.

Inconsistency between web and app content

Another issue I found with the app is that the display and content are inconsistent from the website. For example, the first row displays “New from friends”, and the second row displays “Popular with friends”. However, on the app, the first row is actually “Popular this week”. This would be confusing for a frequent website user because they would expect to see “New from friends”, followed by “Popular with friends”, as that is how the website is laid out.

Solutions

With these points in mind, I created this Letterboxd mobile/app redesign with Adobe XD.

Consistency between web and app content

First, I made the display and layout more consistent by including the welcome message at the top, as seen on the website. I also changed the title of the home page from “Popular” to “Home”.

I also removed the “Popular this week” section seen in the app and moved the “New from friends” to the top, to reflect the layout of Letterboxd’s website.

Readability and size of content

Second, I made the font size and image sizes a little larger so that they are easier to see. I also aligned the content so that it flows in a column, rather than side-scrolling.

Functionality

A small excerpt of the review is displayed. When the user clicks/taps on it, they would be brought to the full review page. When the user clicks on “Load More”, two more reviews would load underneath.

Below the first section is the “Popular with friends”, keeping with the website design. There is also a “View all popular” button that would take the user to a separate page displaying all popular movies amongst their friends’ list.

In summary, I redesigned the home page of Letterboxd’s mobile app to be more easily readable and viewable, as well as to be more consistent with the original website’s design and layout. This would allow users to have an easy and seamless experience on both web and mobile devices, and prevent users from being confused with the inconsistencies.

The post Letterboxd Mobile/App Redesign appeared first on Julie Yim.

Dashboard prototype design built with Tailwind CSS

I created a dashboard design using Tailwind CSS; Tailwind is a CSS framework similar to Bootstrap.

The design includes progress bars, comments, attached files, and a messaging section on the side. Using CSS grid, I made sure the design is responsive for mobile, tablet, and desktop views.

Overall, I enjoyed learning Tailwind and can see myself using it in the future. I would be open to learning other CSS frameworks or technologies to help me create and build designs in an effective way.

The post Dashboard Design – Tailwind CSS appeared first on Julie Yim.

Coffeehouse Landing Page Design

I created this landing page on Figma for a hypothetical coffeehouse/café.

This was fun to make! It actually went through many iterations. I was fiddling around with a light background at first, but settled with the dark as it makes the gold colour pop and overall suits the theme of coffee more.

The post Coffeehouse Landing Page Design appeared first on Julie Yim.

Shy Menu – Off-Canvas Toggle Navigation

In my Web Usability class, I learned the importance of responsive screens and creating designs that are mobile-friendly. This is an off-canvas toggle navigation that I named “Shy Menu”, because the menu is hidden to the side on mobile screens. I added a shy-looking Dracula as the site logo to fit the theme.

(The icon is from FlatIcon.)

The post Shy Menu – Off-Canvas Toggle Navigation appeared first on Julie Yim.

Home page high-fidelity design for fictitious client Anthony

For my Web Usability class, I created a high-fidelity design for a fictitious client and his website, Anthony’s Recipes. The design is for the landing page, and I created a design for mobile, tablet, and desktop screens.

I included hover states for links and buttons; there are also separate artboards displaying the dropdown menus for the mobile and tablet sizes.

I made sure to adhere to the Photoshop etiquette by giving proper names to layers, creating groups, and working with artboards.

I also created a Style Guide, outlining the colour palette, typography, grid layout, spacing, and other essential information.

The post Anthony’s Recipes High-Fidelity Design appeared first on Julie Yim.

Website redesign & build for the Edmonton Native Plant Society

Objective

To create a user-friendly website for users to learn more about Edmonton’s native plants.

About the project

The Edmonton Native Plant Society wanted their existing website to be remade. My Capstone group and I followed the Design Sprint process and created low- and high-fidelity wireframes using Adobe XD. I was involved with the user testing and adjusting the prototypes according to the user feedback.

I was also solely responsible for the development phase of the project, working with HTML, CSS, and JavaScript to build a custom WordPress theme.

User testing

The client also had specific wants and requirements for her website, such as having the name “Catalogue” for the page where the user can buy plants and seeds. However, through user testing, my team and I found that “Catalogue” was confusing for users as they didn’t realize they could buy plants from that page. 

From the user feedback, my team and I renamed the page “Catalogue” to “Shop” to avoid the confusion of what a “Catalogue” was. The “Shop” name is also more succinct and clearly describes what the page is rather than “Catalogue”.

Challenges

Unfortunately, two of our group members withdrew from the Capstone course mid-semester. I became solely responsible for the development process of this website, as my remaining group member continued to build the Solomon Vance website. As I am more comfortable with the design side, it was a bit of a challenge for me to build the site with WordPress by myself.

My instructor also noted that it would be understandable if I were unable to complete the website given the circumstances. It was certainly stressful for me as my group was already a little bit behind on schedule, and I was also preoccupied with assignments from my other courses.

Result

I was able to complete the website and migrated the website from NAIT’s server to the client’s hosting. I also wrote a brief user manual for the client on how to use some of the basic features on the WordPress dashboard.

It was a great experience working with a real client and working to both meet their wants but also making sure that everything is user-friendly and easy to understand for all types of users.

Though it was a challenge to build the website myself, it was also rewarding and fulfilling to be able to complete the website from the brainstorming phase to the end of development. 

The post Edmonton Native Plant Society Website Redesign appeared first on Julie Yim.

Website redesign for author website Solomon Vance

Objective

To design a user-friendly website that captures the mood of the Nobody Series books and where users can browse and buy books.

About this project

The client had started creating his website using WordPress and the Divi page builder. The website would be a place for him to sell his books and provide some information about his existing and upcoming series.

Design process

My team and I created the visual identity to reflect the mood and the themes of the books. My group members and I each created a moodboard for how the website would look. As the client’s main series is about hackers and espionage, and I created my moodboard to capture the mysterious, dark, and hacker-like tone. After everyone had finished their moodboards, we held a vote on our favourite elements from each moodboard.

I compiled everyone’s votes and created a final moodboard that we would use as inspiration for the overall visual design of the Solomon Vance website.

Result

After the high-fidelity prototype, my group member and I split up the projects — he finished the building process of the Solomon Vance website, while I solely built the Edmonton Native Plant Society website.

The post Solomon Vance Website Redesign appeared first on Julie Yim.