Shopping Website Design and Code

Wemos Website Redesign

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. We conducted interviews, user testing, and designed and coded the website. We made sure that the website was informational to new time users and the shopping experience was easy and delightful.

Role: UX Design, Illustrations, Coding, Researcher

Tool: XD, Illustrator, HTML5 and CSS

Collaborators: Hongyu Chen, Aaron Wong, Hyun Kyu Oh

Duration: 6 weeks

All illustrations and designs were done by me, unless noted

Persona

Our personas included people and hobbyists with interest in robotics, code, new media, art, creative works, and design. These people might be engineers, beginners, artists, computer programmers, or hobbyists. These types of people would most likely take an interest in buying arduino-like physical computing products.

Interview

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, and be most likely to buy the Wemos board. We then asked them what they would look for in a Wemos website to shop for the boards.

We found these main reasons for why they would go to the website:

• We found that most users want to go tho 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

Original Website:

We then asked the users to go through Wemos’s original website and talk-aloud their thoughts on the website experience. Many found that it was hard to use because everything was hidden, there were no prominent buttons, and they couldn’t find any resources to help them install the boards. They thought the color schemes were a bit dull, but found the price to be a high-selling point, as it directly compared to the Arduino model.

After finding those main problems, we ideated solutions:

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.

Information Architecture

We wanted the website to be organized with the pages most needed - including Products with information on the different boards, Resources with tutorial and documentation, Community, About Us, and Account page which has a cart.

Lo-Fidelity Wire Frames

Home Page

For this home page, we wanted to show clearly it’s credibility so we added stars to show it’s rating, as well as elevate its aesthetic presence by making colorful and playful illustrations. We wanted to show the aspects of the board through diagramming, as well as what boards are offered to buy so people will know immediately the products available. We added numerous buttons throughout the home page so people can travel to parts of the website faster.

Product Page

For the product page, we have a “add to cart” button that travels with you when you scroll through the site to make ease of buying easier. We also clearly state the key features and technical specifications through related detail shots of the board.

Shopping Cart

For the shopping cart page, we have the items in the cart clearly labeled with its description, price, and a small trash icon if they want to get rid of it. You can write the quantity and save it for later. We added our robot mascot to make the cart page more fun. Eventually we want to animate more illustrations.

Resources

For the resources page, there are options to look at the Library or the Get Started page, which is this one and contains step by step tutorials on how to install the board. You can click on your level - “beginning,” “intermediate,” or “advanced” in the Learning Modules to find the tutorial for your knowledgeability. In the tutorial “get started” section, there is a video as well as step by step diagrams to summarize the video, and buttons to skip to different steps.

Community

For the Community page, you can type in keywords to find projects you’d like to try. This page was not included in the original website, but we thought it was needed because many people would like to see what you can do with the Wemos board. The community page also furthers a sense of customer appreciation as their projects will be featured and they can get recognition for their work with Wemos.

Full View of Hi-Fidelity Wireframe

Mobile View of Hi-Fidelity Wireframe

Illustrations