UI/UX Case Study: Redesign “SentYourWaste” (SYW) Program at waste4change.com

Deskripsi

Design Process In this case, we use Design Thinking as our design process approach. Because this method is the most commonly used and in accordance with the learning material provided. We started from the define stage because the objective of the challenge had been determined from the start, so we passed the empathize stage. A. Define From the results of user findings, observations and research, it is determined the difficulty (pain point) needed, and the user’s focus (goal) which will be used as the basis for the next stage. B. Ideate At this stage, we group the pain points that have been determined, and after that, we proceed to the affinity diagram stage, from there we group ideas, and vote on which will be a priority in the work. We summarize these ideas in the diagram below: C. Prototype At this stage, we work on user flow, information architecture, wireframe, HIFI/UI design, and prototype. 2. Wireframe Next is the wireframe stage. In this section, each of us creates a wireframe and is based on the available system designs. 3. HIFI Design After the long steps above, here are the results of the high-fidelity design. comparison before and after design Header — In part 1 the header is messy, so the information displayed is not clear, so we display menu information with a hamburger button Recycled waste — The recycled waste flow is quite confusing because there is no visualization (in the form of pictures or illustrations) of what is meant. In part 2 we added the images in question, so that users see the real thing, not just imagine it. Delivery location — In the previous design, the information conveyed was not to the point. We added a description of the place of the Delivery location. Steps before Recycling — In the previous design, used a stepper/slide. while in the latest design we describe it openly, with the aim of the user understanding when recycling. FAQ & Footer — Like the previous design, we also added a footer and FAQ with a more concise, clean appearance, but conveyed the intended information. For a more complete design, you can try the prototype “Here”