KNXiON Logo Rebrand

KNXION EVENTS

Non-profit organization rebrand

The Mission: 🎯

This was part of my group’s four-month-long project for one of our last semester classes at SAIT. We had to reach out to a non-profit organization and offer some of our talents to assist them in their company. Originally, they generated their designs (including their logo) through Canva and had no website to go to. They decided that they would like a whole redesign on their brand, get some marketing strategies going, and create a website for them.

Part of my job was to be one of the brand designer (i.e. assist in instilling brand guidelines, creating brand media kit), graphic designer, and put together a promotional video to implement in their website and multiple socials. Below I am showing mostly the processes and results that I have contributed. 

My sketches of the new KNXION logo.

My team and I's moodboard in Mural.

Challenges Faced: 🤔

• The client wanted to merge two of the logo concepts; however, the logos  he wanted to combine were done by two different designers with two different design styles. 
•  One of the other graphic designers created the wrong logo concept that we instructed them to create. They submitted it to us at the last minute one of us had to quickly vectorize the correct one a few minutes before meeting up with the client. 
• Initially, I was not part of the graphic design team. Unfortunately, one of our groupmates was not contributing as much due to some personal reasons. To that, I had to help out with the graphic design responsibilities. 
• There were some miscommunications when it came to building the website. We had to brainstorm solutions that the KNXION team could manage easily once we pass it off to them.

My logo concept #1

My logo concept #2

Outcome: ✅

After showing the client 3 logos to choose from, they finally chose a concept they liked but requested a few touch-ups on it. By the end of it, they decided on the final logo that was sent to them with the “K” and “N” being represented as people connecting with one another. When it came to the website, we were unable to completely finish the website due to the miscommunication and delayed responses. We did the best we could and prioritized the components that needed to be done to easily pass it off to KNXION and let them edit the rest whenever they could. 

Click here to visit the current website.

Finalized Logo

Play Video

Responsibilities:

• Brand Designer
• Graphic Designer
• Video Producer

Softwares Used:

• Adobe Illustrator
• Adobe Photoshop
• Adobe After Effects
• Mural

Duration:

4 months

Top

3D Isometric Bedroom

3D ISOMETRIC BEDROOM

3D Modeling

The Mission: 🎯

The objective of this project is to create a 3D interior room. For this one, I chose to model it as an isometric-style bedroom. I decided to go with this approach to further enhance my modeling skills and expand my knowledge in interior design.

Sketching/brainstorming on ideas for bedrooms; chose the bedroom that is circled

Challenges Faced: 🤔

• This was my first 3D modeling project since December 2021. I had to reacquaint myself with the controls of Blender and its features.
• One of the most complex items I had to model was the guitar. It had pieces and shapes that were harder for me to comprehend.
• I was worried about the proportion of the items to the whole bedroom. I would often take a step back to see whether it’s scaled fine with the whole scene.

Solid preview of the bedroom during my modeling process.

Outcome: ✅

By the end of it all, I chose the top sketch for the bedroom. I initially wanted to add a few more small items in the scene (i.e. a hairbrush on the dresser, another plant on the desk, a stand-up lamp), however, I unfortunately ran out of time. Perhaps I would add those in later on, but for now, this is the final rendered scene.

Responsibilities:

This was a solo project. All work was produced by me.

Software:

• Blender

Duration:

3 weeks

Top

Polaris

POLARIS

Self-Care Mobile App Case Study

The Mission: 🎯

This group project was worked on for a whole semester (4 months). There were a lot of steps that we had to follow through. But the basis of it is to brainstorm on a defined problem, gather information from it through surveys, and from the survey, create a solution that will work best with the problem chosen. We then have to create a low/medium-fidelity wireframes, high-fidelity wireframes, then prototype them.

For our group, we initially looked into college students (~ages 18-30) and decided to build a self-care app. It then transformed into a “habit builder” app to help those working remotely-or just need assistance with tracking new healthy habits.

UPDATE:
I have made a redesign of this project.
Click here to view the redesign post and here to view the medium fidelity prototype.

Group brainstorm session.

Interview questions and survey findings.

We collected our data through one-on-one virtual interviews, surveys, and competitive analysis.

Challenges Faced: 🤔

• During the first stage of the project, my group members and I had troubles deciding on which problem to make our project about (i.e. Make an app about plants? Look at an existing website and tackle on redesigning it?).
• We didn’t know whether we actually had to hand-code the project and create a well functioning app in the end or just have a prototype; we were not given clear deliverables.
• “Should we use the converge-diverge method during this section of the project? Or diverge-converge?”
• Although we access to a big pool of college students for our quantitative research, we were mostly lacking people’s availability for the qualitative portion of our data. 
• It was difficult trying to develop wireframes and branding standards; we butt heads in some of our own personal decisions (i.e. which type to use, which colour palette to incorporate to communicate our brand/tone of voice, how we could visually communicate a certain element to give a good visceral behaviour?).

User persona.

Low-Fidelity Wireframes

Outcome: ✅

Although we did have 4 months to create our product, we weren’t able to finish it entirely as planned due to simultaneously working on multiple projects similar to this; along with practicum and internships. We were able to compile all our presentation slides, wireframes, and branding but we were not able to fully prototype the design the way we planned. There are some buttons that do not work as it does not have pages to link to. But overall, the most important pages and buttons are available for viewing. Also, my group members and I have created a friendship after working together, which shows that no matter what, creating personal connections is one of the most important things out there!

High-Fidelity Wireframes & Prototype

>To access the original prototype, please click here.

Responsibilities:

This was a group project (5 people). Some of my responsibilities included:

• UI Designer
• Graphic Designer
• UX Researcher/Designer 

Software:

• Adobe XD
• Mural
• Google Slides
• Adobe Illustrator

Duration:

4 months

Top

The Hummingbird

THE HUMMINGBIRD

Restaurant Website Case Study

The Mission: 🎯

For this personal project, I focused on improving and reviewing my knowledge in the UI/UX field on web design. The goal was to help users easily navigate through this new restaurant website while capturing their attention throughout with a captivating interface. I wanted to highlight the most important notes that were mentioned in the user personas and implement those elements onto the site for everyone’s benefit.

Empathy Map

User Personas

Previous image

Next image

Challenges Faced: 🤔

• I had to create my wireframes through Figma, which was a challenge for me since I’ve never used it before. Prior to that, I used Adobe XD.
• “Which colour palette should I use for my branding that can make this appealing to look at and not strain people’s eyes?”
• “I’m not that used to the Laws of UX just yet, but I need to keep it in mind when creating this site.”
• Considering I have never used Figma before, I had to quickly learn where the elements were. Though it does have very similar components to Adobe XD, there are definitely some differences to it.
• “What’s usually in a casual restaurant website? I need to do some comparisons and note down the most frequent elements/layouts are used.”
• “I was planning on putting this menu bar here. But I have no idea how to do it on Figma. I should find an alternative solution.”
• I had to research that the prototyping area in Figma did not have a responsiveness feature to it.

Low-Fidelity Wireframes

Medium-Fidelity Wireframes

Outcome: ✅

Throughout my journey in creating this design, I have managed to put together the website wireframes and prototype well enough to what I imagined it to be. I have settled for a slick and minimal design to not confuse the user and get them to easily navigate around the website. I’ve also decided to change the sticky side menu bar that was originally in the medium-fidelity wireframe into a top sticky instead since I had trouble figuring out how to make it on Figma. On the up-side, it did create more white space for the menu, allowing more breathing room for the elements.

High-Fidelity Wireframes and Prototype

> To access the prototype, please click here.

Responsibilities:

This was a solo project. Responsibilities included:

• UI Design
• UX Design/Research
• Graphic Design 

Software:

• Figma
• Adobe Illustrator
• Adobe Photoshop

Duration:

3 weeks

Top

New Earth Winery

New Earth Winery

Logo Redesign

The Mission: 🎯

This was a project I started in the summer of 2021. It started as a logo challenge to prompt me to make a logo every single day for a month. I do not have the chart that contains all the prompts anymore but I do have the original file that contains the logos I made.
The goal for this specific one is to modify the logo that I made in the summer and create a brief logo guideline. It will state most of the things needed to use the logo.

Original logo made in the summer of 2021.

Challenges Faced: 🤔

My challenges will include hurdles that I came across along my process, and thoughts that came up in my mind.

• I had troubles figuring out where to place the text on the logo.
• “Should I do a serif or sans-serif font?”
• I could not decide whether to keep the strokes on the illustration or have it flat.
• I never had any experience with wine-related products before. It was somewhat difficult to gauge an idea of how a typical wine logo looks like. Or, I didn’t know how to visually represent wine since I never had it. I did this on purpose to challenge myself further.
• “Should I redo the whole logo or keep it?“

New Updated Logo

The Outcome: ✅

By the end of it all, I decided to keep the original components of the illustration. I wanted to showcase my creativeness when I first made it in an hour or so in the summer. But, I did make some minor changes to get a better visual appeal to it. Below is the brief logo guideline I made for New Earth Winery.

Sample Mock-ups

Responsibilities:

This was a solo project. Roles included: 

• Graphic Designer
• Brand Designer

Softwares Used:

• Adobe Illustrator
• Adobe Photoshop

Duration:

1 day

Logo Branding Guidelines

Previous image

Next image

Top

Margaritos’ Coffeehouse

Margarito's Coffee House

Brand and Logo Design

The Mission: 🎯

The goal for this project was to create a logo and a short guideline for it for an upcoming fictional coffee shop. A request that the owner wanted was to include pictorial marks for his logo. 

Creative brief generated on: FakeClients

Very rough thumbnail sketches of logo ideas.

Challenges Faced:

My challenges will include hurdles that I came across along my process, and thoughts that came up in my mind:

• I did not know what a pictorial mark was for logos. It made it a bit confusing reading the creative brief at first.
• It was difficult to draft some thumbnails when I do not know what tone of voice the owner is trying to achieve. 
• I had a very limited amount of information to go by to make the logo. 
• “Which typeface would complement the illustration?“
• “What hue/colours do I need to make the logo feel good’? Or appealing to a customer’s eyes?” 

Experimenting, exploring, and playing around with how the logo should look like.

Outcome: ✅

Below, I have provided the finalized logo and the guidelines on how to use it correctly. I decided to incorporate the symbols for a coffee bean, a mug, and a house all in one. Thus, creating a visual for the word “coffeehouse”.

Final vectorized logo.

Responsibilities:

This was a solo project. Roles played: 

• Graphic Designer
• Brand Designer

 

Softwares Used:

• Adobe Photoshop
• Adobe Illustrator

Duration:

2 days

Mock-up examples:

Logo Brand Guidelines

Previous image

Next image

Top

Exert

EXERT

Fitness App Case Study

The Mission: 🎯

This was a personal project to further enhance my UI skills. The goal was to learn how to incorporate the needs of a few people, then narrow down them down to the most important ones that could be beneficial to a whole group of that would use the application. I also chose to do a mobile-centered interface because we rarely had the chance to do so in our projects. We were more focused on web design, not software/app design. And since UI tackles not just web design, this gave me a window of opportunity to learn and develop an interface on a technology that the majority of the population uses.

This project is about not just workouts but fitness in general. I had to think further on the exercises and include features that can enhance someone’s health in the long run. 

Empathy Map

User Personas

Previous image

Next image

Challenges Faced: 🤔

• Brainstorming notes on empathy maps was a challenge since I had no real data to pull from as I was more focused on the UI aspect of the project. I had to rely on what other people have told me about their experience on the fitness app they used, what I experienced in the past, and do some competitive analysis research.
• I had to keep in mind other features that can be used in the app that people tend to use while keeping track of their fitness goals (I created a food/water tracker page, and a music page). 
•  “Which fonts and colours will look the best and will send out the tone of voice I’m trying to convey?” (Tone of voice: Strong, Encouraging, Friendly)
•  “Which elements would be better to have on this landing page? Which elements would be more beneficial for the user?”
• “What signifier can I implement to let the user feel accomplished about tackling their daily workout challenge and keep them motivated?” 

Low-Fidelity Wireframes

Medium Fidelity Wireframes

Outcome: ✅

After drafting multiple wireframes and debating with various choices, I was able to create and put together a finalized design. I’ve went with a minimalistic design as the attention should be on the functionality of the app. I have included elements that may be helpful when it comes to someone’s fitness journey and overall physical health. I also included a social aspect: sharing their progress on their social media and the top exercises done that week. This may entice the person to be more motivated if others were involved in their journey. There are also trophies to be earned, which may be beneficial to those who are competitive and gets motivated through achievements.  I kept in mind the types of people that might use the app, so the workouts are divided into three separate levels according to the person’s fitness intensity. 

High-Fidelity Wireframes & Prototype

> To access the prototype, please click here.

Responsibilities:

This is a solo project. Responsibilities included: 

• UI Design
• UX Research/Design
• Graphic Design

Softwares:

• Adobe XD
• Adobe Illustrator

Duration:

1 month

Top

Dining Room

The Mission:

Using the 3D software called blender, my class had to create a dining room scene that included 12 unique items. For my own personal goal, I wanted it to give a semi-realism feel to it as close as possible by implementing different textures and materials.

Challenges faced:

• “Do these count as unique items? Is the shape too simple to be considered as “unique” for my instructor?“
• In the past, whether it be drawing and such, I tend to have troubles scaling things to their surroundings. Doing an entire scene where all of them have to be proportionate to one another was touch on me.
• I had a hard time thinking of a way on how to set up my scene. By browsing around various platforms, I searched for multiple dining room photos for inspiration.
• There were multiple moments where I could not get the proper shape that I wanted to attain for certain objects.

Outcome:

Even though modelling some of the items were difficult, I got the job done. I was able to compile all my thoughts in the end and created a well-lit scene.

ReadyTech

READYTECH

Electronic Shop e-Commerce Website

The Mission: 🎯

This was a part of our final project in my second semester. For this portion, we had to create wireframes and mockups before tackling on coding the actual website itself. We were given the logo and its branding standards. However, we were then left to create everything else-from the website layout to the website content such as product photography and product descriptions.

My goal was to create a website that had a similar feel and look as other tech sites out there. I wanted the visitor to instantly know that they are in a tech website just from how I laid things out. The website should also be easy to navigate around, have clear CTA (call-to-action) buttons, and have majority of the elements that is needed for a great user experience.

Low-Fidelity Wireframes

Challenges Faced: 🤔

• I had troubles displaying the feeling I wanted to convey. I looked at various tech websites-such as Best Buy, Visions Canada, The Source, Canadian Tire-to get a sense of what similarities they had. I needed to know which components were most prominent in all of those websites and how similar they laid some of the elements out.
• Along with the logo, the colour scheme was already pre-done and given to us. With that, I had to plan out where each colour would suit best since I’m unable to change them.
• At the time, I still had a small knowledge in coding. So, coding the website will be difficult and I had to keep in mind responsiveness too. 
• I also wanted to implement some features that had not been taught to us. So, I had to think of how to lay my website out with the abilities that I had and then carefully apply the ones that I taught myself.

Medium-Fidelity Wireframes

Outcome: ✅

There were steps to be taken before we moved forward each time. Luckily, I was approved every time. With the approval, I was able to move forward to our last step and hand-code it from scratch by using HTML, CSS (front-end development) and MySQL (back-end development). The responsiveness aspect of the website when it came to resizing the browser was quite “iffy” to tackle; it’s initial viewport width is around 1900px. But it’s still capable to be viewed in mobile mode. I did go further than what was needed by adding a Wishlist feature, and adding a delete button in the Cart and Wishlist page (playing with cookies). 

High-Fidelity Wireframes , Prototype, and Website

> To visit the website, click the link here.
> To view the desktop prototype, click here. 
> For the mobile prototype, visit the link here.

Responsibilities:

This was a solo project. All work was produced by me except for the logo and colour palette. Responsibilities included: 

• Web Developer
• UI Design
• Graphic Design
• Product Photography
• Web Design

Softwares:

• Adobe XD
• Adobe Illustrator
• Adobe Photoshop
• Visual Studio Code
• ShiftEdit

Duration:

3 months

Top