UX design

Please see below some of my selected projects

Alpha

The ever-changing company 

My role

Brand strategist
UX/UI designer
Graphic designer
Information architect
Content supervisor

Alpha began its journey as a basement t-shirt company of two friends before transitioning into web development and marketing agency. During its growth into an IT solutions provider, I was brought on board to rebrand and create a new website that aligned with the company's evolving identity, roles, and scale.

As Alpha continued to expand its services to include IT and cybersecurity, obtained certification as a CDAP advisor, and acquired a web hosting company, I remained part of the team, adapting to and supporting these changes along the way.

The problem

Supporting small and medium-sized businesses on Vancouver Island, Alpha Strategy Media experienced rapid growth. However, its existing design did not reflect its modern approach to services. With a clientele primarily consisting of boomers and older generations, Alpha faced the challenge of ensuring readability, aligning with generational preferences, and setting the right mood of welcoming and approachable persona.

The brief

As IT became Alpha's dominant service, the company aimed to differentiate itself from competitors while avoiding the stereotypical black, blue, or neon color schemes. The brief was to develop a design that would convey a personal, helpful, and calming energy, distinguishing Alpha from the typical, impersonal IT call center.

The solution

To address Alpha's need for a fresh and distinctive design, I proposed a light theme using scale of plain grey complemented by solid west coast colors. Addition of warm yellow accent for logo and active elements aimed to set Alpha apart from other west coast companies while enhancing readability, appealing to generational preferences, and establishing the desired mood. Recognizing that the name "Alpha Strategy Media" implied a focus on marketing services, which no longer fully represented Alpha's shift towards IT, I suggested shortening the name to "Alpha" to broaden its potential range of services. This change allowed Alpha to adapt its brand identity to better align with its evolving business model and service offerings.

Team

Team manager & SEO support (Mara)
Designer (Me)
Copyrighter (Jacqueline)
Developer (Jason)

My tools

XD
Illustrator
Photoshop
Figma
InDesign

Step 1

The new brand

I started by designing new logo to establish the new brand. As the company expanded, I saw importance in creating clear guidelines, not just for the visual aspects, but to ensure consistency in our brand across all online and offline communications, both client facing and internally within the company.
Mission & vision
Values
Color palette
Typography
Shapes and icons
Illustrations
Photos
Tone of voice

Step 2

Structure and organization

With lots of different versions of the page and abundance of content already made before I joined the company, I have decided to take it back to the drawing board. Organize and choose the most important information before moving on to the next steps.
Initially, Alpha used Adobe XD. I recommended switching to Figma to accommodate the frequent changes. For that purpose I created an organized Figma library.
Colors
Typography
Grids
Icons
UI elements
Shadows & indents
Buttons
Inputs

Step 3

Prototype

Based on analytics from previous page versions, we discovered that most users visited from desktops. So, I started designing with a width of 1440px, but also kept mobile users in mind. While creating the prototype, I regularly updated the library to ensure consistency for future projects.
Image coming soon
Image coming soon
Image coming soon
Image coming soon

Test of adaptability

While the developer was finalizing the page, Alpha acquired V3 Media along with its hosting services, further expanding its web services. To accommodate existing clients and leverage V3 Media's SEO, I collaborated with my manager to determine which pages to keep and rebrand. I proposed the following strategy:
  • Announce the change on both sites.
  • Develop a parallel dark theme for Alpha to facilitate the transition from V3's previously dark-themed page.
  • Rebrand V3 pages that ranked well in SEO with Alpha dark theme.
  • Brand the V3 page as "V3 + Alpha" and transfer most web services information there.
  • Use the change to establish a separate web development division within Alpha out of V3 + Alpha.
  • Phase out V3 to complete the transition.
Colors
Typography
Grids
Icons
UI elements
Shadows & indents
Buttons
Inputs
Image coming soon
Image coming soon

Next steps

The company is still undergoing changes that the site will need to reflect. As next steps, I recommended building the following pages: Portfolio, team page, individual team member pages.

Thank you for swiping through my case study!

There is always more

If you have any questions or would like further details, feel free to reach out to me, and I'll be happy to chat.
Let's chat

CoEfficient Building Science

Refreshment, redesign, and optimization

My role

Brand strategist
UX/UI designer
Graphic designer
Information architect
Content supervisor

It started with one person and grew into a team of passionate energy efficiency experts. They help homeowners with energy upgrades, assist with grant applications, and seek clients interested in energy efficiency. 

The problem and brief

The current website served its purpose but lacked effectiveness in driving business and increasing client trust. Additionally, it wasn't optimized for mobile devices. The client aimed to highlight the company's sustainability focus and social impact. The main goal was to create a new website that effectively communicates the company's services, expertise, and values. Integrating efficient contact forms to generate quality leads. Additionally, the client expressed desire to refresh their existing logo and welcomed suggestions for a new color palette.

The solution

Our team redesigned the website to visually showcase the company's expertise in energy efficiency and sustainability. We integrated efficient contact forms to streamline lead generation and client communication. Copyrighter and SEO support fine-tuned the content for better search engine visibility. I ensured the website is responsive on mobile devices, with clear calls-to-action to encourage visitor engagement. We explained consistent updates and maintenance will keep the website fresh and aligned with the company's evolving goals and recommended next steps.

Team

Team manager & SEO support (Mara)
Designer (Me)
Copyrighter (Jacqueline)
Developer (Jason)

My tools

XD
Illustrator
Photoshop
Figma
InDesign

Step 1

Questionaire

Before diving into this project, I aimed to gather as much information as possible from the client. To facilitate this, the project manager sent a questionnaire I created with my team in advance. During the kickoff meeting, I went through the questions with the client, while the copywriter diligently took detailed notes.

Step 2

Wireframes

In this stage, I created wireframes to work with the team and stakeholders. We collaborated to polish the content before transitioning to the prototype design phase.

Step 3

Prototype

I refreshed the logo, chose new typography and selected a color palette. I then created mini brand guide and utilized it to establish the visual style for the website. With the new style I developed a high-fidelity prototype.

Next steps

I suggest to the client to source more client testimonials and put together educational resources to keep building trust and provide valuable information to homeowners. 

Thank you for swiping through my case study!

There is always more

If you have any questions or would like further details, feel free to reach out to me, and I'll be happy to chat.
Let's chat

Onoway

Onoway & district fish & game association & gun club – transformation of digital structures

My role

UX/UI designer
Graphic designer
Information architect

Community-based organization dedicated to promoting outdoor recreational activities such as fishing, hunting, and shooting sports. They provide opportunities for members to participate in various outdoor pursuits, including fishing tournaments, hunting excursions, and shooting competitions. Additionally, they offer educational programs and workshops on firearm safety, wildlife conservation, and outdoor skills development. The club also advocates for responsible stewardship of natural resources and works to preserve and protect local ecosystems for future generations to enjoy.

The problem

Given the project's budget constraints, I opted for a targeted approach. Upon reviewing the site, I identified the primary issue: disorganization of information and resources, coupled with ineffective navigation. This resulted in inaccessible information for both members and the public.

The solution

In response, I concentrated efforts on addressing this key issue. Through strategic structuring and organization of digital content, intuitive navigation design, and optimization of information flows. Overall, I aimed to create a user-friendly digital experience that ensures that vital information about outdoor recreation and environmental stewardship is readily available to all users.

Team

Team manager & SEO support (Mara)
Designer (Me)
Developer (Jason)

My tools

Figma
Illustrator
Photoshop

Step 1

Sketches

As I mentioned above, the first step was to identify the issue and focus on organization of the content. Using pen and paper I organized information in categories and decided on the navigation.

Wireframes

I transformed the sketches into low fidelity wireframes to be able to cooperate with my team and client

Step 2

Prototype

The design had already been set prior to our involvement. I used it to develop a straightforward Figma library and utilize it to refine my wireframes into high-fidelity prototypes.

Next steps

The upcoming steps involve development and MemberPress implementation.

Thank you for swiping through my case study!

There is always more

If you have any questions or would like further details, feel free to reach out to me, and I'll be happy to chat.
Let's chat

T-Mobile microsite

100 years of Czech Republic

My role

UX/UI designer
Graphic designer
Information architect

To commemorate the 100th anniversary of the Czech Republic, T-mobile organized a competition offering HBO gift packages to 100 existing customers with T-mobile TV. Anyone with a T-mobile phone number could download a welcome melody featuring selected popular Czech singles for their waiting tone.

The brief

The client wanted me to create a microsite for the occasion using their style guide colors.

The solution

I designed the page with it's primary purpose and style guide in mind while incorporating "fan facts" about the Czech Republic as visual elements throughout the microsite.

Team

Team manager (Radim)
Designer (Me)
Developer (Jan)

My tools

Figma
Illustrator
Photoshop

Step 1

The elements

I started by gathering inspiration from Czech Republic history and selected visually interesting elements that would be fitting for the theme of celebration. Once I made my choices, I proceeded to design the digital elements in T-Mobile style and colors.

Tusar Antiqua

The font of Slavoboj Tusar is one of the exceptional sources of inspiration, not only for its original graphic impact but also for the story of its creator. This story provides a glimpse into the life of one of the modern Czech graphic designers.
Painter and graphic artist Slavoboj Tusar, the brother of the First Republic’s prime minister, was an exceptional typographer and graphic designer in the first half of the 20th century. He was keenly interested in the developments of emerging mass advertising, which he perceived as "waves of the turbulent flow of life."

Pavel Janák - Coffee Set with Flat Handles

Pavel Janák, a prominent Czech architect, educator, and theorist of the first half of the 20th century, was also one of the key figures of the Artel artistic association. Among his works as a member of this group is a coffee set with flat handles featuring a design from 1979.
Artel was one of the most significant associations of Czech applied arts and design in the first half of the 20th century. The group focused on designing practical objects and promoting home culture.

The Founding of Czechoslovakia

The founding of Czechoslovakia was a process that led to the establishment of an independent Czechoslovak state.
Czechoslovakia was proclaimed on October 28, 1918. Its borders were defined by peace treaties and decisions derived from them within the framework of the Versailles peace system.

Little extra

To put an extra layer of edducation to the celebration I decided to design a info icon to each of the 3 elements. Pop up bubble appears on hover (or click on mobiles and tablets)

Step 2

Prototype

I made a quick sketch to arrange the content on the page. The final step was creating a prototype before passing it on to development.

Thank you for swiping through my case study!

There is always more

If you have any questions or would like further details, feel free to reach out to me, and I'll be happy to chat.
Let's chat