_edited_edited.png)
Problem
Identified Problem Statement
This design challenge was a month-long UX and UI internship for startup company Vancouver City Laptops, an e-commerce site for used computers and other technology. Throughout this time, our team of four UX designers worked in collaboration with VCL.
Problem Statement: The site had an outdated look, which hindered user engagement. Additionally, the site's information architecture was confusing.
Our proposed solution was a website redesign aesthetically and building a new information architecture to improve navigation and ensure easy access to services. We implemented a logical information architecture, clear CTAs, and dedicated landing pages for each service. Visual enhancements included modern design elements, an appealing color scheme, and a legible typography.
Pain Points
We identified pain points in order to create a strategic roadmap that would direct us throughout the rest of the process
Site's outdated look
Ineffective information layout
Inadequate user interface design
Competitive Analysis
The next step was the analysis of some existing interfaces who attempted to address this problem statement. We closely studied the strengths and weaknesses of these interfaces, with the intention of incorporating successful elements into Vancouver Laptop's website.
Solution
Information Architecture
The solutioning began with building a new information architecture for the website.
Vancouver Laptop provided us a comprehensive set of services, products, and pertinent information to be incorporated into our proposed information architecture. Our teams collaborative efforts to approach this led to the generation of multiple unique versions outlining how we could efficiently categorize this content. Upon thorough analysis and consideration, we collectively arrived at a singular version that resonated most effectively.
As we delved into crafting wireframes, this structure underwent refinements while remaining anchored in the initial version.
Proposed Information Architecture
Design
Moodboards
In our quest to capture the ideal visual atmosphere for the interface, we curated two distinct moodboards. This approach offered stakeholders a mixture of design styles for comparison.
After sharing these moodboards, we engaged in a collaborative discussion that led to a harmonious blend of elements from both concepts. This blended approach served as the cornerstone for crafting the ultimate prototype.
Moodboard One
Moodboard Two
Style Guide
Following the moodboards, we transitioned to crafting two distinct style guides, aligned with each moodboard. Within these guides, we meticulously defined elements such as primary and secondary colors, button styles, typography choices, background treatments, and text colors. Similar to our approach with the moodboards, we elected to integrate design attributes from both style guides.
Final Style Guide
Wireframes
Following the selection of the moodboard and style guide, we transitioned to the development of wireframes.
Reflecting our earlier approach, we undertook the creation of two distinct wireframe versions, each configured with unique layouts.
This strategic decision stemmed from stakeholders' interest in comparing and contrasting the two setups.
To efficiently accomplish this, our team divided into subgroups, each dedicatedly crafting wireframes that adhered to the specified layout.
Our efforts extended across both mobile and desktop interfaces. Following a comprehensive review and evaluation of both wireframe sets, the second set was chosen to proceed with.
Chosen Wireframes
Prototype
Following that, we initiated the development of high-fidelity prototypes, delving even deeper into the design process.
We integrated the invaluable feedback provided by the VCL team in addition to drawing upon industry-leading design practices to meticulously craft the final prototype.
Final Prototype
Final Steps
Stakeholders Feedback
Upon completing the initial draft of the prototype, we asked the VCL team to provide their feedback on it. We then integrated the feedback into the prototype finishing the first iteration of the prototype.
Reflection
The final design of Vancouver Laptop successfully incorporates the pain points identified at the beginning of this design journey.
Our team skillfully curated a completely new information architecture that aligns with top-tier user-centric practices. Substantial enhancements were introduced to the website's original aesthetics. Additionally, we established streamlined user interaction pathways, ensuring ease and efficiency throughout navigation.
Given the project's limited one-month timeline, we unfortunately did not have the opportunity to conduct usability testing. However, in the event of a future engagement with this project, usability testing would undoubtedly be a crucial step in refining and fortifying the user experience.
Before
After
