Wemos header.png



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

My Role:

Interaction Design, UI Design, Illustrations, Research, Code, Copywriting


Hongyu Chen, Aaron Wong, Hyun Kyu Oh


Design Process


Background Research

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

Group 66.png


Brainstorming sketches for home page, cart. and overall feel

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.

Screen Shot 2018-11-11 at 11.26.36 PM.png

Information Architecture

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.



Final Design

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.

Home Page

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

Product Page

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

Shopping Cart

For the shopping cart, we focused on making it clear what you were buying and how much it was going to cost.

Features include:

  • 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

Photography by littleBits.


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

Features include:

  • 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

Photography by littleBits


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

Features include:

  • 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.

Features include:

  • FAQ

  • Contact us message

  • Biography of company


Hi-Fi Wireframe


UI Screens

resources pg wemos.png


All these illustrations below were done by me. Other illustrations are done by Hongyu Chen


Final Thoughts

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.