Dell Ecommerce Subsite
Project Overview
The goal was to create an eCommerce subsite for Dell, with a focus on: creating an account, purchasing workflow, and handling errors. After researching Dells main users, products, and competitors we chose to expand on their Virtual Reality and Alienware products. With the goal of creating a simple, clean, and intuitive purchasing workflow designed for both experienced and non-experienced gamers.
Role
As the Lead UX/UI Designer, I collaborated with the lead UX researcher on ways in which we could enhance the purchase experience for our users. In particular, I conducted iterative design experiments on how users group information to create a seamless user-flow. In addition to this, using A/B testing and the atomic design process, I created a cohesive design system to optimize dev output.
Tools used: Sketch, Invision, GitHub, Adobe Photoshop, Adobe Illustrator, Adobe XD, Visual Studio Code, and Bootstrap.
Problem
Through interviews, surveys, and user testing on Dell’s current website, we discovered that users are more likely to complete a purchase transaction when the site is clean, simple, and intuitive. Additionally, users are using mobile devices more often to research and buy. Users have many options as to where they can buy electronics, and we want to give them an enjoyable experience so they not only make a purchase now, but return for future purchases.
Research
At the start of the project, the team met with the stakeholder to get a better understanding of what their needs, goals, and wants were for Dell’s new subsite. Through this initial interview, we identified that the customer wanted to infuse their virtual reality products with products from their gaming sub brand, Alienware. Wanting to keep both new and skilled users in mind, they also wanted the site to be very informative and user-friendly.
With this in mind, we created an empathy map to understand how the users might feel and think, as well what they would say and do during their experience. Once completed, we created numerous scenarios showing how the shopping experience may go, depending on if the user was new or skilled. This was done keeping in mind how they might feel and what information they might need through each step. This process helped us create numerous proto-personas that distinguished the users goals, needs, and pain-points.
Wanting to attain more in depth information, we interviewed 6 randomly selected individuals who had varying ranges of experiences with VR. We asked them about their experiences with using VR and how they looked at purchasing them. We also asked about the e-commerce experiences and how they felt while navigating through Dell’s main website. We found out that many of the users found Dell’s purchase process to be too long, and individuals with limited knowledge on VR or Alienware systems felt flustered. Having collected qualitative data, we created online surveys to collect quantitative data. This data revealed that:
80% of the people who buy electronics online do so because the best deals are online, and the purchasing process is usually quick.
84.4% of users always research before making a VR purchase to find out which product is best for their experience level.
Through our research, we developed a persona, an Alex/ESTJ personality type, that thrives on organization and logical task-flows. Alex is searching for a simplistic, informative, and quick purchase experience. His goal was to find the best VR headset and accessories for gaming and immersive experiences that match his experience level.
Ideation
After defining our user, Alex, we created a user scenario to illustrate why Alex would be entering the site, the steps he may take to navigate through the site, and the emotions he may feel throughout his experience. We then created a customer journey map to visually convey the steps Alex would go through to attain his goal.
Combining this data, and data collected from our research, we created a user-flow diagram that visually conveyed how the user would flow through the site. We also created a site map to show the hierarchical structure of the site to make sure we wouldn’t miss any steps the user would go through.
Prototype
Having created the site map, I constructed paper wire-frames of the desktop and mobile versions by combining the research and user tasks. While testing the low-fi wireframes, we learned that users wanted the cart to have more breadcrumbs, larger margins, and links to recommended accessories. Using the testing results from the low-fi prototypes, I created mid-fi clickable wireframes.
When creating the first iteration of the responsive high-fidelity wireframes, I used information collected through our stakeholder input, user-testing, and research to develop two separate design systems to A/B test. One design system was inspired by Dell’s design system and the other system was inspired by Alienware, EA games, and Oculus.
Testing showed that users liked the Alienware, EA Games, and Oculus inspired design system best, stating it was “clean and futuristic”. Users also stated that “the color palette and large graphics really draw me into the site”. The users, however, all expressed that they wanted to see the Dell Visor have a more detailed destination page, rather than just one singular product page.
Accessibility and UI
I created a design system to make sure that all elements were consistent throughout the experience. Including, animations, typography, iconography, imagery, buttons, and other components. For color, we chose a deep navy blue to be our primary color because it instilled a mystifying, yet modern tone. We used violet as our secondary color to add a playful touch, and made sure to use white text for accessibility. For the overall design, we wanted to create a fantastical atmosphere, utilizing vibrant imagery and structured iconography.
Final Product
We built out Dells subsite using HTML, CSS, and JavaScript using Visual Studio Code and hosted it on GitHub. Once completed, we then presented the final design to thirty individuals who stated that it was both visually appealing and functional. Ultimately, accomplishing our goal to create a seamless, responsive, and accessible purchase experience.
