Vancouver Laptop
Web Re-design
Overview
This design challenge was a month-long UX and UI internship for the startup company Vancouver Laptops, an e-commerce site for refurbished laptops and other hardware. Throughout this time, our team of 4 students worked in collaboration with Vancouver Laptops to delve further into the dynamic field of user experience design. Over the course of the internship we had the privilege to gain practical knowledge and valuable insights. Throughout this experience we were able to engage with real projects, collaborate closely with the VL team, and refine our skills in developing intuitive digital experiences that prioritize user needs.
INTRO
The Vancouver Laptops team was seeking a website redesign to address user-centered design issues and enhance aesthetics. The site had an outdated look, which hindered user engagement due to a variety of issues. This included dense blocks of text, which created overwhelming cognitive load on the user, as well as a complete lack of a homepage.
THE PROBLEM
Our proposed solution was to improve navigation and ensure easy access to services. We implemented a logical information architecture, clear CTAs, dedicated landing pages for each service, as well as a homepage. Visual enhancements included modern design elements, an appealing color scheme, and a legible typography.
This approach aimed to create a user-centric, visually appealing website that effectively showcases Vancouver Laptops' products and services while addressing previous design concerns.
THE SOLUTION
My role in this project encompassed a blend of responsibilities, from conceptualization to prototyping. As a key member of the project team, I collaborated closely with the stakeholder and other team members to ensure an innovative and thoughtful solution that exceeded expectations. Along with another team partner, I developed user-centric wireframes that were ultimately chosen by the stakeholder for its clean and intuitive design and collaborated with my team to evolve them into high-fidelity prototypes.
MY ROLE
Persona
From our understanding of the problem, we drafted a quick persona to embody who we were designing for.
John, a 35 year old man from Vancouver, is a freelancer who works from home and is looking for an affordable laptop. He’s interested in purchasing a refurbished laptop from Vancouver Laptop; however, he has doubts about the company due to the website’s outdated appearance and is having trouble researching and purchasing from them due to the overwhelming amount of text and clutter on the site’s pages.
John
Competitive Analysis
My team and I analyzed some existing interfaces to research successful solutions and help brainstorm. We closely studied the strengths and weaknesses of these interfaces, with the intention of incorporating successful elements into Vancouver Laptop's website. One such element was Apple’s product carousel on the homepage, which allows users to instantly visualize all the products the company has to offer within seconds of visiting their site.
Visual Design
The stakeholder’s expressed interest towards Apple’s sleek and minimalist aesthetic gave us a clear direction, while still allowing us to explore with our own creativity. Leveraging this inspiration, we created a couple of mood boards and color schemes, all while keeping in touch with the stakeholder in order to ensure they aligned with visual expectations.
Drawing inspiration from Apple’s clean lines, white space, and focus on product imagery, we gathered a collection of images that resonated with this vision. This exercise not only aligned our team’s understanding, but also facilitated discussions with the stakeholder, creating a shared foundation for design exploration.
MOOD BOARD
COLOR PALETTE
The selection of a color palette in this process was a critical decision as this would evoke the desired aesthetic of a minimal yet immersive e-commerce experience. We opted for a predominantly neutral color palette, with a few shades of blue to add a touch of vibrancy and depth that mirrored Apple’s restrained use of color in order to create a sense of trust.
Information Architecture
Following the identification of the problem statement and pain points, our focus shifted to the pivotal task of structuring the website. Vancouver Laptop, our client, furnished us with a comprehensive set of services, products, and pertinent information to be incorporated into our proposed information architecture. Collaboratively, our team embarked on a process of brainstorming and creativity, generating several distinct versions of how we could effectively categorize this wealth of content.
Upon thorough analysis and consideration of the various iterations, we collectively arrived at a singular version that resonated most effectively. This foundational structure provided a solid framework that served as the cornerstone throughout our subsequent steps. As we delved into crafting wireframes, this structure underwent refinements while remaining anchored in the initial version.
Figure 1: Site map brainstormed during earlier stages
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.
DIVIDE AND CONQUER
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.
I crafted the wireframes for the homepage and product page from scratch on the basis of user-centric design. For instance, I incorporated a hero that draws in the users attention and ensures they immediately comprehend what’s being offered and how it can benefit them. The hero can be used to encapsulate the site’s value proposition and be tailored to resonate with the target audience. This can guide the user further into the site within seconds of arriving, thereby increasing retention and consequently, sales for the business.
DESIGN RATIONALE
In addition, I added a carousel of both products and services to the homepage such that within seconds of arriving, users can easily browse everything the business has to offer without even a glance at the navigation bar. The heavy use of images was intentional for these elements, as it eases clutter and increases understanding by making the products/services offered more digestible to the user.
Following a comprehensive review and evaluation of both wireframe sets, the VL team ultimately endorsed my partner and I’s wireframes as the preferred choice due to its clean look. This choice firmly established the path for the following phases of design and development.
DECIDING ON A WIREFRAME
Melding the Old and the New
In order to breathe life into our wireframes, my team and I combined the newly envisioned color palette with the company’s pre-existing UI kit to create a revised kit. This kit became the building blocks for our prototype.
Buttons on Revised UI Kit
Buttons on Old UI Kit
High-Fidelity Prototype
Following wireframes, we initiated the development of high-fidelity prototypes, delving even deeper into the design process. Integrating the invaluable feedback provided by the VCL team on the wireframes, we also drew upon industry-leading design practices to meticulously craft the final prototype.
LEVERAGING THE USE OF IMAGES
The use of images can be seen more clearly in the prototype, with each service card filled with relevant, high-quality photographs. The use of real staff and product images can not only reinforce the company’s brand identity and aesthetics, but also enhance its trustworthiness.
ADDING CUSTOMER REVIEWS AND COMPANY BENEFITS
The homepage also exhibits a section titled “Why Us?,” which showcases a variety of customer reviews as well as other benefits from the company such as a best price guarantee. The original site lacked customer reviews entirely, while the best price guarantee was previously only detailed on the site’s “About Us” page. Displaying the reviews on the homepage allows customers to gain insight into the company’s products and services and provides social proof of the value of what Vancouver Laptops has to offer. This aids users in making more informed decisions and absolves any uncertainties, while increasing trust in the brand due to its transparency. From a business standpoint, this can lead to higher retention and conversion rates, since customers will be more inclined to purchase from the company.
Similarly, showcasing the best price guarantee on the homepage draws customers in, while also allowing them easy access to learn about benefits without having to search for it on the site.
DESKTOP PROTOTYPE
Reflection
When working with clients, they may not understand or know what they want from a UX design perspective. Our client wanted a website redesign on the sole basis of aesthetics; however as a UX designer, it’s necessary to vehemently work from the perspective of the user and bridge the gap in understanding between the business and the user. This means doing research when needed to collect info that the business may not already have and making design decisions based on your own breadth of knowledge and expertise.