A change was needed.
Timeline: June 2024 – July 2024
Role: UX Researcher, UI Designer (Individual Contributor)
Skills Applied: UI & UX Audit, Information Architecture, Competitor Analysis, User Research Techniques, Moodboard Creation, and Low-Fidelity Wireframe
Redesigning the homepage of Vortex Technology
For this project, I was tasked with the redesign of the homepage of Vortex Technology. This required the conduction of an audit of their website and competitors, followed by creating a moodboard and low-fidelity wireframe.
Process
STEP 1: Initial Research of Vortex Technology
Approach: My approach was to first become familiar with Vortex Technology and the current state of the website, to salvage valuable information and essential elements before its reconstruction. During this phase, I assessed the current state of the website, organizing my initial notes in a table and capturing a screenshot.
STEP 2: Detailed Analysis & Audit of Vortex Technology
Approach: After taking my initial notes and impressions of the user design and user experience, I conducted a detailed analysis – UX audit – of the website. I also created a table to reflect and explain my approach for each aspect of the detailed analysis.
STEP 3: Competitor Analysis
Approach: My approach was to select three superior technology consulting websites that exemplify the end-goal of this redesign project and evaluate their strengths and weaknesses. I compared PrimeIT, Deloitte, and California Department of Technology.
STEP 4: Detailed Audit on the Target Competitor’s Site – PrimeIT
Approach: I conducted a UI/UX audit on PrimeIT, across their homepage, navigation and their company page.
STEP 5: Moodboard
Approach: Prior to the process, I initially did an inspiration search by examining templates that achieved a particular look that I was targeting – which was modern, simple, approachable, and futuristic. For this process, I researched the color palette, individual fonts, images that corresponded to the color palette, and typography in an organized moodboard. For color selection, I attempted to keep the brand’s original colors in mind which had a bright magenta/purple color which reminded me of technology yet warmth. This is because typically, users may associate blue with technology because of blue light – purple is similar to that spectrum yet resonates warmth due to its warmer tone. For the individual fonts, I used serif fonts without additional flourishes to keep a clean and professional look that would match the tech industry – which is known for innovation, modernness, and minimalistic.
STEP 6: Sketch/Low-Fidelity Wireframe Homepage and Mockup
Approach: For this step, I used a UI website wireframe template in Figma to help organize and create Vortex’s structured wireframes. For the wireframe, I began with the outline and basic structure of the homepage in accordance with the mood board and vision that I initially had, paying attention to the placement of key elements like the navigation bar, CTAs, images, and other relevant content sections that I wished to incorporate in the homepage.
