Part of the BringYourOwnLaptop.com official Figma Essential certification, this UX/UI design project included it's own task brief, a Task Flow for eCommerce, low-fidelity wire-framing, customised styling, components and finally high-fidelity prototyping.
Here is the design process from inception to completion:
BRIEF & Task Flow
Project name: Sid Phone
Target audience:
Your ideal customer is a woman named Esteé. Esteé is in their mid 30's and is single. They have a High School Graduate and manage a large team. Esteé lives in London, is very familiar with your product and has a hectic schedule.
Your ideal customer is a woman named Esteé. Esteé is in their mid 30's and is single. They have a High School Graduate and manage a large team. Esteé lives in London, is very familiar with your product and has a hectic schedule.
What is a Task Flow?
A visual representation of the specific steps a user takes to complete a single, defined task within a product or system.
This task flow is being used for this case study as an simpler, lineal process for customers to use, which ultimately makes it easier for them to purchase a product without much confusion.
Low-Fidelity Wireframe
Using Figma design feature and the brief given, a low-fidelity wireframe is being used to start the initial sketches, layout and structure that best suits this project. This is the first vision of what the project might look like initially and allows collaborators to rapidly amend UI interface without delay.
Styling, Typography & Components
Once the wireframes have been approved, the brief comes back into play to select the correct colour scheme, typography and UI components that best suit the persona of the customer Esteé. Using a more subtle colour palette and a mix of Serif to digital-looking San-Serif brings the experience of shopping for a new phone more closer to home for this persona.
Below are the screenshots of globalised styles, colours and UI Components (with their respective Variants) that was selected. These would be used in the high-fidelity stage of this project.
FINAL HIGH-FIDELITY PROTOTYPE
Using Figma High-fidelity animation and interactive tools, this allowed me to gets a more realistic representation of what the final product will look like once everything is approved by stakeholders. A fun stage where all the collaborative work gets showcased.
Using global stylings, colours and components to keep with the brand guidelines, a fully interactive prototype was created and shared with the project/case study organisers. This allowed them to use their computer or phone to get a grasp of the full user experience of SidPhone shop.
This project was approved and allowed me to be certified as a Figma Essentials trained candidate for future collaborative work.