System 3.0 - Elevating User Experience through Design Sprint Prototype
Role: UX/UI Designer
Year: 2018
Tools: Adobe XD, post its & Sketch
Team: Efrain CEO of docDigitales, Eleonora Lead from Engagement, Martha Lead from Customer Service, Victor Product Manager, Miguel Lead Developer, Daniel UI designer
The Motivation
Our mission was clear: to rejuvenate the docDigitales software through an intensive 5-day Design Sprint. In my role as the sprint facilitator, the central question that guided our efforts was, "What should we do next?"—both in terms of the brand and the product.
Layout of the invoices list, displaying full menu, compressed menu and a full preview of a single invoice within multitasking screen.
The Sprint Journey
Day 1 marked the initiation of our sprint, where we delved into defining challenges, objectives, and creating a roadmap. The primary goal was to transform our system into an integral and user-friendly solution for micro, small, and medium-sized businesses. We identified our target users, focusing on independent professionals and businesses in the service and commerce sectors. Furthermore, we honed in on key actions provided by the docDigitales software, encompassing the generation of invoices, bills, and quotes.
Top image is the map from day one translated to english, bottom is the original.
Day 2 pushed us out of our comfort zones, inspiring a brainstorming session that unfolded through sketches, igniting innovative ideas.
On Day 3, we organized the previous day's brainstorming results. We identified three core actions: reorganizing the dashboard and widgets, crafting tutorials, and refining the invoice creation process. Additionally, we revamped our menu structure to enhance content accessibility.
The next days were dedicated to fine-tuning the user experience for our products.
The Prototype & Outcomes
Our software now boasts lists that elegantly conform to a lateral view, enabling users to simultaneously browse list items and delve into the details of a selected item. We adopted horizontal ratios of 5:25:70 for the main menu, menu selection, and content, and 25:75 for the expanded menu and content. Furthermore, we separated batch actions from those applicable to a single item. Batch options occupy the top of the list, while individual actions are displayed as icons within the item field.
Current horizontal menus vs a more organized and friendly lateral menu layout (now instead of putting our logo at the top, our client sees their logo)
wireframes of the layout of the invoices list, displaying the full menu, compressed menu, and a full preview of a single invoice
Given docDigitales' primary focus on invoicing, we invested considerable effort in optimizing the user experience. When users create an invoice, they are seamlessly guided through the process, with blank fields awaiting input. Users can effortlessly enable Payment Options, Recurring Invoices, and set an Expiration Date. To further facilitate invoice generation, we provide helpful tips without being intrusive.
Navigating through invoices options
Our initial prototype, borne from sprint brainstorming and sketches, aimed to make the user journey—from account creation to software recommendations—intuitive and user-friendly. Usability tests with potential customers provided valuable insights, refining elements like button placement and user interactions. The results were promising, as users effortlessly navigated our software, executed actions, and made recommendations.
Navigating through menu and help center
This project has enriched my understanding of user-centric design and the pivotal role of a Design Sprint in revitalizing a software system. The experience has ignited my passion for crafting intuitive and impactful user experiences, a journey I'm eager to continue. In conclusion, System 3.0 exemplifies our commitment to enhancing the docDigitales software's usability. Through a dedicated sprint, we've reimagined the user experience, creating a product that resonates with our target users and propels our brand forward.