https://www.eden-design.net/about daily 0.75 2025-01-08 https://www.eden-design.net/na-companion-app-documentation daily 0.75 2024-09-25 https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/3c1aa750-049f-4aec-9a7d-058db5670042/Capstone_1_screens_-_Figma_26-11-2023_826.jpg https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/c45caa2c-3d2e-4ba9-a424-5ccd1b4878fe/research+and+sketching.jpg https://www.eden-design.net/sitemap daily 0.75 2023-11-16 https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/e0a7cdd4-5c24-4ac0-892a-ca7e3428b292/Sitemap.png https://www.eden-design.net/design-doc-1 daily 0.75 2024-09-25 https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/e15d3f20-01d7-4a04-9bcd-910524ad10d4/Role-Playing_Video_Game_Companion_App_Presentation_10-11-2023_808.png https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/27a6bb3b-92f0-46f8-9fca-aa1077fc6490/user+questions.png https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/7b9fc3bb-86a3-45c9-827d-530060a8a8f1/botw+guide+1.jpg NA design doc 1 An interactive map in Breath Companion, a companion app for the game The Legend of Zelda: Breath of the Wild. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/7ead33f3-bf45-45d6-80b5-73e399b7030b/notebook.jpg NA design doc 1 A spread of my notebook, where I jotted down what my research participants said in real time. This was a lifesaver for the first few interviews, as I'd forget to press the "record" button on my recording software at the start of an interview. To ensure accuracy, I often asked my participants to pause or repeat what they were saying, which they graciously obliged. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/69d820ae-268f-4bd9-a60e-54271c6c8fd7/scribble+1.jpg NA design doc 1 Left: The first iteration of the homepage, or "Speed Dial" screen. There was no menu bar at the bottom, and a persistent header dominated the top of the screen. Right: Early wireframe of the app mapping out possible menus, submenus, and interconnecting branches. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/275a4878-e710-4f75-a0de-7149c7ae1421/botw+guide+2.jpg NA design doc 1 A list of menus in Breath Companion. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/2185d635-3174-49a8-b7fa-8bcc6d0ecfd9/User_Interviews_10-11-2023_807.png NA design doc 1 Later recordings. These interviews would go on for tens of minutes as participants expressed their sentiments in detail. Sometimes the conversation would follow some tangent about the game itself. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/b00958cb-f077-4c84-b40a-2d07bfcd06b5/scribble+2.jpg NA design doc 1 Left: Mockup of the machine data menu. I had not yet considered exactly how detailed I wanted the page to be, but I at least wanted locations and spoils to be displayed. Right: Simple list of machines. I was considering a list with profile pictures for each machine by its name. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/924e0471-45f8-42ff-94f6-9e3e35934904/dead+cells+screen.jpg NA design doc 1 A summary of a given stage in Dead Cells, with each part of the stage communicated solely through game-specific icons. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/5ed32f33-b3f1-4539-b840-8e47b802a030/Sitemap.png NA design doc 1 Final wireframe draft. Relatively simple compared to most other app types, but comprehensive in its scope. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/3ab5c8a4-467b-48f2-b72b-d80461284bb9/u+dot+gg.png NA design doc 1 u.gg, an online stat tracker for various online multiplayer games, such as League of Legends and Valorant. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/463c5b26-b695-47c6-ba79-e2fd5ceecaab/User+Flow+-+Red+Route+map+1.png NA design doc 1 Draft of a user flow. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/15c1009b-dca2-4b9c-bf0d-4a37b79d7c08/User+Flow+-+Red+Route+map+2.png NA design doc 1 Another draft for a user flow. https://www.eden-design.net/na-design-doc-2 daily 0.75 2024-09-25 https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/3a457e0e-e50f-4faf-900e-093c338544e7/color_HUD.png https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/87ebf09e-91df-4792-a7ff-edd75e237a95/near+default+palette.png NA design doc 2 Default theme for near. I sampled various in-game screenshots of the menu in NA, then adjusted their levels for visibility. Instead of the orange used in NA, I opted for a deep, drab red that would better stand out against the beige background. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/504e3a8b-b726-4887-bc39-455c7e2fc870/enemy+list+old.gif NA design doc 2 The old enemy list, which largely relies on the user's familiarity with the game. Not very friendly towards new players. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/803e7aa0-4b75-4ee7-97d7-e9c890000c73/fish+table+scroll.gif NA design doc 2 The "Fishing Locations" table listing each overworld hub, fishing spot locations, and catchable fish at those locations. Note: Hard to read, especially on smaller screens. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/bfb67418-7986-48e8-8a7e-28d0a5de3312/near+-+Human.png NA design doc 2 The "human" theme for near, or a rebadged version of the default iOS theme. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/fa9919f0-36fe-4d4b-b5d2-e35d63513554/enemy+list+new.gif NA design doc 2 New enemy menu. Each enemy type has its own carousel of cards that allow for immediate recognition of a given enemy. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/728f191d-266f-474e-9c73-5f0eba9314ed/merchant+table+scroll.gif NA design doc 2 Another table on a Merchant page listing their wares. Smaller than the fishing table, but still inconvenient for the user. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/352fb106-2d4e-4559-917e-cae3c2f63c85/near+-+common+UI+elements.png NA design doc 2 Component sheet for near. The need to create components first occurred to me once I realized copy-pasting the same button, then flipping its colors for each screen was incredibly time-consuming. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/cd1367f9-65e7-4c9c-ae34-d5bd9b24cd5a/item+scroll.gif NA design doc 2 A weapon page. Here, the table has been split into "body paragraphs," each with its sub-header. While it may take longer to scroll, the varied weight on the font and lack of horizontal scrolling greatly improves readabilty. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/c2390712-0389-4089-a07d-fe3d751aee30/near_font.png NA design doc 2 Inter, the typeface for near. I used different weights to help break up larger bodies of text. https://www.eden-design.net/cyclecentral-design-doc-1 daily 0.75 2025-01-06 https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/87d731ad-0e2f-4361-9558-6369db1fa7ee/pexels-photo-shopper.jpeg https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/4a91c21b-0f30-4963-9acf-e2e53b00a108/IMG_5858.jpg cyclecentral design doc First sketch of the product page. The site header features, from left to right, the logo/home button, some bike categories, a search button, and a cart button. The catalog is a grid of product "squares" that feature an "add to cart" and "add to rack" button in each of the top corners. Below each square is the name of the bike as well as an average user review score. The bike rack conveniently sits at the bottom of the screen. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/279a493a-4765-4ca2-ac01-385e92380e20/Capstone+2+Sitemap+-+cyclecentral+site+map.jpg cyclecentral design doc Sitemap. Limited in scope to accommodate only the checkout flow. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/a8b30126-187a-40cd-96aa-4f8032500996/main+product+page+view.png cyclecentral design doc Hues of blue and highlights of gold lend themselves to the professional, reliable, and knowledgeable reputation of Cycle Central. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/8846c417-b465-4819-986d-c183bcd3d44a/verify+shopping+cart.png cyclecentral design doc The shopping cart. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/93d5ef8c-9fc8-40f1-9f89-ab94d00a7036/Figma+-+Capstone_2_Project_Prep_-_Figma+-+128+-+02-01-2025.png cyclecentral design doc Early ideation focused specifically on having a simple, up-front product page with detailed yet easily navigable comparison tools. The implementation of the comparison tools varies between each competitor... https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/691b0702-9ca4-4c44-bd5d-54b23f70f111/IMG_5859.jpg cyclecentral design doc Bike rack. Up to three (or even four) bikes laid side by side to compare photos and features. The whole is separated into an accordion of drop-down menus so users can compare features that matter to them. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/093fde3f-8602-408a-b1a8-e289398433f8/bike+rack+overlay.png cyclecentral design doc Simple overlay where users can edit their selections before opening a more comprehensive comparison window. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/7652652b-f5b5-442f-aa4e-cf38e90d005d/sign+in+overlay.png cyclecentral design doc Prompt for guest or registered user checkout. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/d3f065c5-ceb8-49ef-bbcc-1c0d558b206b/case+study+2+user+flow+horizontal.png cyclecentral design doc User flow for browsing and checkout. Keep it simple! Customers should see what they want and get what they want with as little hassle as possible. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/060e6775-bc06-43f5-bf7e-d12c5f1a912a/Figma+-+Capstone_2_Project_Prep_-_Figma+-+130+-+02-01-2025.png cyclecentral design doc ...wherein they might have everything on a separate page that has everything expanded. Scrolling through this can take a while. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/a816aff2-e070-414f-92b2-745e72483b5c/checkout+proto+screen+1.png cyclecentral design doc Delivery details... https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/d0878dd6-e9fe-4c2f-9c6b-41e637b9870b/bicycle+comparison+window.png cyclecentral design doc The bicycle comparison window, with three bikes being compared and their respective features listed below. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/1a40e84a-95eb-435b-8cc3-3ce5ac3a8096/checkout+proto+screen+2.png cyclecentral design doc personal details... https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/242f6b89-8ea4-4e1b-aa72-1e12924e6215/firefox+-+Sale_Bikes__Cannondale_%E2%80%94_Mozilla_Firefox+-+132+-+02-01-2025.png cyclecentral design doc In this picture and the next, we see a comparison window that is limited to the overlay itself and doesn't open in a new page. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/60c896fc-2b20-4ca1-b036-9774563d534d/checkout+proto+screen+3.png cyclecentral design doc and payment. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/86857c58-01ca-4978-871d-d99db84e5e59/firefox+-+Sale_Bikes__Cannondale_%E2%80%94_Mozilla_Firefox+-+133+-+02-01-2025.png cyclecentral design doc Following from the image prior, we can see that this site also opted for an entirely expanded menu. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/2e7776d7-6ce8-4ca2-b548-3a879cf690ee/firefox+-+Product_comparison_-_IKEA_%E2%80%94_Mozilla_Firefox+-+134+-+02-01-2025.png cyclecentral design doc As we can see here, the competition isn't limited to bicycle retailers. Ikea has arguably the most flexible comparison tool, which allows for over a dozen products to be added and prevents information overload with collapsible sections. https://www.eden-design.net/asdf-1 daily 0.75 2024-09-25 https://www.eden-design.net/asdf daily 0.75 2024-12-05 https://www.eden-design.net/portfolio daily 1.0 2024-12-11 https://www.eden-design.net/portfolio/smaller-projects-and-exercises monthly 0.5 2024-12-05 https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/2f2a210c-976f-429f-99b1-dae3a3507106/unit+12+proximity+principle+exercise+initial+design.png portfolio - Smaller projects and exercises The initial, faulty design. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/04422962-a1c3-408a-996d-23dd8291e6f5/Landing+Page+template.png portfolio - Smaller projects and exercises Original file. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/bf916158-629d-40fb-b8f7-27a19bb06351/Intro+one.png portfolio - Smaller projects and exercises Intro page. The user can curate their trips from here, or blaze their own path. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/f7c7c429-1418-440e-80ab-f17bf802e506/rahmi+unit+12+proximity+exercise+-+dashboard+1.png portfolio - Smaller projects and exercises Realigned some elements for coherence. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/b8a81f2d-dd2b-4181-ba20-0dc7afe9b84d/Landing+Page+negative+space+practice.png portfolio - Smaller projects and exercises Adjusting negative space. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/db52350f-b0ec-4006-a91c-3e3a4d0d989a/Intro+2.png portfolio - Smaller projects and exercises Here, the user can put their sightseeing in order or make it into a to-do list. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/2f922d02-da12-4ba2-afe9-d7e46510673a/rahmi+unit+12+alignment+exercise+and+final+screen.png portfolio - Smaller projects and exercises Further rearrangement and more consistent palette. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/8817e776-8721-42ce-8b20-7feb24019f7d/Landing+Page+scale+practice.png portfolio - Smaller projects and exercises Adjusting again for scale. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/1af4cc5c-c2ac-42c3-9745-7db691bbf6b3/Photo+Edit+Screen.png portfolio - Smaller projects and exercises Image editing window. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/d56e9bc0-0549-41ab-b08d-431d38178c3f/share+overlay.png portfolio - Smaller projects and exercises Sharing overlay. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/e94bd03a-3ef9-4b7b-babb-928d8f1f034d/Trip+complete.png portfolio - Smaller projects and exercises Completed trips are organized into galleries for review. https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/466c33fe-26b9-470b-b7f9-15ca6860b438/Trip+map.png portfolio - Smaller projects and exercises You can opt-in to geolocation so you can refer a given picture to where it was taken. If not, you can still pan around the map as usual. https://www.eden-design.net/portfolio/check-out-this-checkout-flow-cycle-central monthly 0.5 2024-09-25 https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/adebf571-31b0-4209-9150-cb4611fb3249/bicycle+shop+pic.jpg https://www.eden-design.net/portfolio/na-companion-app monthly 0.5 2024-09-25 https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/3f80711b-151d-4541-8eff-3dbbe892837b/NieRAutomata_217_03-2023.jpg https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/2a13d50e-bf78-4548-b8a8-38ba25cbcd4d/quest+browsing.gif https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/df7fb17c-cbe1-457f-ab92-65a5a2c67126/NieRAutomata_219_03-2023.png https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/1136de8c-8559-40dc-b1ac-4f302e7daf12/item+browsing+rev.gif https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/d5c105f4-32cb-4be7-b26b-5cfa90d6c26a/NieRAutomata_236_03-2023.png https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/1bb61911-15cc-4267-8e3a-06a284e48fc8/NieRAutomata_225_03-2023.png https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/4b5624bd-a153-4243-809b-171930516bcd/Character+-+Plug-in+Chip+Stats+-+Weapon+Attack+Up+%5Bnear%5D.png https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/010f2025-1145-4955-bf3f-cf3c0188facc/Screens_-_Capstone_1_screens_-_Figma_12-12-2023_862.gif https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/1f6c4f17-9cff-4997-ae16-0c3ef050c26b/Character+-+Plug-in+Chip+Stats+-+Weapon+Attack+Up+%5Bhuman%5D.png https://images.squarespace-cdn.com/content/v1/654196c1dd3319613510972e/0e59d848-ce32-4ccc-ba4e-4b6cc8b31916/nier+automata+cover.jpg portfolio - Nier Automata companion app [Near]