-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtombow-redesign.html
127 lines (127 loc) · 10.3 KB
/
tombow-redesign.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Sat Nov 26 2022 08:16:52 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="6359c9a434e634907848adba" data-wf-site="63375e06b7a5ae566ddc5555">
<head>
<meta charset="utf-8">
<title>Tombow Redesign</title>
<meta content="Tombow Redesign" property="og:title">
<meta content="Tombow Redesign" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/ux-ui-portfolio-999cb1.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Philosopher:regular,italic,700,700italic","Karla:200,300,regular,500,600,700,800,200italic,300italic,italic,500italic,600italic,700italic,800italic","ZCOOL XiaoWei:regular","Londrina Shadow:regular"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="index.html" class="link-block w-inline-block"><img src="images/website_logo.png" loading="lazy" width="50" alt="" class="image-brand"></a>
<nav role="navigation" class="w-nav-menu">
<a href="index.html" class="nav-link w-nav-link">My Works</a>
<a href="documents/Resume.pdf" target="_blank" class="nav-link w-nav-link">Resume</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
<div class="w-container"><img src="images/tombow_websitebanner.png" loading="lazy" srcset="images/tombow_websitebanner-p-500.png 500w, images/tombow_websitebanner-p-800.png 800w, images/tombow_websitebanner.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="page-banner"></div>
<div class="wf-section"></div>
<div class="container-8 w-container">
<h1 class="heading-2">Tombow</h1>
<p class="text-paragraph">Redesigning TombowUSA's landing page to facilitate easier navigation and promote product sales</p>
</div>
<div class="container-2 w-container">
<div class="w-row">
<div class="w-col w-col-3">
<h3 class="text-heading">Timeline</h3>
<p class="text-paragraph">September 2022 (1.5 weeks)</p>
</div>
<div class="w-col w-col-3">
<h3 class="text-heading">Role</h3>
<p class="text-paragraph">UX/UI Designer</p>
</div>
<div class="w-col w-col-3">
<h3 class="text-heading">Team</h3>
<p class="text-paragraph">Myself</p>
</div>
<div class="w-col w-col-3">
<h3 class="text-heading">Tools</h3>
<p class="text-paragraph">Figma</p>
</div>
</div>
</div>
<div class="w-container">
<h3 class="text-heading">Overview</h3>
<p class="text-paragraph">For my first design project, I wanted to start off small and begin with a redesign of a homepage so that I could become more familiar with using Figma. <br><br>One company that I often buy from is Tombow. Tombow, founded in Japan in 1913, is a company that produces high quality supplies for arts and crafts.</p>
</div>
<div class="w-container">
<h3 class="text-heading">Problem</h3>
<p class="text-paragraph">TombowUSA is an online e-commerce store as well as a website filled with art and craft resources. How can we redesign the home page to allow for easier navigation for users as well as increase sales?</p>
</div>
<div class="w-container">
<h3 class="text-heading">Goals</h3>
<p class="text-paragraph">1. Simplify the navigation bar<br>2. Promote popular products on home page with the goal to increase sales</p>
</div>
<div class="w-container">
<h3 class="text-heading">Competitive Analysis</h3>
<p class="text-paragraph">First, I analyzed the home page of 3 other brands that provided similar services/products to TombowUSA. After noting down first impressions, I compiled the features that I enjoyed the most.</p>
</div>
<div class="container-9 w-container"><img src="images/tombow_compana.png" loading="lazy" srcset="images/tombow_compana-p-500.png 500w, images/tombow_compana-p-800.png 800w, images/tombow_compana.png 1000w" sizes="100vw" alt="" class="image-banner"></div>
<div class="w-container">
<h3 class="text-heading">Wireframes</h3>
<p class="text-paragraph">After taking a look at how competitors designed their websites, I began drawing up wireframes!</p><img src="images/tombow_wireframes.png" loading="lazy" srcset="images/tombow_wireframes-p-500.png 500w, images/tombow_wireframes-p-800.png 800w, images/tombow_wireframes.png 1001w" sizes="100vw" alt="" class="image-banner">
</div>
<div class="w-container">
<h3 class="text-heading">Major Changes</h3>
<h4 class="text-heading2">Navigation Bar</h4>
<p class="text-paragraph">My initial impression of TombowUSA’s navigation bar was that it was quite busy with two different rows. <br><br>I simplified the navigation bar with broader categories as well as using icons that can replace words. I intentionally made the drop down icon next to each category larger as well as a different color so it can be easier seen.</p>
</div>
<div class="container-19 w-container">
<h4 class="text-heading3">Before</h4><img src="images/tombow_navbarbe.png" loading="lazy" srcset="images/tombow_navbarbe-p-500.png 500w, images/tombow_navbarbe-p-800.png 800w, images/tombow_navbarbe.png 1001w" sizes="100vw" alt="" class="image-banner">
</div>
<div class="container-20 w-container">
<h4 class="text-heading3">After</h4><img src="images/tombow_navbaraf.png" loading="lazy" srcset="images/tombow_navbaraf-p-500.png 500w, images/tombow_navbaraf-p-800.png 800w, images/tombow_navbaraf.png 999w" sizes="100vw" alt="" class="image-banner">
</div>
<div class="w-container">
<h4 class="text-heading2">Center Piece</h4>
<p class="text-paragraph">When I initially saw this center piece, it made the website seem more resource-focused which might lead first-time website viewers to not know that the website also functioned as an e-commerce store. <br><br>I redesigned the center piece so it has two call-to-actions so viewers will automatically know the two important aspects of the TombowUSA website.</p>
</div>
<div class="w-container">
<h4 class="text-heading3">Before</h4><img src="images/tombow_centerbe.png" loading="lazy" srcset="images/tombow_centerbe-p-500.png 500w, images/tombow_centerbe-p-800.png 800w, images/tombow_centerbe.png 1000w" sizes="100vw" alt="" class="image-banner">
</div>
<div class="w-container">
<h4 class="text-heading3">After</h4><img src="images/tombow_centeraf.png" loading="lazy" srcset="images/tombow_centeraf-p-500.png 500w, images/tombow_centeraf-p-800.png 800w, images/tombow_centeraf.png 1000w" sizes="100vw" alt="" class="image-banner">
</div>
<div class="w-container">
<h4 class="text-heading2">New Shopping Feature</h4>
<p class="text-paragraph">Similar to one of its competitors, I thought it would be a good idea to have a shopping feature embedded into the home page so that it makes shopping easier and also promotes products directly on the home page. <br><br>I opted to use a carousel pattern so more items can be displayed. A smaller feature I added was the “like” option which is also included in the navigation bar for easy access to see previously liked items.</p>
</div>
<div class="w-container"><img src="images/tombow_shop.png" loading="lazy" srcset="images/tombow_shop-p-500.png 500w, images/tombow_shop-p-800.png 800w, images/tombow_shop.png 1000w" sizes="100vw" alt="" class="image-banner"></div>
<div class="w-container">
<h3 class="text-heading">Final Design</h3>
<div class="w-row">
<div class="w-col w-col-6">
<h4 class="text-heading3">Before</h4><img src="images/tombow_before.png" loading="lazy" alt="" class="image-2x2">
</div>
<div class="w-col w-col-6">
<h4 class="text-heading3">After</h4><img src="images/tombow_after.png" loading="lazy" alt="" class="image-2x2">
</div>
</div>
</div>
<div class="w-container">
<h3 class="text-heading"><strong>Reflection</strong></h3>
<p class="text-paragraph">This was my first-ever project using Figma! Despite all of the mini tutorials I completed prior to starting this project, I still found myself struggling to design elements how I envisioned. The biggest issue I kept running into was making auto-layout work properly within components. However, through re-watching tutorials and trial/error, I was able to successfully make it work out. <br><br>If I had more time on this project, I would have started off with interviewing Tombow consumers and learning their opinions on the current website. I would also design the process of making an order through the home page as well as make a complementary high-fidelity prototype. <br><br>Hypothetically, if this were to ship, I would want to see if there was an increase in sales and what % of sales were directly from the home page feature.</p>
</div>
<div class="container-7 w-container"></div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63375e06b7a5ae566ddc5555" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>