DELL GAMING
STEP ONE
Our task was to create a better design and navigation for a component on the Dell Website. Since the DELL website is so large and filled with so many products,we wanted to highlight one of their popular categories with a subsite, for the Gaming products.
STEP TWO
Understanding the Project
This project was going to consist of moving quickly and working together. We only had about 2 and a half weeks to complete this task, including coding the final product which was new to us. We delegated various roles to each teammember and then got right into the research and planning.
Our Tasks
STEP THREE
Beginning the Project: Heuristic Evaluation of the Main Site
We looked at the gaming products presented within the main site and decided what could be changed, added, and what what necessary to keep.
STEP FOUR
Understanding the User: Persona, Journey Map & Storyboard
Our User Persona is Michael, he wants to buy a gaming pc, mid 20s, lives in Texas, needs a good site to be able to compare and view the parts and pieces he needs.
Journey Map
We created a Journey map to better understand our personas emotions throughout the process of using a complicated site and then using ours.
Storyboard
The storyboard visually shows the states in which the persona feels excited, drained, possibilities, and success.
STEP FIVE
After a competitor analysis between sites like IBM,Amazon, Playstation and Apple, we Brainstormed on the creative deisgn front, all shown below.
SWOT Analysis
Moodboard & Typography/Color Research
.jpg)
STEP SIX
We then moved into User Testing, with Surveying and Interviewing, for a better understanding of what the consumer in the industry is looking for and what problems they may have.
Survey Data
We got 90 participants to take our survey that considered themselves in or interested in the Gaming Industry. This Survey and Interview research gave us insight into what the pain points are and what to focus on.
STEP SEVEN
Affinity Diagram
This is a diagram which helps categorize the survey and research information.
Feature Prioritization Matrix
This is a diagram that helps to visualize what should be prioritized in the new/redesigned subsite, based off of the research we recieved.
Site Map
We then took on the huge task of reorganizing the Information Architecture and Naviagtion, as well as start on the Lofi Wireframing.
STEP EIGHT
Wireframing & Prototyping
We then started on our actual prototyping, sketching and wireframing. Pictured below is our paper sketches.
Lofi Desktop Wireframes
Lofi Mobile Wireframes
STEP NINE AND TEN
HIFI Wireframes
Testing and Iterations
After our first prototype we needed to do more user testing to continue to iterate and make the new subsite the best that it could be.
The Task
The Results
We were then able to iterate on our prototype before coding.
FINAL TASK, CODING
This was a new addition for this project in particular. We used Github, Visual Studio Code and various other resources to code this subsite. This was definitely our longest and most difficult part of the project as most of us were new to coding. We successfully used, Javascript, Bootstrap, JQuery, HTML & CSS, to code our DELL GAMING subsite.
Check out the Final Coded Prototype as video below, or the linked site HERE!
Tools and Final Thoughts
Tools
Figma, Miro, Adobe XD, Adobe Photoshop, Slack, Zoom, Google Slides, Google Sheets, Google Forms, UnSplash, Dribble, Github, VS Code, W3 Schools, Stackflow
Final Thoughts
This project flew by. We started off right away with the components we were familiar with in order to save time for coding, which we suspected would be more difficult for us. We worked really well together, stayed organized and got everything accomplished as well as multiple practive times for our presentation of our work. We even went above and beyond in getting creative with the hero image that opens up to the site, as well as various features that used bootstrap more exclusively. I really enjoyed this project and I truly think DELL corporation would be impressed and inspired.