For my final project for my Introduction to Web Design class, I redesigned a shopping website for an electrical hardware company that produces cheaper replicates of Arduino products, called Wemos. My group and I used HTML/CSS to code the website after doing user testing and prototyping
Design and code a fully responsive website
Interaction Design, UI Design, Illustrations, Research, Code, Copywriting
Hongyu Chen, Aaron Wong, Hyun Kyu Oh
We firstly went on the original Wemos website to analyze what problems the website faced. On Wemos, you can buy and read information about each board, but it hyperlinks everything to Alibaba instead of having their own shopping system.
Some Problems with the Original Website:
The website lacks consistent branding and colors, making the product seem illegitimate and cheap
There is no tutorial or “get started” to help you install the device
The landing page is confusing as it doesn’t tell you what the board is and what it can be used for
All buttons lead to different web pages with different branding, making it less usable and confusing to click
Firstly we interviewed 6 target users who would be interested in Arduino boards. We mainly interviewed programmers and new media artists who would be interested in art and robotics.
We found these main reasons for why they would go to the website:
We found that most users want to go to the website to see if it’s a legitimate company
If there is a tutorial on how to use the boards
If there was a way to buy the boards
If the boards were similar to the boards that the more known company Arduino produces
Insights and Think Aloud
We then asked the users to go through Wemos’s original website and to think aloud their thoughts on the website experience.
Many found that it was hard to use because:
Everything was hidden
There were no prominent buttons
They couldn’t find any resources to help them install the boards.
However, they found the price to be a high-selling point, as it directly compared to the Arduino model. We found that it would be good to out right say that the boards are directly compared to Arduino since Arduino is a well known company that sells legitimate boards.
After identifying the main problems, we ideated solutions in a list format. We asked “how might we?” statements to guide our ideation process
Our Design Plan
Because many users found it difficult to read and look for the information on the website, we wanted to make the website highly organized with different links on the homepage as you scroll down to link to different sections.
The grid structure is varied throughout the website to make the website more interesting to look at, and we made playful illustrations to market the product as more exciting, innovative, and fun. We revised the copy writing to be less technical and highlight more of it’s positive or comparable features to Arduino. We also added diagrams to make it easy to read.
We created an information architecture to make sure that all the functionalities of the website were there. We focused on 5 basic pages - home, products, resources, community, about us, and my account - that met the users’ needs in shopping for a new product.
In the time frame of 6 weeks, we needed to complete a fully responsive website, so we chose to have only 5 pages. We chose the most important pages, including, Home, Product, Get Started, Cart, About Us, and Community.
For the landing page, we focused our design on making the product seem legitimate, and the aesthetic nerdy & cool. We made sure that everything was navigable.
Customer rating and consistent branding to elevate it’s credibility and and aesthetic presence
Board diagram to clearly show aspects and positives about the board
What boards are available to buy and buttons to learn more about the boards
Clearly state that it is directly an affordable version of Arduino with the same models
Buttons throughout to navigate to pages easier and quicker
For the product page, we focused on putting information about the boards in a clear, aesthetic, and dynamic way.
Key features, technical specifications, and board information clearly stated and listed
Dynamic animations to magnify parts of the board and clearly point to different features
“Add to cart” button that travels with you to make ease of buying easier
“Get Started” and “Get Inspired” buttons at the bottom to lead users to find a tutorial or project after purchasing the board
For the shopping cart, we focused on making it clear what you were buying and how much it was going to cost.
Clearly stated description, price, and title of product
Small trash icon to get rid of unwanted items
Quantity of products that can be changed
“Save for later” option and “recommended” option to encourage users to buy things
Small robot icon to make the shopping experience fun
For the resources page, I focused on making different types of useful resources that are customizable to users’ skill levels. There are learning modules (beginner level, intermediate, etc.) to match users’ knowledge and video tutorials within each module
Get Started tab to view a step by step process on how to set up Wemos
Library tab to view documentation on code for your Wemos board
Learning modules with different beginner, intermediate, and expert levels to reveal the tutorials that are fit for your skill level
Thorough video tutorials to explain each step
Navigation to jump through different steps of the tutorial process
We created this page to build a community around the wemos product. We also wanted users to see what incredible projects can be made with the Wemos board
A search bar to type in keywords that are relevant to your interests
Projects grouped into categories to easily discover the type of project you’re interested in
Ratings of projects for people to choose the right one
Author’s name to give credit and recognition to the artist
We created this page to show more information about the company and allow users to contact the company for questions and concerns. This page is meant to humanize the product.
Contact us message
Biography of company
All these illustrations below were done by me. Other illustrations are done by Hongyu Chen
This project was a good way for me to define what functions users needed to buy a product, and also how to use marketing and business thinking to best sell a product. If I had to do things differently, I would like to better define the aspects of the products by magnifying the parts of the product and having the features come out as well. I think it would be good to feature more projects in the community section, and have filters to further personalize the projects that the user wants to see.
This project was a great way for me to organize information and learn how to create responsive web design through code. I also enjoyed working with my teammates because I learned alot about their approach code and illustration through our social interactions.