-
Notifications
You must be signed in to change notification settings - Fork 0
/
boxed.html
112 lines (106 loc) · 6.57 KB
/
boxed.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@600&family=Didact+Gothic&family=Inter&family=Overpass&display=swap" rel="stylesheet">
<title>Boxed App</title>
</head>
<body>
<div class="container-lg">
<nav class="container sticky">
<ul class="main-nav">
<li><a class="title-m" href="index.html">Mikhail Vodopyanov</a></li>
<!-- <li><a href="">About me</a></li> -->
<!-- <li><a href="">Our team</a></li> -->
<li class="push"><a href="mailto:[email protected]">e-mail.me</a></li>
<li class="tg-me"><a href="https://t.me/vodopmi" target="_blank">tg.me</a>
</ul>
</nav>
<br>
<br>
<br>
<br>
<div class="container12">
<img style="width: 80%; padding-left: 3rem;" src="logo.png">
</div>
<br>
<br>
<div class="container12">
<img class="size-cor-main center" src="main-img.png">
</div>
<div class="container12 block1">
<h1 class="rightfont rightsize">Boxed is a fast and trouble-free delivery<br> in 2 working days. Support at each stage.<br> Fresh beans and regular updates.</h1>
<br>
<a href="https://www.figma.com/proto/qeJJTScdy9b9tMVeU39KYW/UserFlows%26WireFrames?page-id=66%3A6518&node-id=108%3A9154&viewport=353%2C48%2C0.06&scaling=scale-down&starting-point-node-id=108%3A9154&show-proto-sidebar=1" target="_blank"><button class="cta">Go straight to Hi-Fi Prototype</button></a>
<p class="rightfont">Boxed is a mobile app that allows people to order a specialty coffee. Regular specialty coffee e-commerce with improved personalization. The recommendation system is based on taste preferences and personal ratings. In the application you can also buy accessories for brewing or find the nearest specialty coffee shop.</p>
</div>
<ul class="nodots rightfont">
<li>My Role<br>
Sketching, Creating User Flows, Site Mapping,<br> Lo-Fi & Hi-Fi Prototyping, Creating Design sistem.</li>
<li>Results<br>
Now the largest coffee marketplace has a final prototype of a mobile application and a design system for development and maintenance. Can be submitted for development.</li>
</ul>
<a class="fixedbut" href="boxed.html">Up</a>
<div class="box12">
<img class="size-cor" src="pic2.png">
</div>
<h2 class="header12 rightfont">Step 1. Sketching</h2>
<p class="discription rightfont">I sketched several user flows and an approximate appearance of each of the main screens. Not too many details, but quickly and shaking the general sense. Onboarding screens have also been rethought.</p>
<div class="container13">
<div class="boxinline">
<img class="size-sk1" src="sk1.png">
<img class="size-sk4" src="sk4.png">
</div>
<div class="boxinline"><img class="size-sk2" src="sk2.png"></div>
<div class="boxinline"><img class="size-sk3" src="sk3.png"></div>
</div>
<br>
<h2 class="header12 rightfont">Step 2. User Flow & Sitemapping</h2>
<p class="discription rightfont">The processes of registration, finding the right product through the search and making a purchase through search. Each step is supplemented with a description of where the user is and what he can do next. Important elements are marked with accent color. On the sitemap, the main page is in the center, each item will indicate the section where you can get from this page. Different colors mean different levels of access.</p>
<div class="boxinline"><img class="size-uf1" src="uf1.png"></div>
<div class="boxinline"><img class="size-uf2" src="uf2.png"></div>
<div class="boxinline"><img class="size-uf3" src="uf3.png"></div>
<div class="boxinline"><img class="size-sm" src="sm.png"></div>
<h2 class="header12 rightfont">Step 3. Lo-Fi Prototyping</h2>
<p class="discription rightfont">At this stage, an approximate structure of the screens is shown. You can observe the hierarchy of fonts and tones. Location and size of elements. Some small details.</p>
<div class="boxinline"><img class="size-cor" src="lofi.jpg"></div>
<br>
<br>
<h2 class="header12 rightfont">Step 4. Design Sistem</h2>
<p class="discription rightfont">Creating a system design is the most time-consuming stage, but this stage pays off. Any screens are easily obtained from the elements of the design system. I have chosen fonts, colors and grids. I created cards for all possible items and products. Buttons and input fields options.</p>
<div class="boxinline"><img class="size-tgh" src="tgh.png"></div>
<div class="boxinline">
<img class="size-colors" src="colors.png">
<img class="size-ds1" src="ds1.png">
</div>
<div class="boxinline"><img class="size-ds6" src="ds6.jpg"></div>
<div class="boxinline">
<img class="size-ds3" src="ds3.png">
<img class="size-ds5" src="ds5.png">
</div>
<div class="boxinline"><img class="size-ds2" src="ds2.png"></div>
<div class="boxinline"><img class="size-ds4" src="ds4.png"></div>
<h2 class="header12 rightfont">Step 5. Final Hi-Fi Prototype</h2>
<p class="discription rightfont">Having made all the main screens, I moved on to prototyping. Onboarding. Registration and login process. Finding the right product through the search. Filtering search results. Adding to cart. Removal from cart. On the profile page, payment settings, delivery, chat with support are available. With "Flow 2" you can hit the splash screen.</p>
<div class="container12">
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqeJJTScdy9b9tMVeU39KYW%2FUserFlows%2526WireFrames%3Fpage-id%3D66%253A6518%26node-id%3D108%253A9154%26viewport%3D353%252C48%252C0.06%26scaling%3Dscale-down%26starting-point-node-id%3D108%253A9154%26show-proto-sidebar%3D1" allowfullscreen></iframe>
<!-- </div>
<div class="box-1">
<p>.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> -->
<br>
<br>
<br>
<footer class="zone yellow">Mikhail Vodopyanov</footer>
</div>
</body>
</html>