I worked in a team of 6 to conceptualize, design, and develop a mobile app that allows entrepreneurs to share their calendars and availability with their clients. This was an academic project and we worked in a sprint of two weeks.
We created a mobile app that allows entrepreneurs and small business owners to seamlessly set up their own working hours and share such hours and availability with their clients, all from the comfort of their mobile devices. This mobile application allows both entrepreneurs and clients to communicate and schedule meetings quickly and easily.
framework
I analyzed and audited multiple mobile webs and apps such as Android calendar, Fiverr.com, Opentable.com, Upwork.com, and Calendly.com.Floating Action Buttons (FAB), consistent iconography, and clear CTA’s were some of the main UI components that stood out from this audit.
- These websites and apps follow UX best practices. Main CTA’s are placed where heat mapping research suggests that virtually every user can access them, and there is a clear typography hierarchy among multiple screens.
- We were able to find out that users prefer a weekly default calendar view based on survey data.
- Additionally, most users would use a smart calendar for business purposes which is a positive indication that this product can be useful.
- According to data from eventable.com, billions of people check their calendars daily; therefore, it was imperative for our team to create a product that was functional and could compete with other similar products.
During this phase, we took our research and created a clear vision of the problems that need to be solved as well as different ways to make our end product functional and user-friendly.
One way to keep us focused on our end user is by creating a fictional user persona that feels as close to a real potential user as possible.
We met with our Web Developers and I worked as the meeting moderator to discuss the journey and generate feature ideas for each stage.
After identifying some of the potential pain points our users would go through, we identified features that we could add to our app.
Both teams joined to plot feature ideas on a Value vs Effort Matrix.
We all voted on the most important features and arranged them inside the matrix. The main goal was to create the MVP with features that were commensurate with our KPI’s.
The creation of the site map was a crucial step in the design as it is a tool that our Web Development team would later refer to on multiple occasions.
e created a UX Strategy in the form of “We Believe” statements. It is extremely important to lay out a strategy before we start to design as this is a way to stay focused and on the right track for the final product’s look, feel, and purpose.
design
The first step in the Design Phase was to brainstorm some quick sketches. These were hand-drawn on a whiteboard.
I created a design system from the start so that my design partner and I would both use the same format and icon ideas from the beginning of our wireframe designs.
- Different changes were made to all wireframes based on user testing and feedback.
- According to Hick’s law of UX, the time it takes to make a decision increases with the number and complexity of choices, hence the simplification of the nav bar and the addition on floating action buttons (FAB).
- User testing allowed me to make changes to the “select” button which was intended to select availability and set up work hours. It was not clear so I redesigned that feature.
- The nav contained numerous items that were too close together but had different functions; thus I moved some of these like the view toggle below the nav and made it easier to access. (Daily, Weekly, Monthly) and removed ambiguous elements such as the “select” section seen in the middle above.
I placed the Floating Action Button (FAB) for adding a new event (bottom right corner) in a place where according to heat mapping research, most users can reach it regardless of preferred handedness.
Complimentary colors were used for this mood board. According to color theory, the teal and orange colors produce a friendly and warm vibe and can also be used for more serious purposes.
With clear and user-tested wireframes, it was time to add color to create mockups that resembled the mood board seen above.Prototypes were created in InVision and re-tested again.
- Task: Log in
- Because of user control, clear and visible CTA’s, tappable areas of a minimum of 44x44 pixels, pagination, and illustration elements, my user persona Andrea Torres can log in easily.
- Task: Toggle Calendar View
- Our survey stated that users prefer a “weekly” view as the default calendar view.
- Andrea, our user persona, can still change the view according to her preferences.
- Task: Set Up Work Hours
- User testing allowed me to include this feature inside the hamburger menu instead of in the nav so Andrea can set up her work hours.
- Task: Create Appointments and Share Availability
- Andrea can tap on clear CTAs and FABs that make it easy for her to create events and share her availability as this was one of her main pain points with the current calendars that she uses for her business.
- Task: Select Date and Time to Confirm Appointments
- Andrea’s client, Daniel Johnson, can see her invitation and select the time that works best for him.Exposed time slots were utilized because in the competitive audit, this system proved to be useful and easy to follow.
A DSM is a guideline containing elements, colors, typography, illustration, and other UI elements that are essential for Developers to create a product that looks and feels like the original design.
- This InVision DSM was shared with the back end to allow them to see and use every component and UI element that was used for Smart Agenda’s design.
- Task: Select Date and Time to Confirm Appointments
- Andrea’s client, Daniel Johnson, can see her invitation and select the time that works best for him.Exposed time slots were utilized because in the competitive audit, this system proved to be useful and easy to follow.
- During user testing sessions for the landing page, some users wanted to skip to the end.
- To solve this issue, a “skip” button was added to the landing pages.
A DSM is a guideline containing elements, colors, typography, illustration, and other UI elements that are essential for Developers to create a product that looks and feels like the original design.
- We presented and reviewed user flows with Web Development to make sure everyone was on the same page. Their feedback was very valuable as they were able to inform us if some designs needed different attributes or presented limitations.
- User flow for logging in.
- User flow for adding a new client.
- User flow for toggling calendar view.
- We conducted several meetings with our Web Development team to make sure that they could access the Design System Manager (DSM) and review every element that was created for this product.
