Overview
From April to July, I had the opportunity to work as a Product designer for the Fabrication Shop department at SCI-Arc. My task was to optimize the Fabrication Shop's online services, ending up with a redesign of the Fabrication Shop app. The app is a reservation platform for current and future students at SCI-Arc to complete their physical model-making for their design class.
-
The new fabrication shop app reduced 3 screens and 60% time spent on the reservation flow.
-
Product Lead
User research to inform product strategy.
Design user-flow based on user-centered method.
Design wireframe and prototypes.
User testing for design iteration.
-
Report to the manager of Fabrication Shop
1 UIUX designer
Outsourced engineers
-
Research & design: 10 weeks
Total project: 4-5 months
PROBLEM
The client, as a shop manager, wants to optimize fabrication user flow using digital platforms to solve the low rate of user satisfaction.
First, the main business goal was to provide efficient services while ensure the safety of students and maintenance of the machines, and there are several businesses that already have their dedicated applications. However, I found that only “Laser Cutting“ & “CNC Milling” services lacked of dedicated apps and current apps were poorly designed, causing students competing for fabrication resources. Hence, I decided to focus on Laser Cutting & CNC Milling parts to increase the user satisfaction.
SOLUTION
Help users easily make reservations by facilitating decision-making among material, machine, time.
With the HWM question above in mind, I translated research findings into three key UX strategies that aim to fit the user mental model. PS: welcome to look at the research details which can be found in the later part of the case study.
Best Match Tool
User Impact:
Keep machine and material data in hand for easy access
Recommend the best-match machine and the machine-compliant material specs based on your search
Search time availability with your best-match choice now
Business Impact:
Protect machines from damage
Real-time availability
User Impact:
Drive reservation decisions between two time modes on one screen
Check 7-day in advance available session to make an instant book
Provide the function of today’s waiting queue to maximize the chance of using the machine
Business Impact:
Maximize usage of machines
Quick search
User Impact:
Provide two quick search entrances to get information at any time anywhere
Help accelerate fabrication decision-making process to make a reservation
Avoid the lengthy appointment process of the previous solution
Business Impact:
Reduce repetitive inquiries
How I got there?
RESEARCH
Students weigh aesthetic quality and feasibility of model making back and forth.
Since the current solution was functional but still not fit for the student’s needs, I decided to use qualitative research method to dive into the mental model of the target users.
Through interviews with 7 current students, I found that students moved back and forth between three locations (supply shop, workshop, fabrication shop) to create compelling physical models. They tried to figure out the best way to fabricate the model based on the information gathered such as material feasibility, quality, availability, and machine time availability.
“Laser cutting and CNC are competitive. To be able to use the service, I always panically search around for information to book, such as operating rules for materials and machines, and time availability. It’s a complicated process that’s actually very time-consuming.”
— one of interviewees
With the affinity diagram, I boiled down to three themes based on their thoughts, words, and behaviors. Such three themes inform the product strategy in the following phase.
I translated research findings into three key
UX strategies that aim to fit the user mental model.
DESIGN
How might we help students book model making services in a way that fits the user's mental model?
I sketched a lot of wireframes to explore design directions and interaction designs, trying to find the best way that fit the target user’s mental model. There are three key decisions I made at this stage.
Best match with a data set !
The first thing I decided was to build a database to reduce the touchpoints a user goes through. The app becomes a one-stop platform in the booking process. (data such as machine operating dimensions and acceptable material specifications are sorted out for the establishment of a user-centered database.)
Linear flow or Seperated flow ?
I have two information architecture ideas for users to make proper reservations. (1) Use a linear structure in the order of choosing a machine, learning material feasibility, and choosing a time slot. or (2) Divide into two flows of feasibility check and availability search. Based on user feedback, I decided to use option 2 because it takes into account the user's mental model that users are used to frequently checking information during the decision-making process.
General hompage or Quick search ?
I wanted to create a home page for users to accommodate two user flows. With the user feedback, I decided to create this page with search bars/options for frequent checking, instead of general CTA buttons.
TESTING + IMPROVEMENT
3 major iterations in my design
Based on various feedback from 5 users and the fabrication manager, I continually iterated the design over 4 weeks — with 3 major improvements:
Replace Map with Table
Based on user feedback, the real-time status representation in today’s queue is not clear enough to understand. I decided to replace the map diagram with status table to prioritize instant visibility of the machine status.
Upgrade search card interaction
Considering user feedback, the toggle design in search card is not intuitive in the interaction of toggle paginations. I decided to move the toggle design out of the search card and bundle it with the toggle pagination area to enhance the intuitiveness of the interaction design.
Remove navigation bar in the best-match flow
According to user feedback, navigation bar in the best-match flow is not useful and sometime leads to mis-tapping. I decided to remove the navigation bar in this flow to provide more space for the content and allow the user to focus on the content.
THE FINAL SCREENS
The final product
The prototype is created with Figma
The style guide
I referenced Material Design to build my design style guide with the WCAG-compliant standard and matched the brand image of fabrication shop.
TAKEAWAYS
What I’d do differently next time?
This was my first-ever dedicated mobile app and was more than the actual output. The designed app makes users feel like Fabrication Shop thinks about how to meet their needs.
“I like the app, very intuitive and very clear about what you need to do to reserve times.”
— one of interviewees
Design intentionally, not process-driven design. Despite weeks of research + development, my initial design thinking was loosely structured instead of tying everything into the bigger question- “what holistic picture are those insights trying to convey?” Hence, I was able to boil it down to a few essential design movements! Hence, going forward I believe focusing more on the bigger picture will improve not only my storytelling but also my design abilities for other projects.
Iterating makes everything better. While designing this app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback drive iterative-design-cycle, and influenced each version of the app development, which gradually became unified and inclusive.
Thank you for reading!
You Might be interested in.
ContentFi LeapStart
Illustration Studio E-Commerce Website