OUGD603 / Extended Practice
Background
Brief 04 — Svpply
Svpply was a website primarily used as a shopping list and product discovery tool. Svpply also worked great socially. You could follow friends / people with good tastes to find out what’s on their wish list. The things they add to their Svpply show would show up in your feed. You could also create lists collaboratively or by yourself. Unfortunately, Svpply was bought by Ebay on August 31st, 2014. Ebay allows you to make a wishlist, but it is nowhere near as visual as Svpply, and only allows items from Ebay. Svpply also had a strong following which has now been lost.
Self Initiated Brief Time Scale 7 Weeks
Brief
Revive Svpply, with a refreshing new website / app which works over a variety of digital platforms. It is vital that the website is designed and programmed using Adobe Muse.
1 / 14
Audience
15 - 25 year olds, globally but English speaking, both male and female.
Mandatory Requirements
- A programmed website. - App proposals. - Minimum of 3 A3 design boards.
OUGD603 / Extended Practice
01
Evaluating The Previous
Before creating something new, it was important to evaluate the old website / brand, in order to see if any of the previous features worked and did not work.
Brief 04 — Svpply
Evaluating The Previous
Logotype
The previous logotype was masculine, which explains why the main bulk of it’s users were male. The rebrand will try to include women more with it’s identity.
Colours
Svpply had an extremely simple colour scheme for each of the product areas. This was hugely succesful in both functionality and aesthetic, and is definitely that should not be dropped.
Layout
Layout is something that needs changing. The previous site did not hold much structure, or take full advantage of the quality of images on eCommerce sites.
2 / 14
OUGD603 / Extended Practice
02
eCommerce Research
eCommerce websites were researched into as although Svpply is not a typical online store, the nature of how it works rely’s on this structure. Grid systems were also considered, in order to create something consistant and more structural.
Brief 04 — Svpply
eCommerce Research
3 / 14
OUGD603 / Extended Practice
01.
Svpply
05.
02.
Svpply Svpply
Bodoni72 — Book
Bodoni72 — Bold
10.
Logotype Development
Svpply
07.
Svpply Svpply
Logotype Development
03.
06.
09.
03
Brief 04 — Svpply
Sticking to a classic serif, the logotype was tested at length with a variety of different typefaces. A lowercase option will be chosen, as it is seen as much less masculine.
Svpply
08.
Svpply
Svpply
Book Antiqua — Regular
Bookman Old Style — Regular
11.
Svpply
04.
12.
Svpply
Svpply
4 / 14
OUGD603 / Extended Practice
Tracked Changes
04
Final Brand Marks
• Addition of ‘vp’ ligature. • Reduced Ascender height. • Reduced Descender height. • Custom ‘y’ terminal.
Brief 04 — Svpply
• Custom ‘S’ terminal (upper not lower) • Modified upper serifs. • Increased width of S and l serifs.
Above you can see the tracked changes made to the chosen to typeface to make a custom logotype. Although this is the full logotype, the secondary logotype is more for website use. This small icon is reconisable by the combination of a soft and hard serif, representing that Svpply is for both male and female users.
Logotype Development
5 / 14
OUGD603 / Extended Practice
05
Using Adobe Muse
Originally, the brief was set as a way of using Adobe Muse, a new web-design software that codes websites as the user designs. This obviously means that designers like myself, who are confident in web design but not in the coding, can produce working websites. Tutorials were followed on the basics. Even though I am confident with most of the Adobe Suite, Muse is very difficult to pick up. After researching online, other people have had a similar issue, as the software is so new. Adobe Muse also codes websites badly, and cannot produce responsive sites.
Brief 04 — Svpply
Using Adobe Muse
New Action Plan
Adobe Muse needs time to be developed, so it is more intuitive, as well as allowing responsive design, something uniquitous in modern day web design. Instead of cancelling the brief, it was decided to design a website ready to code, using Photoshop. Previously websites have been designed, but organising layers and designing to scale is something I have never done right. Instead of designing as I worked in Adobe Muse, wireframes will be sketched and put into action.
6 / 14
OUGD603 / Extended Practice
06
Final Designs 01
Home Page
Brief 04 — Svpply
Upon arrival to the home page, visitors are greeted with a ‘latest and greatest’ section, showing new arrivals to Svpply’s linked stores. There is also an image grid, showcasing products, as well as a section encouraging visitors to join, in order to create their own sets of collections.
Final Designs 01
7 / 14
OUGD603 / Extended Practice
06
Final Designs 02
Brief 04 — Svpply
New Arrivals
Here you can see the ‘New Arrivals’ page, accessable from the home page. Each section is colour coded, with the colours used for each section when they are visited.
Wants & Collections
By hovering over items, users get the oppurtunity to ‘want’ or ‘add to collection’. Wanting an item will add to your list of wants on your profile, whilst adding to collection groups items on your profile. These can be done by a simple click on either ‘W’ or ‘C’. Information is also displayed on how many other users want the item.
Final Designs 02
8 / 14
OUGD603 / Extended Practice
06
Final Designs 03
Categorised Pages
Brief 04 — Svpply
Above you can see an example of ‘Men’s’, but this layout is the same over all categories. The colours used are specific to the Men’s page, and other pages will have different highlight colours. Users can narrow down their search, using price, size, type and brand.
Final Designs 03
Closeup
By clicking on the product, users can view the product as a larger image, as well as the sizes that they are available in, if applicable.
9 / 14
OUGD603 / Extended Practice
06
Final Designs 04
Feed
Brief 04 — Svpply
The feed allows users to see what theyir friends are wanting to buy or have purchased. This service is something that cannot be viewed on any other social media without obviously stating, so is entirely unique to Svpply. Item’s that a user wants appear on the feed, whilst item’s purchased from Svpply’s linked stores can also be displayed as ‘items bought’.
Final Designs 04
Updates from stores that are followed are also displayed, meaning users can keep up to date with the latest fashion trends from a variety of shops, with information all in one place.
10 / 14
OUGD603 / Extended Practice
06
Final Designs 05
Profile
Brief 04 — Svpply
Your own profile displays items you want, own and your collections. These can also be viewed by other users. Users can follow your wants and collections, so that your information appears on their feed.
Final Designs 05
11 / 14
OUGD603 / Extended Practice
06
Final Designs 06
Collections
Brief 04 — Svpply
Your own collections appear in a simple image grid, with hovering over images giving information. Clicking the image will take users to the details page, in order to check price, size, etc.
Final Designs 06
Store Profile
Similar to a users profile, a store can also have their own account and profile. Both share similaries in terms of profile information, but differences in collection types can be viewed above.
12 / 14
OUGD603 / Extended Practice
06
Final Designs 07
Mobile Pages 01
Brief 04 — Svpply
On mobile devices, each page appears in a single page column.
Final Designs 07
13 / 14
OUGD603 / Extended Practice
06
Final Designs 08
Brief 04 — Svpply
Mobile Pages 02
The top dropdown menu is the same as on the originally Svpply design, something iconic to Svpply’s design.
Collections / Wants
Similar to the desktop version, users can still want and add to collections. Instead of hovering over the image, users swipe right on the image to bring up options.
Final Designs 08
14 / 14